树形图数据加载

开发工具与关键技术：VS、树形图数据加载

作者：陆桂超

撰写时间：2019年9月16日

为了更直观地展示数据之间的层级关系，我们往往会用到树形图。树形图涉及到的一个重要的知识点是递归，数据库表的设计与其他的表不同，差别在于树形图的表中除了主键id，还有一个父id的概念。这个父id正是设计树形图表的重点。

1、 数据库递归表的设计。AccessoriesClassID为主键id，PW_AccessoriesClassID为父id。

2、在使用树形图之前，我们要用到树形图插件，所以一定要引进树形图的js和css脚本文件。

3、配置好树形图的基本参数。

//树形图的参数
        var setting = {
            //节点分支
            data: {
                simpleData: {
                    enable: true//节点分支
                }
            },
            callback: {
                onClick: zTreeOnClick,
               },
     };

4、通过控制器查询递归表，赋值数据给树形图。(控制器代码为单表查询)

$.post("/EssentialData/PJDaLei/selectAccessor", function (data) {
            console.log(data);
            if (data != null) {
                for (var i in data) {
                    var Accessor = {};//申明树形图的子节点
                    Accessor.id =
data[i].AccessoriesClassID; //赋值树形图的子节点的ID
                    Accessor.pId =
data[i].PW_AccessoriesClassID;//赋值树形图的子节点的父ID
                    if
(data[i].AccessoriesClassNuber != null) {
                       Accessor.name =
$.trim(data[i].AccessoriesClassNuber) + "[" + $.trim(data[i].AccessoriesClassName)
+ "]";
                       Accessor.id =
data[i].AccessoriesClassID;
                    }
                    else {
                        Accessor.name =
$.trim(data[i].AccessoriesClassName)
                        Accessor.id =
data[i].AccessoriesClassID;
                    }
                    if
(data[i].PW_AccessoriesClassID == null || data[i].PW_AccessoriesClassID == 0) {
                        Accessor.pId = 0
                    }
                    Accessor.open = true;//页面刷新时是否打开子节点
                    zNodes.push(Accessor);//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
向申明的树形图中添加子节点
                    }
                $(document).ready(function () {
                    //fnjquery方法  //zTree树形图插件方法 /init树形图插件方法
                    $.fn.zTree.init($("#ztree"), setting, zNodes);
                });
                }
        });