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}]