zTree的功能解析

时间:2024-03-24 20:07:00
zTree ,一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。兼容 IE、FireFox、Chrome 等浏览器,在一个页面内可同时生成多个 Tree 实例、支持 JSON 数据、支持一次性静态生成 和 Ajax 异步加载 两种方式、支持多种事件响应及反馈、支持 Tree 的节点移动、编辑、删除、支持任意更换皮肤 / 个性化图标(依靠css)、支持极其灵活的 checkbox 或 radio 选择功能、简单的参数配置实现 灵活多变的功能等特点。

 

1、  zTree的核心是zTree(setting, [zTreeNodes])两个属性,这个函数接受一个JSON格式的数据对象setting和一个JSON格式数据的zTreeNodes从而来构建ztree。

2、  setting : zTree 的参数配置都在这里完成,简单的说:树的样式、事件、访问路径等都在这里配置,setting参数数量较多,具体可参考zTree的API,例如:

var setting = {  

    showLine: true,  

    checkable: true  

};

3、  zTreeNodes:是ztree的全部节点数据结合,采用由JSON对象组成的数据结构;zTreeNodes的格式分为两种:利用Json格式嵌套体现父子关系和Array简单格式。

带有父子关系的标准zTreeNodes如下:

var zTreeNodes = [  

    {"id":1, "name":"test1", "nodes":[  

      {"id":11, "name":"test11", "nodes":[  

        {"id":111, "name":"test111"}  

      ]},  

      {"id":12, "name":"test12"}  

    ]},  

    ......  

];

带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例:

var treeNodes = [                                                                        

    {"id":1, "pId":0, "name":"test1"},  

    {"id":11, "pId":1, "name":"test11"},  

    {"id":12, "pId":1, "name":"test12"},  

    {"id":111, "pId":11, "name":"test111"},  

    ......  

]; 

1.1.1          页面构建方式

1、下面详细展示平台中开发所使用的zTree的构建结构以及步骤:

①    页面引用zTree的js和css: 平台中的css,js统一引入公共方法

②    在页面定义zTree盛放容器:

<div flex="20">

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

</div>

③    在进入页面时初始化树形数据

    $(function() { 

             zTree = $("#modulTree").zTree(setting, treeNodes); 

     }); 

④    在script脚本中定义setting和zTreeNodes:

var treeNodeData = '';   

var setting = {};

       $(function(){

                setting = {

                         data: {

                                   simpleData: {

                                    enable: true

                                   }

                          },

                          callback: {

                                    onClick:moduleClick

                   }

                 };

                 

                 var zTreeNodes = $!{moduleTreeData.encodeJson};

               

                $.fn.zTree.init($("#moduleTree"), setting, zTreeNodes)

1.1.2          后台数据的构建:

 zTree的功能解析

zTree的功能解析

数据构建如上图所示,将数据结果加入到zTreeNodes中树形结构数据就封装完成,效果图如下

zTree的功能解析

 

1.1.3          树形列表与jqgrid表格的应用

开发过程中,需要根据左边树形结构列表的数据去查询数据或者其他具体操作,页面结构如下图展示根据左边节点数据查询数据,页面构建方法如下:

zTree的功能解析

<div flex="20">

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

                  </div>

 

                          <!-- 列表 -->

                   <div flex="80">

                            <div class="panel-group cus-collapse box-shadow" id="accordion">

                                            <div class="panel panel-default">

<div class="cus-grid" id="grid-wrap">

                                    <table id="jqGrid"></table>

                                    <div id="jqGridPager"></div>

                            </div>

                   </div>

          </div>

         </div>

通过在zTree的setting中定义回掉函数 来调用zTree的onClick方法,如下图展示

zTree的功能解析

zTree的功能解析

 

这些是我在开发过程中zTree的应用,具体的参数以及内容大家可疑参考http://www.ztree.me/v3/main.php