ZTree的全选反选全不选取消清空

阳光穿透心脏的1/2处 2021-12-15 06:03 578阅读 0赞

## 全选 ##

//全选
                $('#c_all').on('click',function (e) {
                    var zTree = $.fn.zTree.getZTreeObj("treeMenu");//得到tree对象 treeMenu是我的treeid
                    var node = zTree.getNodes();//得到全部节点
                    var nodes = zTree.transformToArray(node);//全部节点转换成数组array
                    var checkNode = zTree.getCheckedNodes().length;//得到被选中的节点数量,zTree.getCheckedNodes()和zTree.getCheckedNodes(true)一样,可以传参(true/false),默认是true
    
                    if (checkNode < nodes.length) {//已选中的节点数小于总数 - 全选
                        $('#all').prop('checked', true)
                        zTree.checkAllNodes(true);//给全部节点设置为true
                    } else{
                        zTree.checkAllNodes(false);//给全部节点设置为false
                    }
                });

## 反选 ##

//反选
    		$("#f_all").click(function (e) {
                    var zTree = $.fn.zTree.getZTreeObj("treeMenu"); //ztree对象
    
                    var checked = zTree.getCheckedNodes(true);//得到选中的节点
                    var checkeds = zTree.transformToArray(checked); //转变为数组
                    var checkNode = zTree.getCheckedNodes(true).length;//选中的节点数量
    
                    var node = zTree.getNodes();//全部节点
                    var nodes = zTree.transformToArray(node);//全部节点数量
    
                    if(checkNode< nodes.length){//已选中的节点数小于总数 - 全选
    
                        zTree.checkAllNodes(true);//给所有的都设置为true
    
                        $.each(checkeds, function(index,node) {//之前选中的节点为false
                            zTree.checkNode(node, false, false);
                        });
    
                    }else{
                        zTree.checkAllNodes(false);//否则所有的都设置为false
                    }
    
                });

## 全不选 取消 清空 ##

//清空
    $('#r_all').on('click',function (e) {
                    var zTree = $.fn.zTree.getZTreeObj("treeMenu");//ztree对象
                    zTree.checkAllNodes(false);//设置全部为false,不选中节点
                });

## 渲染tree+提交tree(layer的弹窗) ##

layer.open({
                    type: 1,
                    title: '菜单管理',
                    area: ['600px', '470px'],
                    offset: '50px',
                    content: '<div style="text-align:center;margin-top:10px">' +
                                '<button  type="button" class="layui-btn layui-btn-primary layui-btn layui-btn-sm" id="c_all" lay-filter="c_all" >全选</button> '+
                                '<button  type="button" class="layui-btn layui-btn-primary layui-btn layui-btn-sm" id="f_all" lay-filter="f_all" >反选</button> '+
                                '<button  type="button" class="layui-btn layui-btn-danger  layui-btn layui-btn-sm" id="r_all" lay-filter="r_all" >清空</button></div>' +
                                '<ul id="treeMenu" class="ztree" style="padding: 25px 0px 20px 60px;"></ul>',
                    btn: ['保存', '关闭'],
                    btnAlign: 'c',
                    success: function (layero, index) {
                        $(layero).children('.layui-layer-content').css('overflow-y', 'auto');
                        layer.load(2);
                        var setting = {
                            check: {enable: true},
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            }
                        };
                        admin.req('api-user/menus/'+roleId+'/'+systemId+'/menus', {}, function (data) {
                            $.fn.zTree.init($('#treeMenu'), setting, data);
                            layer.closeAll('loading');
                        }, 'GET');
    
                    },
                    yes: function (index) {
                        layer.load(1);
                        var treeObj = $.fn.zTree.getZTreeObj('treeMenu');
                        var nodes = treeObj.getCheckedNodes(true);
                        var ids = new Array();
                        for (var i = 0; i < nodes.length; i++) {
                            ids[i] = nodes[i].id;
                        }
                        var data = new Object();
                        data.roleId = roleId;
                        data.menuIds = ids;
    
                        admin.req('api-user/menus/granted', JSON.stringify(data) , function (data) {
                            layer.closeAll('loading');
                            if (0 == data.resp_code) {
                                layer.msg(data.resp_msg, {icon: 1, time: 500});
                                layer.close(index);
                            } else {
                                layer.msg(data.resp_msg, {icon: 2, time: 500});
                            }
                        }, 'POST');
                    }
                });