接上篇。 经过四个小时的努力，终于把cbtree基本搞定。雏形也基本完成，这里把代码贴出来。 代码贴出来之前还是先来个图吧。 cbtree的基本使用： !DOCTYPE HTMLhtml head base href="%=basePath
接上篇。
经过四个小时的努力，终于把cbtree基本搞定。雏形也基本完成，这里把代码贴出来。
代码贴出来之前还是先来个图吧。
cbtree的基本使用：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'treeTest.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="js/dijit/themes/claro/claro.css">
<!-- cbtree需要的css文件 -->
<link rel="stylesheet" type="text/css" href="js/cbtree/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="claro">
<button type="button" id="treeBtn" data-dojo-type="dijit/form/Button">tree测试</button>
<div id="CheckboxTree"></div>
<form data-dojo-type="dijit/form/Form">
<div data-dojo-type="dijit/Dialog" class="selectDia" id="selectDia" title="终端划分">
<table>
<tr>
<td>
<fieldset>
<legend>未选中</legend>
<div class="leftTree" id="leftTree">
<div id="CheckboxTree1"></div>
</div>
</fieldset>
</td>
<td>
<button class="toRightBtn" id="toRightBtn" type="button" data-dojo-type="dijit/form/Button">--></button>
<br/>
<br/>
<button class="toLeftBtn" id="toLeftBtn"type="button" data-dojo-type="dijit/form/Button"><--</button>
</td>
<td>
<fieldset>
<legend>已选中</legend>
<div class="rightTree" id="rightTree">
<div id="CheckboxTree2"></div>
</div>
</fieldset>
</td>
</tr>
</table>
<div class="actionBar">
<button type="submit" data-dojo-type="dijit/form/Button">确定
</button>
<button type="button" id="cancelBtn" data-dojo-type="dijit/form/Button">取消</button>
</div>
</div>
</form>
<script type="text/javascript" src="js/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<script type="text/javascript">
require([
"dijit/registry",
"dojo/ready",
"dojo/store/Memory", // basic dojo/store
"cbtree/Tree", // Checkbox tree
"cbtree/model/TreeStoreModel"
], function(registry, ready, Memory, Tree, ObjectStoreModel){
ready(function(){
var data = [
{ id: "earth", name:"The earth", type:"planet", population: "6 billion"},
{ id: "AF", name:"Africa", type:"continent", population:"900 million", area: "30,221,532 sq km",
timezone: "-1 UTC to +4 UTC", parent: "earth"},
{ id: "EG", name:"Egypt", type:"country", parent: "AF" },
{ id: "KE", name:"Kenya", type:"country", parent: "AF" },
{ id: "Nairobi", name:"Nairobi", type:"city", parent: "KE" },
{ id: "Mombasa", name:"Mombasa", type:"city", parent: "KE" },
{ id: "SD", name:"Sudan", type:"country", parent: "AF" },
{ id: "Khartoum", name:"Khartoum", type:"city", parent: "SD" },
{ id: "AS", name:"Asia", type:"continent", parent: "earth" },
{ id: "CN", name:"China", type:"country", parent: "AS" },
{ id: "IN", name:"India", type:"country", parent: "AS" },
{ id: "RU", name:"Russia", type:"country", parent: "AS" },
{ id: "MN", name:"Mongolia", type:"country", parent: "AS" },
{ id: "OC", name:"Oceania", type:"continent", population:"21 million", parent: "earth"},
{ id: "AU", name:"Australia", type:"country", population:"21 million", parent: "OC"},
{ id: "EU", name:"Europe", type:"continent", parent: "earth" },
{ id: "DE", name:"Germany", type:"country", parent: "EU" },
{ id: "FR", name:"France", type:"country", parent: "EU" },
{ id: "ES", name:"Spain", type:"country", parent: "EU" },
{ id: "IT", name:"Italy", type:"country", parent: "EU" },
{ id: "NA", name:"North America", type:"continent", parent: "earth" },
{ id: "MX", name:"Mexico", type:"country", population:"108 million", area:"1,972,550 sq km",
parent: "NA" },
{ id: "Mexico City", name:"Mexico City", type:"city", population:"19 million", timezone:"-6 UTC", parent: "MX"},
{ id: "Guadalajara", name:"Guadalajara", type:"city", population:"4 million", timezone:"-6 UTC", parent: "MX" },
{ id: "CA", name:"Canada", type:"country", population:"33 million", area:"9,984,670 sq km", parent: "NA" },
{ id: "Ottawa", name:"Ottawa", type:"city", population:"0.9 million", timezone:"-5 UTC", parent: "CA"},
{ id: "Toronto", name:"Toronto", type:"city", population:"2.5 million", timezone:"-5 UTC", parent: "CA" },
{ id: "US", name:"United States of America", type:"country", parent: "NA" },
{ id: "SA", name:"South America", type:"continent", parent: "earth" },
{ id: "BR", name:"Brazil", type:"country", population:"186 million", parent: "SA" },
{ id: "AR", name:"Argentina", type:"country", population:"40 million", parent: "SA" }
];
var store = new Memory( { data: data });
var model = new ObjectStoreModel( { store: store,
query: {id: "earth"},
rootLabel: "The Earth",
checkedRoot: true
});
var tree = new Tree( { model: model, id:"tree00" }, "CheckboxTree" );
var tree1 = new Tree( { model: model, id:"tree01", style:{width:'230px', height:'350px'} }, "CheckboxTree1" );
var tree2 = new Tree( { model: model, id:"tree02", style:{width:'230px', height:'350px'} }, "CheckboxTree2" );
//tree.startup();
tree1.startup();
tree2.startup();
registry.byId("treeBtn").on("click", function(){
registry.byId("selectDia").show();
});
});
});
</script>
</body>
</html>
关键点：上图中的css一定要注意，cbtree需要引用它自带的css<link rel="stylesheet" type="text/css" href="js/cbtree/themes/claro/claro.css">，不引用的话可能checkbox不会显示，这是我的经验，浪费我快三个小时。