ztree树形权限菜单实现

 

ztree网址： http://www.treejs.cn/v3/demo.php#_101

首先引入相关插件，大家可以用min.js版本（可以理解为普通js文件压缩版），这个网上都有大家自行百度下。

这里简单说下几个要点 1. 树形菜单设置 2.菜单加载 3. 菜单编辑回显 

1. 树形菜单常用的就是简单树形菜单、可选树形菜单这两种，以下是其设置，更多丰富设置详看ztree api文档

  /***************************简单树形菜单***************************/
        var settingV2 = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: zTreeOnClick2
            }
        };

        /***************************复选框树形菜单***************************/
        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",
                //勾选 checkbox 对于父子节点的关联关系
                chkboxType: {
                    "Y": "ps",
                    "N": "ps"
                }
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: onCheck, // 点击属性菜单复选框回调函数
                onClick: zTreeOnClick
            }
        };

2.  新建保存页面数据加载相关js代码

        //弹出新增角色模态框
        function openInsertModal() {
            //重置相关控件数据
            clearData();
            $('#name').removeAttr("readonly");
            $('#checkBoxTh').show();
            $('#saveRole').show();
            $('#saveRole').val('1');
            $('#myModal').modal('show');
            $('#myModalLabel').text('新增角色')
            $.ajax({
                url: '/saas/menu/listLevel',
                type: 'POST',
                beforeSend: function () {
                    $("#loadingDiv").show();
                },
                success: function (data) {
                    // 系统菜单
                    var treeObj = $.fn.zTree.init($("#roleTree"), setting, data.data);
                    // treeObj.expandAll(true);//设置默认全部展开
                },
                complete: function () {
                    $("#loadingDiv").hide();
                }
            });
        }

var treeObj = $.fn.zTree.init($("#roleTree"), setting, data.data);

这里的setting是树形菜单设置， roleTree就是ztree控件的id，后台返回的数据（data.data）都会显示在ul里。

  <ul id="roleTree" class="ztree" >  </ul>

3. 编辑回显数据

  //弹出角色详情模态框
        function openDetailModal(id) {
            clearData()
            $('#name').removeAttr("readonly");
            $('#name').attr("readonly", "readonly");
            $('#checkBoxTh').hide();
            $('#saveRole').hide();
            $('#myModal').modal('show');
            $('#myModalLabel').text('查询角色');
            var treeNodeData;
            //按顺序加载
            new Promise(
                    function (resolve, reject) {
                        $.post("/saas/role/getById", {id: id},
                                function (data) {
                                    $('#roleId').val(data.data.id);
                                    $('#name').val(data.data.name);
                                    treeNodeData = data.data.roleMenuList;
                                    resolve(true);
                                }, 'json');
                    }).then((resolve) = > {
                $.ajax({
                url: '/saas/menu/listLevel',
                type: 'post',
                dataType: 'json',
                beforeSend: function () {
                    $("#loadingDiv").show();
                },
                success: function (result) {
                    // 系统菜单
                    var selectedArr = getArr(treeNodeData);
                    //当角色关联的菜单数据长度大于0时,遍历角色关联的菜单数据
                    var originData = result.data;
                    var resultData = new Array();
                    echoData(originData, resultData, selectedArr);
                    var treeObj = $.fn.zTree.init($("#roleTree"), settingV2, resultData);
                },
                complete: function () {
                    $("#loadingDiv").hide();
                }
            });
        })
        }

function getArr(treeNodeData) {
            var arr = new Array();
            for (var i = 0; i < treeNodeData.length; i++) {
                arr.push(treeNodeData[i].menuId);
            }
            return arr;
        }

 

其中 echoData(originData, resultData, selectedArr); 是利用递归方式来组装数据的 ，

selectedArr 某个角色拥有的权限菜单数据  originData 是返回所有权限菜单数据   resultData 自定义返回默认选中数据

   //递归回显
        function echoData(originData, resultData, selectedArr) {
            for (var i = 0; i < originData.length; i++) {
                var current = originData[i];
                var children = current.children;
                if ($.inArray(current.id, selectedArr) != -1) {
                    var obj = {
                        "name": current.name,
                        "id": current.id,
                        "url": current.url
                    }
                    var childrenArr = new Array();

                    echoData(children, childrenArr, selectedArr);

                    obj.children = childrenArr;

                    resultData.push(obj);
                }
            }
        }

 

切记，数据格式一定要和后台定义的数据格式一致

全选/取消全选

      function checkedBoxAll() {
            if ($('#checkBoxAll').is(':checked')) {
                $('input[name="cbCheckBox"]').prop('checked', true);//全选
            } else {
                $('input[name="cbCheckBox"]').prop('checked', false);//取消全选
            }
        }

子复选框反选控制代码

$("body").on('click', 'input[name="cbCheckBox"]', function () {
                //全选
                if ($('input[name="cbCheckBox"]').not(':checked').length == 0) {
                    $('#checkBoxAll').prop('checked', true);
                } else {
                    //部分选中
                    $('#checkBoxAll').prop('checked', false);
                }
            });

oncheck函数也提供下

 function onCheck(e, treeId, treeNode) {
            //清空list里的数据
            roleMenuArr.splice(0, roleMenuArr.length);
            var treeObj1 = $.fn.zTree.getZTreeObj("roleTree");// 参数为目标ul的id
            var nodes1 = treeObj1.getCheckedNodes(true);//  获取选中的节点集合
            var v1 = "";
            // 将选中的系统菜单加载到右边
            var target_table1 = $(".systemTable");//要加载的table的位置
            //下面的for循环根据自己需要修改
            var flag = false;
            for (var i = 0; i < nodes1.length; i++) {
                var object = {};//创建对象
                object.menuId = nodes1[i].id;
                var checkStatus = nodes1[i].getCheckStatus().half;
                //1.未选中 2.半选  3.全选
                if (checkStatus) {//半勾选
                    object.isCheck = 2
                } else {//全选
                    object.isCheck = 3
                }
                // 一级菜单加粗
                if (nodes1[i].getParentNode() == null) {
                    v1 += '<tr><td class="rightTd" id="' + nodes1[i].id + '" ><b>' + nodes1[i].name + '</b></td></tr>';
                    flag = true;
                } else {
                    v1 += '<tr><td class="rightTd" id="' + nodes1[i].id + '" >' + nodes1[i].name + '</td></tr>';
                    flag = true;
                }
                roleMenuArr.push(object);
            }
            target_table1.html(v1);
            //按顺序加载
            new Promise(
                    function (resolve, reject) {
                        //点击左侧ztree复选框时，查询相关权限菜单
                        getById(treeNode.id, resolve, true);
                        // 一段耗时的异步操作
                        // resolve('成功') // 数据处理完成
                        // reject('失败') // 数据处理出错
                    }).then((resolve) = > {
                //根据ztree节点选中/取消选中 动态勾选右侧多选框列表
                if(flag) {
                    $('#checkBoxAll').prop('checked', true);
                    $('input[name="cbCheckBox"]').prop('checked', true);
                }else{
                    $('#checkBoxAll'
        ).
            prop('checked', false);
            $('input[name="cbCheckBox"]').prop('checked', false);
        }
        })
            ;
        }

先简单写下有不懂的地方，可以问我。