layui树形菜单写的树形列表（treetable）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Majker/article/details/82081350

基于layui v2.2.5的 layui-tree写了一个treetable（树形列表）

效果

1.1 收起效果图

1.2 展开效果图

1.开发预备

首先需要到layui官网https://www.layui.com/, 下载layui插件，在页面引入layui.js和layui.css

2.页面元素

<div class="" style="margin-top: 20px;margin-left:20px;">
    <div id="demo"></div>
</div>

添加expredable参数: 设置展示treetable时是否展开，默认为false;
treetable显示多列的方式，参考以下，field的值要跟数据格式中的一致

var layout = [
    {name: 'id',field: 'id',headerClass: 'value_col',colClass: 'value_col'},
    {name: '菜单名称',treeNodes: true,headerClass: 'value_col',colClass: 'value_col'},
    {name: '操作',headerClass: 'value_col',colClass: 'value_col',style: 'width: 30%',
                render: function(row) {
                    return [
                        '<a class="layui-btn layui-btn-xs layui-btn-danger"
                           <i class="layui-icon ">&#xe640;</i> </a>',
                    ].join('');
                }
            }
];

1. 实例化form 2. 传入checkbox参数 3. form.render()渲染页面

layui.use(['form', 'tree', 'layer'], function() {
    var layer = layui.layer,
    form = layui.form,
    $ = layui.jquery;
    var tree1 = layui.treeGird({
                elem: '#demo', //传入元素选择器
                spreadable: false, //设置是否全展开，默认不展开
                checkbox: true,
                nodes: [{
                        "id": "1",
                        "name": "父节点1",
                        "children": [{
                                "id": "11",
                                "name": "父节点11"
                            },
                            {
                                "id": "12",
                                "name": "父节点12"
                            }
                        ]
                    },
                    {
                        "id": "2",
                        "name": "父节点2",
                        "children": [{
                            "id": "21",
                            "name": "子节点21",
                            "children": [{
                                    "id": "211",
                                    "name": "子节点211"
                                },
                                {
                                    "id": "211",
                                    "name": "子节点211"
                                }
                            ]
                        }]
                    }
                ],
                layout: layout
        });
        form.render();
});

树形菜单全部收起和全部展开功能，调用方式如下

//收起
$('#collapse').on('click', function() {
        layui.collapse(tree1);
});
//删除
$('#deleteAll').on('click', function() {
        var arr = layui.getSelected(tree1);
                //console.log(arr);
});
//展开
$('#expand').on('click', function() {
        layui.expand(tree1);
});

本文测试的 demo 下载地址为 https://download.csdn.net/download/majker/10632544