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