dojo中tree的使用教程(二)

接上篇。

经过四个小时的努力，终于把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不会显示，这是我的经验，浪费我快三个小时。原文链接：https://www.f2er.com/dojo/291031.html

dojo中tree的使用教程(二)

猜你在找的Dojo相关文章