dojo中tree的使用教程(一)

最新推荐文章于 2015-06-04 15:56:55 发布

yipanbo

最新推荐文章于 2015-06-04 15:56:55 发布

阅读量3k

点赞数

分类专栏： dojo

本文链接：https://blog.csdn.net/yipanbo/article/details/46349123

版权

dojo 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

已经基本了解了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，这样就方便多了，下回分解。

yipanbo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dojo中tree的使用教程(一)

已经基本了解了dojo中tree的使用，现在做一些比较经典的应用。先截个图，展示一下总体的目标：大致就是左边是一棵树，右边是一棵树，然后用户可以方便的选择。好了，现在分步来实现，先是这个框架,代码： "> My JSP 'treeTest.jsp' starting page tree测试
复制链接

扫一扫