layui中引入treetable的方法

layui中引入treetable的方法

直接上代碼 layui.config({ base: '/static/layui/lay/modules/' }).extend({ treetable: 'treetable-lay/treetable' }); var tablist = {}; layui.use(['form', 'layer', 'laydate', 'table', 'laytpl','treetable'], function () { var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery, treetable = layui.treetable, table = layui.table; )};

下面貼上完整的代碼

layui.config({
    base: '/Public/static/layui/lay/modules/'
}).extend({
    treetable: 'treetable-lay/treetable'
});
var tablist = {};
layui.use(['form', 'layer', 'laydate', 'table', 'laytpl','treetable'], function () {
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        treetable = layui.treetable,
        table = layui.table;
    //
    tablist.reload = function(where){
        let load = layer.msg('數據加載中',{icon:16,time:false});
        treetable.render({
            treeColIndex: 2,          // 顯示在第幾列
            treeSpid: 0,             // 頂級pid
            treeIdName: 'id',       // id
            treePidName: 'pid',     // pid
            treeDefaultClose: true,   // 不全部展開
            treeLinkage: true,        //  父級展開時是否自動展開所有子級
            elem: '#table',
            where: where,
            url: '/admin/auth/rule',
            method: 'get',
            cellMinWidth: 95,
            height: "full - 10",
            id: "table",
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', title: 'ID', width: 60, align: "center"},
                {field: 'title', title: '規則名',width:240},
                {field: 'name', title: '規則值'},
                {field: 'type',unresize:true,width:100, title: '支持表達式', align: 'center', templet: "#type"},
                {field: 'is_url', width:80, title: '鏈接', align: 'center', templet: "#is_url",unresize:true},
                {field: 'status',unresize:true,width:95, title: '狀態', align: 'center', templet: "#status"},
                {field: 'condition', title: '表達式'},
                {title: '操作', width: 140, templet: '#tool',align: "center"}
            ]],
            done:function(){
                layer.close(load);
            }
        });
    };
    tablist.reload();
    //檢測更改支持表達式
    form.on('switch(type)', function (obj) {
        var _this = $(obj.elem);
        var index = layer.msg('操作中', {'icon': 16, shade: 0.1});
        $.post("/admin/auth/fast_change_rule", {
            id: this.value,
            name: this.name,
            val: obj.elem.checked
        }, function (data) {
            layer.close(index);
            if (data.code === 0) {
                window.parent.toast('操作成功', 0);
            } else {
                !obj.elem.checked ? _this.prop('checked',true) : _this.removeAttr('checked');
                form.render('checkbox');
                window.parent.toast(data.info, data.code);
                //狀態回滾
            }
        });
    });
    //檢測更改使用狀態
    form.on('switch(status)', function (obj) {
        var _this = $(obj.elem);
        var index = layer.msg('操作中', {'icon': 16, shade: 0.1});
        $.post("/admin/auth/fast_change_rule", {
            id: this.value,
            name: this.name,
            val: obj.elem.checked
        }, function (data) {
            layer.close(index);
            if (data.code === 0) {
                window.parent.toast('操作成功', 0);
            } else {
                !obj.elem.checked ? _this.prop('checked',true) : _this.removeAttr('checked');
                form.render('checkbox');
                window.parent.toast(data.info, data.code);
                //狀態回滾
            }
        });
    });
    //檢測更改是否鏈接
    form.on('switch(is_url)', function (obj) {
        var _this = $(obj.elem);
        var index = layer.msg('操作中', {'icon': 16, shade: 0.1});
        $.post("/admin/auth/fast_change_rule", {
            id: this.value,
            name: this.name,
            val: obj.elem.checked
        }, function (data) {
            layer.close(index);
            if (data.code === 0) {
                window.parent.toast('操作成功', 0);
            } else {
                !obj.elem.checked ? _this.prop('checked',true) : _this.removeAttr('checked');
                form.render('checkbox');
                window.parent.toast(data.info, data.code);
                //狀態回滾
            }
        });
    });
    //搜索
    $(".search_btn").on("click", function () {
        search();
    });
    //搜索+刷新
    function search(){
        tablist.reload({
                keyword:$("input[name=keyword]").val()
                ,type:$('select[name=type]').val()
                ,status:$('select[name=status]').val()
                ,is_url:$('select[name=is_url]').val()
                ,pid:$('select[name=pid]').val()
        });
    }

    //添加文章
    function addoredit(url,name) {
        let index = layui.layer.open({
            title: name,
            type: 2,
            content: url,
            maxmin:true,
            area:['60%','98%']
        });
    }

    $(".add_btn").on('click',function () {
        addoredit('/admin/auth/add_rule','添加規則');
    });

    //展開
    $(".showAll").toggle(function(){
        $(this).html('<i class="layui-icon layui-icon-triangle-d"></i>收起');
        treetable.expandAll('#table');
    },function(){
        $(this).html('<i class="layui-icon layui-icon-triangle-r"></i>展開');
        treetable.foldAll('#table');
    });
    //批量刪除
    $(".delAll_btn").on('click',function () {
        var checkStatus = table.checkStatus('table'),
            data = checkStatus.data,
            ids = [];
        if (data.length > 0) {
            for (var i in data) {
                ids.push(data[i].id);
            }
            layer.confirm('確定刪除選中的數據？', {icon: 3, title: '提示信息'}, function (index) {
                $.post("/admin/auth/del_rule",{'id':ids},function(data){
                    window.parent.toast(data.info,data.code);
                    if(data.code === 0)
                    tablist.reload();
                });
                layer.close(index);
            })
        } else {
            layer.msg("請選擇需要刪除的數據");
        }
    });

    //列表操作
    table.on('tool(table)', function (obj) {
        var layEvent = obj.event,
            data = obj.data;
        if (layEvent === 'edit') { //編輯
            addoredit('/admin/auth/edit_rule/id/'+data.id,'修改 <span class="layui-red"> '+data.title+' </span>');
        } else if (layEvent === 'del') { //刪除
            layer.confirm('確定刪除 <span class="layui-red">' + data.title + '</span> 規則？', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                $.post("/admin/auth/del_rule",{'id':data.id},function(data){
                    window.parent.toast(data.info,data.code);
                    if(data.code === 0)
                        tablist.reload();
                });
            });
        }else if(layEvent === 'add'){
            addoredit('/admin/auth/add_rule/id/'+data.id,'爲 <span class="layui-red"> '+data.title+' </span>添加子項');
        }
    });
    if(window.parent.NProgress){
        window.parent.NProgress.done();
    }
})

treetable下載地址：鏈接：https://pan.baidu.com/s/1yIV6_nY5NY_fbsVCH7d_OA
提取碼：0e7t