zTree树形插件的入门学习总结

在很多项目中，只要涉及到权限配置，基本都会涉及到树型结构，自己去写一个树形结构其实很浪费时间，虽然最后也能写出来，但是在有限的时间里，能够做更多的事情不是更好吗？所以，我就想说，现在网上有很多不错的插件，可以直接拿到项目中用的，比如就有了zTree树形插件，这个插件的功能还是蛮强大的，所以总结和记录一下，以便以后遇到类似的问题再上网收罗半天，浪费宝贵的时间。好了，废话少说，进入正题。

zTree的官方网址是http://www.treejs.cn/v3/main.php#_zTreeInfo；

zTree的介绍简单来说就是依靠jQuery实现的多功能的一个树形插件，优异的性能、灵活的配置和多种功能的组合，是不是很棒，最主要的是，这是开源的免费的软件，如果你想看源代码怎么写的，完全可以下载下来，研究别人是怎么实现的。

基本兼容主流浏览器，Json数据，Ajax异步加载节点，check,radio，自定义图标、事件响应等功能。

要学习一个新的插件，最需要的是看API，因为真的很有用，还有就是下载Demo，调试一下就知道啦。

下面真正进入代码环节，首先，zTree最主要的三个js文件分别为jquery.ztree.core-3.x.js,jquery.ztree.echeck-3.x.js,jquery.ztree.exedit-3.x.js。此外，我们还需要引用样式文件zTreeStyle1.css，同时，里面的一个文件夹img也是不可忽略的（因为我最开始没有引入到zTree的包下，出来的树形图是没有图标也没有线条，这个问题当时我还怀疑是不是不兼容浏览器呢，反正后面还是弄了好久）最核心的是jquery.ztree.core-3.x.js，提供最基本的树形结构，当然，如果你还需要使用到复选框功能的话，就需要jquery.ztree.echeck-3.x.js这个文件，这个文件专门提供复选框功能的相关操作，如何你需要编辑树形结构里面的节点，则加入第三个Js文件就可以啦。反正我的项目是没有用到的。

首先，需要引入的文件是以下四个，基本的jquery文件是不能少的。

    <link rel="stylesheet" href="css/Ztree/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/Ztree/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="js/Ztree/jquery.ztree.excheck.min.js"></script>

设置一个放树形结构的地方，即一个div。

<div>
  <ul style="text-align: center;" id="menu_tree" class="ztree"></ul>
</div>

下面就是从后台读取数据绑定到menu-tree这棵树上。

<script type="text/javascript">
var zTree;
 var setting = {
        view: {
            dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
            showLine: true,//是否显示节点之间的连线      selectedMulti: false//设置是否允许同时选中多个节点
        },
        check:{
            chkboxType: { "Y": "ps", "N": "ps" },
            chkStyle: "checkbox",//复选框类型
            enable: true //每个节点上是否显示 CheckBox
        },
        data: {
            simpleData: {//简单数据模式
                enable:true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: ""
            }
        },
        callback: {
        }
    };
$.ajax({
        type: "post",
        url: urlFont+"/Role/getMenu.do",
        data: {
            id:id
        },
        dataType: 'json',
        success: function (datajson) {
            var treeObj = $.fn.zTree.init($("#menu_tree"), setting, datajson.Menu);
            for(var i =0;i<datajson.Menu.length;i++)
            {
                for(var j=0;j<datajson.RoleMenu.length;j++)
                {
                    if(datajson.Menu[i].id==datajson.RoleMenu[j].menuId)   //判断该角色是否拥有这个这个页面
                    {
                        var node = treeObj.getNodeByParam("id", datajson.Menu[i].id, null);
                        treeObj.checkNode(node);
                    }
                }
            }
        },
        error: function () {
            alert("出现错误");
        }
    });
</script>

获取树形结构上的数据怎么获取呢？

function getCheckNode() {
    var result='';
    var treeObj = $.fn.zTree.getZTreeObj("menu_tree");
    var nodes = treeObj.getCheckedNodes(true);
    for (var i = 0; i < nodes.length; i++) {
        var halfCheck = nodes[i].getCheckStatus();
        if (!halfCheck.half){
            result += nodes[i].id + ',';  //返回一串数字
        }
    }
    return result;
}

以下是截图：

站在前人的肩膀上，才能看到更远，我也参照了网上的一些内容，谢谢他们的有的思路让我茅塞顿开，好了，今天就到这里啦。有要交流讨论的，欢迎私信我哦~