Tree list written by the tree menu of layui

Based on layui v2.2.5, a treetable (tree list) is written in layui tree

Effect

1.1 stow the renderings

1.2 unfolding effect drawing

1. Development preparation

First, you need to go to the official website of layui https://www.layui.com/ , download the layui plug-in, and introduce layui.js and layui.css on the page

2. Page elements

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

Add expandable parameter: set whether to expand when displaying treetable. The default value is false;
treetable displays multiple columns. Refer to the following. The value of field should be consistent with that of data format

var layout = [
    {name: 'id',field: 'id',headerClass: 'value_col',colClass: 'value_col'},
    {name: 'Menu name',treeNodes: true,headerClass: 'value_col',colClass: 'value_col'},
    {name: 'operation',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. Instantiate form 2. Pass in the checkbox parameter 3. form.render() to render the page
layui.use(['form', 'tree', 'layer'], function() {
    var layer = layui.layer,
    form = layui.form,
    $ = layui.jquery;
    var tree1 = layui.treeGird({
                elem: '#demo', //Incoming element selector
                spreadable: false, //Set whether to expand all, do not expand by default
                checkbox: true,
                nodes: [{
                        "id": "1",
                        "name": "Parent node 1",
                        "children": [{
                                "id": "11",
                                "name": "Parent node 11"
                            },
                            {
                                "id": "12",
                                "name": "Parent node 12"
                            }
                        ]
                    },
                    {
                        "id": "2",
                        "name": "Parent node 2",
                        "children": [{
                            "id": "21",
                            "name": "Child node 21",
                            "children": [{
                                    "id": "211",
                                    "name": "Child node 211"
                                },
                                {
                                    "id": "211",
                                    "name": "Child node 211"
                                }
                            ]
                        }]
                    }
                ],
                layout: layout
        });
        form.render();
});

The tree menu can be folded and expanded in the following ways

//Retract
$('#collapse').on('click', function() {
        layui.collapse(tree1);
});
//delete
$('#deleteAll').on('click', function() {
        var arr = layui.getSelected(tree1);
                //console.log(arr);
});
//Open
$('#expand').on('click', function() {
        layui.expand(tree1);
});

The demo download address tested in this paper is https://download.csdn.net/download/majker/10627548

Tags: JQuery

Posted on Sun, 05 Jan 2020 22:57:18 -0800 by Germaris