带有复选框的Dojo树未显示
[英]Dojo tree with checkbox not displaying
问题描述
这真让我抓狂。 树根本不显示。 这是代码
<html>
<head>
<meta charset="utf-8">
<title>The CheckBox Tree with multi-parented Eventable Store</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="dojo/dojo/dojo.js"></script>
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" type="text/css"/>
<link rel="stylesheet" href="cbtree/themes/claro/claro.css" type="text/css"/>
<script> dojoConfig = {async: true, parseOnLoad: true};</script>
<script>
var myData = [
{ name:"Family" , type:"root" },
{ name:"Abe" , type:"parent", parent:["root"] , hair:"Brown" },
{ name:"Jacqueline", type:"parent", parent:["root"] , hair:"Brown" },
{ name:"Homer" , type:"parent", parent:["Abe"] , hair:"none" },
{ name:"Marge" , type:"parent", parent:["Jacqueline"] , hair:"blue" },
{ name:"Bart" , type:"child" , parent:["Homer","Marge"], hair:"blond" },
{ name:"Lisa" , type:"child" , parent:["Homer","Marge"], hair:"blond" },
{ name:"Maggie" , type:"child" , parent:["Homer","Marge"], hair:"blond" }
];
required(["cbtree/store/Hierarchy",
"cbtree/model/TreeStoreModel",
"cbtree/Tree",
"dojo/dojo/ready"
], function (Hierarchy, TreeStoreModel, Tree) {
// Create the store and load it with our data set.
var myStore = new Hierarchy( { data:myData } );
var myModel = new TreeStoreModel({ store:myStore, query:{type:"root"} });
var myTree = new Tree( { model:myModel }, "CheckBoxTree" );
myTree.startup();
});
</script>
</head>
<body class="claro">
<h1 class="DemoTitle">The CheckBox Tree with Multi State CheckBoxes</h1>
<div id="CheckBoxTree" style="width:300px; height:300px; border-style:solid; border-width:medium;">
</div>
</body>
</html>
有人有任何线索吗？ 进口都很好。 我在根目录中有这样的文件夹：
道场/道场
道场/的dijit
cbtree /
谢谢
2 个解决方案
解决方案1
1 2013-09-24 15:49:41
您require ing dojo/dojo/ready ，但是您没有使用它。 我认为您需要将树的创建包装在ready(function(){...})或者使用dojo / domReady！ 插件等待dom准备就绪，然后再与之交互。 注意使用的require ，而不是required和列入ready在require在第一个例子中的回调。
道场/就绪
require(["cbtree/store/Hierarchy",
"cbtree/model/TreeStoreModel",
"cbtree/Tree",
"dojo/dojo/ready"
], function (Hierarchy, TreeStoreModel, Tree, ready) {
ready(function() {
// Create the store and load it with our data set.
var myStore = new Hierarchy( { data:myData } );
var myModel = new TreeStoreModel({ store:myStore, query:{type:"root"} });
var myTree = new Tree( { model:myModel }, "CheckBoxTree" );
myTree.startup();
}
});
道场/ domready中！
require(["cbtree/store/Hierarchy",
"cbtree/model/TreeStoreModel",
"cbtree/Tree",
"dojo/dojo/domReady!"
], function (Hierarchy, TreeStoreModel, Tree) {
// Create the store and load it with our data set.
var myStore = new Hierarchy( { data:myData } );
var myModel = new TreeStoreModel({ store:myStore, query:{type:"root"} });
var myTree = new Tree( { model:myModel }, "CheckBoxTree" );
myTree.startup();
});
解决方案2
0 2015-05-04 23:16:28
试试这个（在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
}]
}];
带selectitem的richface树（复选框）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.