天天看點

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

全選

//全選
            $('#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,不選中節點
            });
      
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');
                }
            });