ztree--树形图的使用方法

开发工具与关键技术：VS/MVC
作者：何桂朋
撰写时间：2019年6月26日
ztree–树形图是jQuery插件库的一个插件，可以用来做权限树形图、菜单树形图。把每个部分分析清晰。给使用者更方便。
jQuery插件库：http://www.jq22.com

如图：权限树形图

第一步：先加载依赖js和css文件：

<script src="~/Plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script src="~/Plugins/ztree/js/jquery.ztree.core.js"></script><!--zTree核心包-->
<script src="~/Plugins/ztree/js/jquery.ztree.excheck.js"></script><!--复选框功能包-->
<script src="~/Plugins/ztree/js/jquery.ztree.exedit.js"></script><!--编辑功能包-->

第二步、页面上加入树标签：

第三步、写js代码初始化树即可：

var SetTing = {
            view: {
                addHoverDom: false,
                removeHoverDom: false,
                selectedMulti: false
            },
            //开启多选框
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            //开启修改功能
            edit: {
                enable: true
            }
        };

上面的是设置树形图的基本属性。比如“check”是开启多选框，“edit”是开启修改功能。
然后输入一些基本数据：

var zNodes = [
            { id: 1, pId: 0, name: "第一个节点", open: true },
            { id: 101, pId: 1, name: "一次性加载大数据量" },
            { id: 102, pId: 1, name: "分批异步加载大数据量" },
            { id: 103, pId: 1, name: "分批异步加载大数据量" },
            { id: 104, pId: 1, name: "最简单的树" },
            { id: 2, pId: 0, name: "第二个节点", open: false },
            { id: 201, pId: 2, name: "拖拽 节点 基本控制" },
            { id: 202, pId: 2, name: "拖拽 节点 高级控制" },
            { id: 204, pId: 2, name: "基本 增 / 删 / 改 节点" },
            { id: 205, pId: 2, name: "高级 增 / 删 / 改 节点" },
            { id: 207, pId: 2, name: "异步加载 & 编辑功能 共存" },
            { id: 208, pId: 2, name: "多棵树之间 的 数据交互" },
        ];
$(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), SetTing, zNodes);
});

注意：用节点上的“id”，绑定分支“pId”。
动态数据：

function myfunction() {
       var zNodes = [];
       var zNodesbtn = "";
       $.get("SelectModularAndDetail", function (data) {
           for (var j = 0; j < data.length; j++) {
            zNodesbtn ={ id: data[j].ModularID , pId: 0, name:  
data[j].ModularName , open: true };
            zNodes.push(zNodesbtn);
                var ModularDetailVos = data[j].ModularDetailVos;
                    if (ModularDetailVos != null && ModularDetailVos != "") {
                        for (var i = 0; i < ModularDetailVos.length; i++) {
                            zNodesbtn = { id:  ModularDetailVos[i].ModularDetailID ,
 pId: data[j].ModularID , name:  ModularDetailVos[i].Special };
                          zNodes.push(zNodesbtn);
                        }
                    }
                }
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
          });
 }