当前位置 : 主页 > 网页制作 > Dojo >

dojo中tree的使用教程(一)

来源:互联网 收集:自由互联 发布时间:2021-06-15
已经基本了解了dojo中tree的使用,现在做一些比较经典的应用。 先截个图,展示一下总体的目标: 大致就是左边是一棵树,右边是一棵树,然后用户可以方便的选择。 好了,现在分步

已经基本了解了dojo中tree的使用,现在做一些比较经典的应用。

先截个图,展示一下总体的目标:

大致就是左边是一棵树,右边是一棵树,然后用户可以方便的选择。

好了,现在分步来实现,先是这个框架,代码:

<!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">
	<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>
 
     <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>
		    			</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>
		    			</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:false"></script>
    <script type="text/javascript">
    	require([
    	         "dojo/parser",
    	         "dijit/registry",
    	         "dojo/on",
    	         "dijit/form/Button",
    	         "dijit/Tree",
    	         "dojo/domReady!"
    	         ], function(parser, registry, on, Button, Tree){
    			parser.parse().then(function(){
    				registry.byId("treeBtn").on("click", function(){
						registry.byId("selectDia").show();					
    				});
    				
    				registry.byId("cancelBtn").on("click", function(){
    					registry.byId("selectDia").hide();
    				});
    				
    			});
    	});
    </script>
    
  </body>
</html>

css代码:

保存为main.css

html,body{
	margin:0 0;
	padding:0 0;
}
.leftTree{
	width:230px;
	height:350px;
	border:1px solid #d3d3d3; 
}
.rightTree{
	width:230px;
	height:350px;
	border:1px solid #d3d3d3; 
}
.actionBar{
	text-align: right;
	background-color: #efefef;
	border-top: 1px solid #d3d3d3;
    margin: 10px -8px -10px;
    padding: 3px 10px 3px 7px;
}

.clear{
	clear: both;
}
到此,框架已经搭起来了,下面将开始重头戏,cbtree,第三方扩展dojo的tree,使其带有checkbox,这样就方便多了,下回分解。
网友评论