dojo中tree的使用教程(二)
发布时间：2020-12-16 21:23:03 所属栏目：百科 来源：网络整理
导读：接上篇。 经过四个小时的努力，终于把cbtree基本搞定。雏形也基本完成，这里把代码贴出来。 代码贴出来之前还是先来个图吧。 cbtree的基本使用： !DOCTYPE HTMLhtml head base href="%=basePath%" titleMy JSP 'treeTest.jsp' starting page/titlelink rel="
|
接上篇。 经过四个小时的努力，终于把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",{ id: "Nairobi",name:"Nairobi",type:"city",parent: "KE" },{ id: "Mombasa",name:"Mombasa",{ id: "SD",name:"Sudan",{ id: "Khartoum",name:"Khartoum",parent: "SD" },{ id: "AS",name:"Asia",parent: "earth" },{ id: "CN",name:"China",parent: "AS" },{ id: "IN",name:"India",{ id: "RU",name:"Russia",{ id: "MN",name:"Mongolia",{ id: "OC",name:"Oceania",population:"21 million",{ id: "AU",name:"Australia",parent: "OC"},{ id: "EU",name:"Europe",{ id: "DE",name:"Germany",parent: "EU" },{ id: "FR",name:"France",{ id: "ES",name:"Spain",{ id: "IT",name:"Italy",{ id: "NA",name:"North America",{ id: "MX",name:"Mexico",population:"108 million",area:"1,972,550 sq km",parent: "NA" },{ id: "Mexico City",name:"Mexico City",population:"19 million",timezone:"-6 UTC",parent: "MX"},{ id: "Guadalajara",name:"Guadalajara",population:"4 million",parent: "MX" },{ id: "CA",name:"Canada",population:"33 million",area:"9,984,670 sq km",{ id: "Ottawa",name:"Ottawa",population:"0.9 million",timezone:"-5 UTC",parent: "CA"},{ id: "Toronto",name:"Toronto",population:"2.5 million",parent: "CA" },{ id: "US",name:"United States of America",{ id: "SA",name:"South America",{ id: "BR",name:"Brazil",population:"186 million",parent: "SA" },{ id: "AR",name:"Argentina",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","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不会显示，这是我的经验，浪费我快三个小时。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |