Some time ago, I learned Layui and gained some experience. Here I mainly enumerate the use of tree diagram and data table components

<div id="test5" class="demo-tree"></div>

1. Create a tree div on the page, as a container component of the tree diagram, must specify an ID. Next, is the data rendering, here only introduces the interface data rendering, static data rendering, the official documentation has a detailed example

1.1 Request Data

2.1 Rendering Data

 $http({
            method: 'POST',
            data: {},
            url: "/activiti-server/api/atv/tree"
        }).success(function (data) {
            // debugger
            data1 = data.data;
            console.log("Tree data", data1)// Here is the rendered data // Layui dom element initialization, initialization tree module layui.use(['tree'.'util'].function () {
                var tree = layui.tree
                    // var checkData = tree.getChecked('demoId1')
                    //     console.log("Node data",checkData), layer = layui.layer, util = layui.util // tree.render({elem:'#test5', data: data1 // Enable the checkbox, showCheckbox:true,
                    onlyIconControl: true

                    , oncheck: function(obj) { console.log(obj.data); // Get the current clicked node data console.log(obj.checked); // Check whether this node is a Boolean value. // Get the expansion status of the current node: open, close, normal console.log(obj.elem);Copy the code

2. Data table construction and rendering

<table id="demo" lay-filter="test" style="margin-top: 100px;"></table>
Copy the code

Similar to the use of tree, a table container is first constructed on the page as a table data container. During the use of ordinary tables, there is no problem. When using check boxes, there is a bug that all check boxes are selected and the data is empty. Let’s look at the rendering code first

1. Initialize table layui.use('table'.function () {
                var table = layui.table;
                var checkStatus = table.checkStatus('demo') dataAll = checkStatus.data; Table. render({elem: render({elem: render));'#demo',
                    url: "api/atv/selectUseAllByDeptId ",
                    parseData: function(res) {//res is the original returned datareturn {
                            "code": res.status,//code is the returned status"count": res.data.rows.totalRows, // Parse the data length"data": res.data.rows.list // Parse the data list}; }, method:'post',
                    dataType: "json", / /whereIs the parameter to the requestwhere: {
                        "deptId": {}}, cols: [[// because I need a checkbox here, sotypeFor the checkbox {type: 'checkbox'}
                        // , {field: ' ', width: 80, title: 'ID', sort: true}
                        , {field: 'username', width: 80, title: 'Username'}
                        , {field: 'phone', width: 116, title: 'phone'}
                        , {field: 'email', width: 177, title: 'email'}
                        , {field: 'deptName', title: 'department', width: 118}
                        , {field: 'createTime', width: 80, title: 'Creation date', width: 136}]], //page istrueTo enable paging page:true});Copy the code

3. As mentioned earlier, when all data is checked, the array data is empty. You can use the following solution

table.on('checkbox(test)'.function(obj) { console.log(obj.checked); // Whether status console.log(obj.data) is currently selected; Console. log(obj.type); Log (obj) //obj.type=="one", is to select a dataif (obj.type == "one" && obj.checked == true) {
                        var ele = {username: obj.data.username, id: obj.data.id}
                        console.log("ele", ele);
                        var ele1 = {departname: obj.data.deptName, deptId: obj.data.deptId}
                        usernames.push(ele);
                        console.log("usernames", usernames);
                        departments.push(ele1);
                        console.log("departments", departments);
                        //obj.type=="all"Select all tables and all data}else if (obj.type == "all") {
                        console.log(obj.checked, 'selected')
                        console.log("Select to get length:", obj.data.length)
                        if (obj.checked == true) {// select console.log("All selected data", dataAll)
                            var checkStatus = table.checkStatus("demo")
                            console.log("checkStatus:", checkStatus) // checkstatus. data indicates all the selected datafor(leti=0; i<checkStatus.data.length; i++){ var ele = {}; var ele1={}; ele.username=checkStatus.data[i].username; ele1.department =checkStatus.data[i].deptName; ele1.deptId=checkStatus.data[i].deptId; ele.id= checkStatus.data[i].id; usernames.push(ele); departments.push(ele1) } console.log("222333344",usernames);
                            console.log("222366666344",departments);

                            // usernames.push(obj.data.username);
                            // departments.push(obj.data.deptName)
                        } else{// Empty array userNames = []; departments = []; }}else {
                        if (usernames.length > 0) {
                            console.log("The values in the array are:",usernames)
                            console.log("The values in the array are:",obj.data.id)
                            for(var i=0; i<=usernames.length-1; i++){ // console.log("usernames.indexOf(obj.data.username)===",usernames[i].id==obj.data.id)
                                if (usernames[i].id==obj.data.id) {
                                    usernames.splice(0, 1)
                                }
                            }
                        }
                        if (departments.length > 0) {
                            for(var j=0; j<=departments.length-1; j++){if(the departments [j]. Journal of deptId = = obj. Data. The deptId) {the departments. The splice (0, 1); } } } } console.log("User name in array:", usernames);
                    console.log("Department name in array :", departments);
                });
Copy the code

At that time, in the selection of all data, the array has no value, find a lot of methods, or god help me to solve. I hope this article can help more people.