ZTree簡單應用

這段時間在持續解決老項目兼容性問題，通過了2天對左側導航菜單的改造後，對ZTree作個簡單總結，由於ZTree是很成熟的控件，提供了豐富的API和Demo，因此直接把項目中的代碼粘一下。

場景：替換現有的服務端控件，解決兼容性問題

js和css引用

  <link rel="stylesheet" href="../ztree/zTreeStyle/zTreeStyle.css" type="text/css" />
  <script type="text/javascript" src="../ztree/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="../ztree/js/jquery.ztree.core-3.5.js"></script>

 

js初始化，webform頁面直接輸出json格式的數據

<script type="text/javascript">
    var setting = {
        data: {
            simpleData: {
                enable: true } }, callback: { beforeClick: beforeClick, onClick: zTreeOnClick//註冊單擊節點觸發的方法  } }; var zNodes =<%= menuData%>; $(document).ready(function () { $.fn.zTree.init($("#leftTree"), setting, zNodes); }); //點擊節點 function zTreeOnClick(event, treeId, treeNode) { var urlname = treeNode.tId + "-" + treeNode.name; var urlvalue = "explore/" + treeNode.nodedata; urlvalue = "<iframe scrolling=\"auto\" frameborder=\"0\" width=\"100%\" height=\"100%\" src='" + urlvalue + "'></iframe>"; var n = parent.top.tab.getComponent(urlname); if (!n) { n = parent.top.tab.add({ 'id': urlname, 'title': treeNode.name, closable: true,  html: urlvalue }); } parent.top.tab.setActiveTab(n); }; function beforeClick(treeId, treeNode) { return !treeNode.isParent; } </script>

 

html代碼

 <ul id="leftTree" class="ztree"></ul>

 

webForm輸出頁面json數據

 public string menuData;
[{ id:'011', name:'n1.n1', isParent:true},{ id:'012', name:'n1.n2', isParent:false},{ id:'013', name:'n1.n3', isParent:true},{ id:'014', name:'n1.n4', isParent:false}]