ztree的自我认知

学习一门新的东西 重要是看api 和demo ztree是做树形结构比较好的一个jq插件 国内要用到树形结构的应该至少在一半以上都用的树结构！那么让我们简单的构建一个树形结构吧

首先 我们可以看一下demo 在index里面我们可以清晰的看到一句话

$.fn.zTree.init($("#myZtree"), setting，data); 这句话的以上就是初始化一棵树  同时data 我们也可以通过字面意思了解到是数据 这个数据对于我们学数据的一般是从后台获取的！！

这个时候就需要我们建后台数据库了！下面写下我自己写的三种简单的实现方式

第一种 查询 返回list数据！！！！！

z有时候我们查询出来的数据 是list集合 不想去做一个json的转换 这个时候我们要怎么做呢

首先 ：我们要异步加载  ztree为我们提供了异步加载的api 方法

async: {
                    enable: true, //
                    url: "/city",//请求的地址
                    autoParam: ["id"] // 返回后台的数据 Id
                }

因为 ztree默认是json构建的 所以我们要是想要ztree能直接翻译list数据 我们就需要把默认的json转换成list数据

ztree给我们提供了 simpleData 

simpleData  的官方解释为确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式

默认值：false   默认配置是这样的：

data: {     //simpleData 
                    simpleData: { 
                        enable: true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: 0
                    }
                }

这样的话 我们后台只要封装的是list集合 传递过来就可以构建数了

返回list 还有一种方法：不做主要介绍 把代码粘贴上来 给大家参考一下

       var setting = {
          
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
                radioType: "level"
            },
            data: {
                //不需要把list数据转换成json
                simpleData: {
                    enable: true
                }
            }, callback: {
                //用于捕获节点被展开的事件回调函数
                onExpand: zTreeOnExpand,
                onClick: function (e, treeId, treeNode, clickFlag) {
                    //勾选
                    $.fn.zTree.getZTreeObj("myZtree").checkNode(treeNode, !treeNode.checked, true);
                }
            }
        };

        //加载展开方法
        function zTreeOnExpand(event, treeId, treeNode) {
          //treeId 是mytree treeNode相当于对象 当前点击的对象
            var treeNodeId = treeNode.id; //就是数据库里的id
            
            $.post(
                '/city',
                {parentId: treeNodeId},
                function (data) {
                    //获取树对象
                    var tree = $.fn.zTree.getZTreeObj("myZtree");
                    //是否进行过异步加载  false表示需要异步加载 相当于去重
                    if (!treeNode.zAsync) { 
                        tree.addNodes(treeNode, data);
                        treeNode.zAsync = true;
                    } else { 
                        //强行异步加载
                        tree.reAsyncChildNodes(treeNode, "refresh");
                    }
                }
            );
        }

        //首次进入加载level为1的
        $(function () {
            $.post(
                '/city',
                function (data) {
                    $.fn.zTree.init($("#myZtree"), setting, data);

                }
            );
        });
第二种：后台传回数据是json

其实这一种跟第一种差不多 因为 是默认的json 所以我们只需要

async: {
                    enable: true, //
                    url: "/city",//请求的地址
                    autoParam: ["id"] // 返回后台的数据 Id
                } 这一个方法就可以了

同时我们也要把后台查询到的list数据 转换成json  现在我们做json的转换一般用三种方法

如果不知道的可以百度 推荐fastjson