layui 树形组件元素全选，全不选，反选

layui的tree组件官方介绍的不多，而且元素的名称都得是固定的所以如何将后台的数据与前台交互需要自己再设计

1、后台到前端（有递归调用）

    private Object fun(List<SeriesRuleClass> tree, List<HashMap<String, Object>> result) {
        for (SeriesRuleClass aClass : tree) {
            HashMap<String, Object> map = new HashMap<>();
            map.put("id", aClass.getClazzId());
            map.put("title", aClass.getClassName());
            map.put("checked", aClass.isChoose());
            List<SeriesRuleClass> children = aClass.getChildren();
            List<HashMap<String, Object>> result1 = new ArrayList<>();
            if (null != children) {
                map.put("children", fun(children, result1));
            }
            result.add(map);
        }
        return result;
    }

前端接收展示

    function loadRuleTree(data) {
        layuiTree.render({
            elem: '#clazz-tree',
            id: 'clazz-tree',
            data: data
            , accordion: true
            , showCheckbox: true
        })

    }

 

layui tree展示有个bug 就是一级和二级的图标尺寸不一样，所以会对不齐。所以我把没有子项的排除了。

2、全选，全不选，反选

官方文档中方法很少：1、获取勾选的节点。2、指定节点id勾选。

所以得自己遍历了，反选有点麻烦先遍历出所有勾选的id。

        <div id="clazz-div" style="display: none">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>指定适用班级</legend>
            </fieldset>
<!--            <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>-->
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">全选</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="setUnChecked">全不选</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="setReverseChecked">反选</button>
            <!--            <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>-->
            <div id="clazz-tree" class="demo-tree"></div>
        </div>

layui.use(['transfer', 'layer', 'table', 'element', 'form', 'tree', 'util'], function () {
    var layer = layui.layer //弹层
        , table = layui.table
        , form = layui.form
        , layuiTree = layui.tree
        , $ = layui.$
        , transfer = layui.transfer
        , util = layui.util
        , element = layui.element; //元素操作   

 

    // 按钮事件
    util.event('lay-demo', {
        getChecked: function () {
            var checkedData = layuiTree.getChecked('clazz-tree'); //获取选中节点的数据

            layer.alert(JSON.stringify(checkedData), {shade: 0});
        }
        , setChecked: function () {

            allSelect(database)
            layuiTree.reload('clazz-tree', {
                data: database
            });
        }
        , setUnChecked: function () {
            allUnSelect(database)
            layuiTree.reload('clazz-tree', {
                data: database
            });
        }
        , setReverseChecked: function () {
            reverseChecked(database)
            layuiTree.reload('clazz-tree', {
                data: database
            });
        }
        , reload: function () {
            //重载实例
            layuiTree.reload('clazz-tree', {});

        }
    });
    // 全选
    function allSelect(database) {
        $.each(database, function (index, item) {
            item.checked = true;
            if (item.children.length) {
                $.each(item.children, function (index2, item2) {
                    if (!item2.checked) {
                        item2.checked = true;
                    }
                })
            }

        })
    }
    //全不选
    function allUnSelect(database) {

        $.each(database, function (index, item) {
            item.checked = false;
            if (item.children.length) {
                $.each(item.children, function (index2, item2) {
                    if (item2.checked) {
                        item2.checked = false;
                    }
                })
            }
        })
    }
    //反选
    function reverseChecked(database) {
        var checkedData = layuiTree.getChecked('clazz-tree'); //获取选中节点的数据
        // let allElement = getId(database);
        let selectElement = getId(checkedData);
        if (selectElement.length) {
            $.each(database, function (index, item) {
                $.each(item.children, function (index2, item2) {
                    if (selectElement.includes(item2.id)) {
                        item2.checked = false;
                    } else {
                        item2.checked = true;
                    }
                })
            })
        } else {
            allUnSelect(database);
        }
        // console.log(allElement, '数据')
        // console.log(getId(checkedData), '选中数据')
    }
    // y用来递归筛选id
    function getId(data) {
        let myArmy = [];

        $.each(data, function (index, item) {
            if (item.children.length) {
                $.each(item.children, function (index2, item2) {
                    myArmy.push(item2.id)
                })
            }
        })
        return myArmy;
    }

3、后台接收前端数据 

用Json接收传来的数据再转化，建个工具类。

/**
 * @author HuangZheng
 * @Date 2020/6/16 16:12
 */
@Data
public class Tree {
    @Desc("id")
    private Integer id;

    @Desc("中文名")
    private String title;

    @Desc("是否选中")
    private boolean checked;

    @Desc("是否折叠")
    private boolean spread;

    @Desc("子项")
    private List<Tree> children = new ArrayList<>();
}

package com.alibaba.fastjson;

List<Tree> array = JSONArray.parseArray(ruleClasses, Tree.class);