dojo中tree的使用教程(一)

来源：互联网发布：淘宝开店需要押金吗编辑：程序博客网时间：2024/06/06 01:09

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

0 0