Layui(十一) Layui Tree點選元件則載入相關資料

目的：

        思路：①、介面開啟則載入Tree資料 和 Table 資料

                   ②、使用者點選某個節點則載入該節點的所有資料、

 

過程：

      1、先載入table資料

  // 顯示右側表格資料
        var tableIns = table.render({
            elem: '#test'
            , id: 'DeptUser'
            , url: 'http://xxx.xx.xx.xx:xxxx/api/depuser'
            , method: 'POST'
            , datatype: 'json'
            , where: {'deptid': JSON.stringify(tmp_id), 
                        'token': token
            , toolbar: '#toolbarDemo'
            , title: '使用者資料表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'ID', title: 'ID', sort: true}
                , {field: 'UserName', title: '使用者名稱'}
                , {field: 'Sex', title: '性別'}
                , {field: 'DeptName', title: '部門'}
                , {field: 'JobName', title: '職位'}
            ]]
            , limit: 10
            , page: {theme: '#1E9FFF'}
        });

        2、載入Tree元件，同時在Tree.click方法中寫表格的回撥方法

tree.render({
            elem: '#test9'
            , data: tmp_data
            // 預設節點開啟狀態
            , spread: true
            , id: 'DeptName'
            , edit: ['add', 'update', 'del'] //操作節點的圖示
            , click: function (obj) {
                let tmp_res = []; // 存放將json樹改為list
                tmp_res.push(obj.data);// 把點選的json轉為list
                treeForeach(tmp_res, node => {
                    tmp_id.push(node.id) // 獲取deptid值
                });
                // 先對點選的資料去重
                tmp_id = tmp_id.filter((e, i) => tmp_id.indexOf(e) == i);
                tableIns.reload({
                    url: 'http://xxx.xx.xx.xx:xxxx/api/dep'
                    , where: {
                       'token': token,
                        'deptid': JSON.stringify(tmp_id)
                    }
                    , method: 'POST'
                    , datatype: 'json'
                    , elem: '#test'
                    , toolbar: '#toolbarDemo'
                    , title: '使用者資料表'
                    , cols: [[
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'ID', title: 'ID', sort: true}
                        , {field: 'UserName', title: '使用者名稱'}
                        , {field: 'Sex', title: '性別'}
                        , {field: 'DeptName', title: '部門'}
                        , {field: 'JobName', title: '職位'}
                    ]]
                    , limit: 10
                    , page: {theme: '#1E9FFF'}
                });
                tmp_id.splice(0, tmp_id.length);//清空陣列
            }
})

        3、附上完整JS

 var tmp_id = []; // 存放遞迴後的DeptID

tree.render({
            elem: '#test9'
            , data: tmp_data
            // 預設節點開啟狀態
            , spread: true
            , id: 'DeptName'
            , edit: ['add', 'update', 'del'] //操作節點的圖示
            , click: function (obj) {
                let tmp_res = []; // 存放將json樹改為list
                tmp_res.push(obj.data);// 把點選的json轉為list
                treeForeach(tmp_res, node => {
                    tmp_id.push(node.id) // 獲取deptid值
                });
                // 先對點選的資料去重
                tmp_id = tmp_id.filter((e, i) => tmp_id.indexOf(e) == i);
                tableIns.reload({
                    url: 'http://xxx.xx.xx.xx:xxxx/api/dep'
                    , where: {
                        'token': token,
                        'deptid': JSON.stringify(tmp_id)
                    }
                    , method: 'POST'
                    , datatype: 'json'
                    , elem: '#test'
                    , toolbar: '#toolbarDemo'
                    , title: '使用者資料表'
                    , cols: [[
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'ID', title: 'ID', sort: true}
                        , {field: 'UserName', title: '使用者名稱'}
                        , {field: 'Sex', title: '性別'}
                        , {field: 'DeptName', title: '部門'}
                        , {field: 'JobName', title: '職位'}
                    ]]
                    , limit: 10
                    , page: {theme: '#1E9FFF'}
                });
                tmp_id.splice(0, tmp_id.length);//清空陣列
            }
            , operate: function (obj) {
                var type = obj.type; //得到操作型別：add、edit、del
                var data = obj.data; //得到當前節點的資料
                var elem = obj.elem; //得到當前節點元素
                //Ajax 操作
                tmp_dept_data.push({'id': data.id}); //得到節點索引
                tmp_dept_data.push({'title': data.title}); //得到節點索引
                if (type === 'add') { //增加節點
                    admin.req({
                       url: 'http://xxx.xx.xx.xx:xxxx/api/dep'
                        , method: 'POST'
                        , datatype: 'json'
                        , data: {
                            'token': token,
                            'id': data.id,
                            'title': '未命名',
                        }
                        , success: function (res) {
                            layer.msg(res.msg, {offset: '15px', icon: 1, time: 1000});
                            add_id = res.data;
                            updateTree();
                        }
                    });
                    return add_id;
                } else if (type === 'update') { //修改節點
                    admin.req({
                         url: 'http://xxx.xx.xx.xx:xxxx/api/dep'
                        , method: 'PUT'
                        , datatype: 'json'
                        , data: {
                            'token': token,
                            'id': data.id,
                            'title': data.title,
                        }
                        , success: function (res) {
                            layer.msg(res.msg, {offset: '15px', icon: 1, time: 1000});
                        }
                    });
                    // console.log('這是列印看看能獲取什麼', obj.data, JSON.stringify(tmp_dept_data));
                } else if (type === 'del') { //刪除節點
                    admin.req({
                        url: 'http://xxx.xx.xx.xx:xxxx/api/dep'
                        , method: 'DELETE'
                        , datatype: 'json'
                        , data: {
                             'token': token,
                            'id': data.id,
                            'title': data.title,
                        }
                        , success: function (res) {
                            layer.msg(res.msg, {offset: '15px', icon: 1, time: 1000});
                        }
                    });
                }
                tmp_dept_data.splice(0, tmp_dept_data.length);//清空陣列
            }
        });

        //過載Tree元件資料
        var updateTree = function () {
            //重新獲取資料
            data = getDept();
            //可以過載所有基礎引數
            tree.reload('DeptName', {
                elem: '#test9'
                , data: data
                // 預設節點開啟狀態
                , spread: true
                , edit: ['add', 'update', 'del'] //操作節點的圖示
            });
        }
        console.log('tmp_id', tmp_id);