如何将复选框放在树中？ [英] How to place checkboxes in a tree?
本文介绍了如何将复选框放在树中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE HTML> ;
< html>
< head>
< meta http-equiv =Content-typecontent =text / html; charset = UTF-8/>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/Grid.css>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/claroGrid.css>
< script src =http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js
data-dojo-config = isDebug：true，parseOnLoad：true>< / script>
< link rel =stylesheethref =css / style.cssmedia =screen>
< script>
dojo.require（dojo.parser）;
dojo.require（dijit.form.Form）;
dojo.require（dijit.form.Select）;
dojo.require（dijit.form.TextBox）;
dojo.require（dijit.layout.BorderContainer）;
dojo.require（dijit.layout.AccordionContainer）;
dojo.require（dijit.layout.ContentPane）;
dojo.require（dijit.layout.TabContainer）;
dojo.require（dojo.data.ItemFileWriteStore）;
dojo.require（dijit.tree.ForestStoreModel）;
dojo.require（dijit.tree.dndSource）;
dojo.require（dijit.Tree）;
dojo.addOnLoad（function（）{
dojo.byId（'loaderInner'）。innerHTML + =done;
setTimeout（function hideLoader ）{
dojo.fadeOut（{
node：'loader'，
duration：500，
onEnd：function（n）{
n.style.display = none;
}
}）play（）;
}，250）;
}）;
var store;
var selectedItemId = 0;
var itemSelected = null;
var sel = null;
var idCount = 0;
var treeModel;
var mytree;
var modeSelector;
dojo.ready（function（）{
store = new dojo.data.ItemFileWriteStore（{
contentType：'application / json'，
target：'store'，
url：http://pmis.biz/rwa/data/ProjectList.php
}）;
treeModel = new dijit.tree.ForestStoreModel（{
iconClass：'dijitEditorIcon dijitEditorIconCut'，
store：store，
query：{main：0}，
rootId：0，
rootLabel：project ，
pasteItem：function（）{}，
mayHaveChildren：function（item）{
return true;
}，
getChildren：function（parentItem ，callback，onError）{
if（parentItem.root == true）{
if（this.root.children）{
callback（this.root.children）;
} else {
this.store.fetch（{
query：this.query，
queryOptions：{cache：false}，
onComplete：dojo.hitch this，function（items）{
this.root.children = items;
callback（items）;
}），
onError：onError
}）;
}
} else {
console.debug（Tree child onLoad here：+ parentItem.id）;
if（idCount< parseInt（parentItem.id））{
idCount = parseInt（parentItem.id）;
}
var sx = parseInt（parentItem.id）;
this.store.fetch（{
query：{main：sx}，
queryOptions：{cache：false}，
onComplete：dojo.hitch（this，function ）{
this.root.children = items;
callback（items）;
}），
onError：onError
}）;
}
}
}）;
mytree = new dijit.Tree（{
model：treeModel，
openOnClick：true，
showRoot：true，
setCheckboxOnClick：true，
// onDblClick：function（item，node，evt）{
//}，
onClick：function（item，node，evt）{
resetEditor（）;
}
}，treeThree）;
}）;
< / script>
< / head>
< body class =claro>
<！ - BorderContainer - >
< div id =maindata-dojo-type =dijit.layout.BorderContainer
data-dojo-props =liveSplitters：false，design：'headline'，
style：'width：100％; height：100％; max-width：1050px; min-width：680px; min-height：400px; margin：0 auto;'>
<！ - AccordionContainer - >
< div data-dojo-type =dijit.layout.AccordionContainer
data-dojo-props =region：'leading'，splitter：true，minSize：20style =width： 630像素; ID = leftAccordion >
< div data-dojo-type =dijit.layout.ContentPanedata-dojo-props =title：'NG Tree Hierarchy'>
< div data-dojo-type =dijit.layout.ContentPane
data-dojo-props =title：'Rootless Tree'，
style：'width ：30％; height：100％; max-width：1050px; min-width：250px; min-height：300px; margin：0 auto; float：left'>
< div id =treeThree>< / div>
< / div>
< div data-dojo-type =dijit.layout.ContentPanedata-dojo-props =title：'Rootless CCCCCC'>
<！ - 项目选择器 - >
< div id = help>< / div>< br>
< br>
<！ - < select id =f_2>< ; / select> - >
< br>
< div>
< table style =width：135px; height：83px;>
< tr>< td>
< div id =ip>< / div>
< / tr>< tr& ;< td>
< button id =bddata-dojo-type =dijit.form.Buttonstyle =visibility：hidden
data-dojo-id =bd
data-dojo-props =disabled：true，
onClick：function（evt）{
store.deleteById（selectedItemId）;
resetEditor（）;
}，
标签：'删除项目''>
< / button>
< button id =bsdata-dojo-type = dijit.form.Buttonstyle =visibility：hidden
data-dojo-id =bs
data-dojo-props =disabled：true，
onClick：function evt）{
var lvalue = dijit.byId（'s1'）。
store.setValue（itemSelected，'title'，dijit.byId（'s1'）。value）;
store.setValue（itemSelected，'description'，dijit.byId（'s2'）。value）;
store.save（）;
}，
标签：'保存项目''>
< / button>
< button id =badata-dojo-type =dijit.form .Buttonstyle =visibility：hidden
data-dojo-id =ba
data-dojo-props =disabled：true，
onClick：function（evt）{
idCount = idCount +1;
var newItem = {};
newItem.id = idCount;
newItem.main = selectedItemId;
newItem.title = dijit.byId（'s1'）。
newItem.description = dijit.byId（'s2'）。
store.newItem（newItem）;
sel.setStore（store，''，{query：{main：0}}）;
/ * mytree.update（）; * /
}，
标签：'添加项目'>
< / button>
< br>
< button onclick =mytree.refreshModel（）style =visibility：hidden>
更新
< / button>
< / tr>
< / table>
< br>
< / div>
< / div>
< / div>
< div data-dojo-type =dijit.layout.ContentPanedata-dojo-props =title：''>
< div>< / div>
< / div>
< / div>
< div id =headerdata-dojo-type =dijit.layout。 ContentPanedata-dojo-props =region：'top'>
< / div>
<！ - 顶部标签占用BorderContainer的主要部分） - >
< div data-dojo-type =dijit.layout.TabContainer data-dojo-props =region：'center'，tabStrip：trueid =topTabs>
< div id =basicFormTab1data-dojo-type =dijit.layout.ContentPane
data-dojo-props =title：'Tab1'，style：'padding ：10px的;显示：无;'>
< p> < / p为H.
< / div>
< div id =basicFormTab2data-dojo-type =dijit.layout.ContentPane
data-dojo-props =title：'Tab2'，style：'padding ：10px的;显示：无;'>
< p> < / p为H.
< / div>
< div id =basicFormTab3data-dojo-type =dijit.layout.ContentPane
data-dojo-props =title：'Tab3'，style：'padding：10px; display ：无;'>
< p> < / p为H.
< / div>
< / div>
< / div>
< / body>
< / html>
解决方案
尝试这个（在dojo 1.10上测试）：
require（[dojo / _base / connect，dijit / dijit，dojo / data / ItemFileReadStore，dijit / tree，dijit / form / CheckBox，
dojo / domReady！]，
函数（connect，dijit，ItemFileReadStore，Tree，CheckBox）{
var store = new ItemFileReadStore （{
data：{
identifier：'id'，
label：'label'，
items：rawdata
}
}）;
var treeControl = new Tree（{
store：store，
showRoot：false，
_createTreeNode：function（args）{
var tnode = new Tree。 _TreeNode（args）;
tnode.labelNode.innerHTML = args.label;
var cb = new CheckBox（）;
cb.placeAt（tnode.labelNode，first ）;
co nnect.connect（cb，onChange，function（）{
var treeNode = dijit.getEnclosingWidget（this.domNode.parentNode）;
connect.publish（/ checkbox / clicked，[{
checkbox：this，
item：treeNode.item
}]）;
}）;
return tnode;
}
}，CheckboxTree）;
connect.subscribe（/ checkbox / clicked，function（message）{
console.log（you clicked：，store.getLabel（message.item））;
}）;
}）; // require
var rawdata = [{
label：'Level 1'，
id：'1'，
children：[{
label ：'Level 1.1'，
id：'1.1'，
active：true
}，
{
label：'Level 1.2'，
id ：'1.2'，
active：true
}]
}，
{
label：'Level 2'，
id：'2'
children：[{
id：'2.1'，
label：'Level 2.1'，
active：false
}，
{
id：'2.2'，
label：'Level 2.2'，
active：true
}，
{
id：'2.3'，
标签：'Level 2.3'，
active：true
}]
}];
Can someone suggest how can I place check boxes against each folder of the below tree hierarchy? I am trying to add check-boxes but it is not showing up in my tree shown below. Please suggest the changes i need to make for my below code to get the checkbox displayed. This is a working code , just copy paste the same in a textpad and open in IE allowing activex.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/claroGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
data-dojo-config="isDebug: true,parseOnLoad: true"></script>
<link rel="stylesheet" href="css/style.css" media="screen">
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Select");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.tree.dndSource");
dojo.require("dijit.Tree");
dojo.addOnLoad(function() {
dojo.byId('loaderInner').innerHTML += " done.";
setTimeout(function hideLoader(){
dojo.fadeOut({
node: 'loader',
duration:500,
onEnd: function(n){
n.style.display = "none";
}
}).play();
}, 250);
});
var store;
var selectedItemId = 0;
var itemSelected = null;
var sel = null;
var idCount = 0;
var treeModel;
var mytree;
var modeSelector;
dojo.ready(function(){
store = new dojo.data.ItemFileWriteStore({
contentType: 'application/json',
target: 'store',
url: "http://pmis.biz/rwa/data/ProjectList.php"
});
treeModel = new dijit.tree.ForestStoreModel({
iconClass: 'dijitEditorIcon dijitEditorIconCut',
store: store,
query: {"main": 0},
rootId: 0,
rootLabel: "project",
pasteItem: function(){},
mayHaveChildren : function(item) {
return true;
},
getChildren: function(parentItem, callback, onError) {
if(parentItem.root == true ){
if(this.root.children){
callback(this.root.children);
}else{
this.store.fetch({
query: this.query,
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
}
} else {
console.debug("Tree child onLoad here: "+parentItem.id);
if (idCount < parseInt(parentItem.id)){
idCount = parseInt(parentItem.id);
}
var sx = parseInt(parentItem.id);
this.store.fetch({
query: { main: sx },
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
}
}
});
mytree = new dijit.Tree({
model: treeModel,
openOnClick:true,
showRoot: true,
setCheckboxOnClick : true,
// onDblClick: function (item, node, evt){
// },
onClick: function (item, node, evt){
resetEditor();
}
}, "treeThree");
});
</script>
</head>
<body class="claro">
<!-- BorderContainer -->
<div id="main" data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="liveSplitters:false, design:'headline',
style:'width:100%; height:100%; max-width:1050px; min-width:680px; min-height:400px; margin: 0 auto;'">
<!-- AccordionContainer-->
<div data-dojo-type="dijit.layout.AccordionContainer"
data-dojo-props="region:'leading', splitter:true, minSize:20" style="width: 630px;" id="leftAccordion">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'NG Tree Hierarchy'">
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Rootless Tree',
style:'width:30%; height:100%; max-width:1050px; min-width:250px; min-height:300px; margin: 0 auto; float:left'">
<div id="treeThree"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Rootless CCCCCC'">
<!-- Project selector -->
<div id=help"></div><br>
<br>
<!-- <select id="f_2"></select>-->
<br>
<div>
<table style="width: 135px; height: 83px;">
<tr><td>
<div id="ip"></div>
</tr><tr><td>
<button id="bd" data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="bd"
data-dojo-props="disabled: true,
onClick: function (evt){
store.deleteById(selectedItemId);
resetEditor();
},
label:'Delete project' ">
</button>
<button id="bs" data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="bs"
data-dojo-props="disabled: true,
onClick: function (evt){
var lvalue = dijit.byId('s1').value;
store.setValue(itemSelected, 'title', dijit.byId('s1').value);
store.setValue(itemSelected, 'description', dijit.byId('s2').value);
store.save();
},
label:'Save project' ">
</button>
<button id="ba"data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="ba"
data-dojo-props="disabled: true,
onClick: function (evt){
idCount = idCount +1;
var newItem = {};
newItem.id = idCount;
newItem.main = selectedItemId;
newItem.title = dijit.byId('s1').value;
newItem.description = dijit.byId('s2').value;
store.newItem(newItem);
sel.setStore(store,'',{query:{main: 0}});
/* mytree.update();*/
},
label:'Add project' ">
</button>
<br>
<button onclick="mytree.refreshModel()" style="visibility:hidden">
Update
</button>
</tr>
</table>
<br>
</div>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:''">
<div></div>
</div>
</div>
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
</div>
<!-- Top tabs (marked as "center" to take up the main part of the BorderContainer) -->
<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center', tabStrip:true" id="topTabs">
<div id="basicFormTab1" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab1', style:'padding:10px;display:none;'">
<p> </p>
</div>
<div id="basicFormTab2" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab2', style:'padding:10px;display:none;'">
<p> </p>
</div>
<div id="basicFormTab3" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab3', style:'padding:10px;display:none;'">
<p> </p>
</div>
</div>
</div>
</body>
</html>
解决方案
Try this one (tested on dojo 1.10):
require(["dojo/_base/connect", "dijit/dijit", "dojo/data/ItemFileReadStore", "dijit/Tree", "dijit/form/CheckBox",
"dojo/domReady!"],
function (connect, dijit, ItemFileReadStore, Tree, CheckBox) {
var store = new ItemFileReadStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
var treeControl = new Tree({
store: store,
showRoot: false,
_createTreeNode: function (args) {
var tnode = new Tree._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
var cb = new CheckBox();
cb.placeAt(tnode.labelNode, "first");
connect.connect(cb, "onChange", function () {
var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
connect.publish("/checkbox/clicked", [{
"checkbox": this,
"item": treeNode.item
}]);
});
return tnode;
}
}, "CheckboxTree");
connect.subscribe("/checkbox/clicked", function (message) {
console.log("you clicked:", store.getLabel(message.item));
});
}); // require
var rawdata = [{
label: 'Level 1',
id: '1',
children: [{
label: 'Level 1.1',
id: '1.1',
active: true
},
{
label: 'Level 1.2',
id: '1.2',
active: true
}]
},
{
label: 'Level 2',
id: '2',
children: [{
id: '2.1',
label: 'Level 2.1',
active: false
},
{
id: '2.2',
label: 'Level 2.2',
active: true
},
{
id: '2.3',
label: 'Level 2.3',
active: true
}]
}];
这篇关于如何将复选框放在树中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
