Jquery的树插件ZTree的使用

最新推荐文章于 2022-03-10 14:38:07 发布

原创最新推荐文章于 2022-03-10 14:38:07 发布 · 477 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍如何利用JQuery插件ZTree进行权限管理系统的构建，包括设置配置、树的加载与回显、节点操作及表单提交等功能，提供全选、反选等实用功能，适合用于角色权限分配场景。

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

公司做课题用到了Jquery的树插件Ztree，记录一下所用到的，更具体的可以查看ZTree的API文档。

setting配置

var setting = {
        view: {
            showLine: true,//显示节点之间的连线。
            selectedMulti: false  //允许同时选中多个节点。
        },
        check: {
            enable: true					//开启复选框
        },
        data: {
            key: {
                name: "modelName"		//显示的节点信息对应的字段
            },
          simpleData: {
                enable: true,
                idKey: "id",						//id字段必须存在，指定id对应的字段
                pIdKey: "pid",					//pId字段必须存在，ZTree默认值为pId
                rootPId: ""
            }
        },
        callback: {
            onCheck: zTreeOnCheck				//复选框点击之后的回调函数
        }
    };

加载树和树的回显

$(document).ready(function () {
        //加载权限数据树显示
        $.ajax({
            type: "POST",
            url: "/resource/data",
            datatype: "json",
            success: function (data) {                       //data就是返回的json类型的数据
                $.fn.zTree.init($("#treeDemo"), setting, data);         //加载权限树
                //在权限树加载后，回显角色已拥有的权限
                $.ajax({
                    async: false,
                    cache: false,
                    type: 'POST',
                    url: '/resource/findResourceIdListByRoleId?roleId=' +${roleId},
                    error: function () {
                        alert('请求失败');
                    },
                    success: function (data) {
                        //alert("请求成功!");
                        var ids = data;
                        if (ids != "" && ids != null) {
                            for (var i = 0; i < ids.length; i++) {
                                zTree = $.fn.zTree.getZTreeObj("treeDemo");
                                //根据返回的资源id列表回显节点选中状态
                                zTree.checkNode(zTree.getNodeByParam("id", ids[i]), true);
                            }
                        }
                    }
                });
            },
            error: function (data) {
                //删除失败提示
                layer.msg("加载失败!");
            }
        });
    });

全选，全不选，和获取选中节点

//全选
    function checkAll() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.checkAllNodes(true);
        var nodes = treeObj.getCheckedNodes(true);
        var ids = [];
        for (var i = 0; i < nodes.length; i++) {
            ids.push(nodes[i].id)
        }
        $('#resourceIds').val(ids);
    }

    //反选
    function uncheckAll() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.checkAllNodes(false);
    }

    //获取所有选中节点的值
    function zTreeOnCheck() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes(true);
        var ids = [];
        for (var i = 0; i < nodes.length; i++) {
            ids.push(nodes[i].id)
        }
        $('#resourceIds').val(ids);
    }

html代码

<div style="width: 600px">
    <div style="width: 270px; float: left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div style="width: 200px;float: left">
        <br/> <br/>
        <button class="layui-btn layui-btn-xs" onclick="checkAll();">全选</button>
        <br/> <br/>
        <button class="layui-btn layui-btn-danger layui-btn-xs" 
        		onclick="uncheckAll()">取消</button>
    </div>
</div>

<form class="layui-form" id="roleGrant">
    <input name="id" type="hidden" value="${roleId}" readonly="readonly">
    <input type="hidden" id="resourceIds" name="resourceIds" value=""/>
    <!--    底部按钮事件-->
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
        <button class="layui-btn" onclick="clos()">关闭</button>
    </div>
</form>

表单提交

layui.use('form', function () {
        var form = layui.form;
		//表单提交，添加数据到数据库
        form.on('submit(formDemo)', function (data) {
            var data = data.field;				//获取表单对应name和value
            $.ajax({
                type: "POST",                                    //请求类型
                url: "/resource/addResource",                               //URL
                data: data,                                    //传递的参数
                dataType: "json",                               //返回的数据类型
                success: function (data) {                       
                    layer.msg("添加成功!");
                    clos();             //关闭打开的弹出框
                },
                error: function (data) {
                    layer.msg("添加失败!");
                }
            });
            return false;       //阻止表单默认提交，一定要写
        });


    });

	//关闭弹出层
    function clos() {
        //弹出框关闭之前刷新父层页面
        parent.location.reload();
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }