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

最新推荐文章于 2025-06-28 12:51:07 发布

原创最新推荐文章于 2025-06-28 12:51:07 发布 · 752 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了zTree这一多功能jQuery树形插件的使用，包括其主要功能、兼容性、数据加载方式及核心js文件。通过示例展示了如何引入必要文件并从后台获取数据绑定到树形结构，强调了API和Demo学习的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在很多项目中，只要涉及到权限配置，基本都会涉及到树型结构，自己去写一个树形结构其实很浪费时间，虽然最后也能写出来，但是在有限的时间里，能够做更多的事情不是更好吗？所以，我就想说，现在网上有很多不错的插件，可以直接拿到项目中用的，比如就有了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;
}

以下是截图：

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