layui treetable 异步交互

 

 

 

 

前台页面

引入layui自带样式和拓展样式

 

 

 

 

 

<input class="layui-input" id="edtSearch" value="1_1_2" placeholder="输入关键字"
       style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
<div class="layui-btn-container" style="display: inline-block;">
    <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
        <i class="layui-icon">&#xe615;</i>搜索
    </button>
    <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
        <i class="layui-icon">&#x1006;</i>清除搜索
    </button>
</div>
<table id="demoTreeTable1"></table>

 

 

 

 js 

 

 layui.config({
        base: '../'
    }).extend({
        treeTable: 'treeTable/treeTable'
    }).use(['laydate', 'laypage','tree','util', 'layer', 'table','form','upload', 'treeTable'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,treeTable=layui.treeTable
            ,form=layui.form
            ,tree=layui.tree//树
            ,util=layui.util
            /*,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块*/
            ,upload = layui.upload
            ,element=layui.element;

 

 

 2种情况

1.查出表中所有数据 

 

 

 

 

 

 

 

 

条件查询

 

 

 

// 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTable1',
            tree: {
                iconIndex: 2,
                arrowType: 'arrow2',
                isPidData: true
            },
            text: {},
            cols: [
                {type: 'numbers'},
                {type: 'checkbox'},
                {field: 'id', title: 'ID'},
                {field: 'name', title: 'name', width: 160},
                // {templet: '#demoTreeTableState1', title: '状态', width: 100},
                // {align: 'center', toolbar: '#demoTreeTableBar1', title: '操作', width: 120}
            ],
            reqData: function (data, callback) {
                setTimeout(function () {  // 故意延迟一下
                    // var url = '../../json/list';
                    // url += ((data ? ('_' + data.id) : '') + '.json');
                    // $.get(url, function (res) {
                    //     callback(res.data);
                    // });
                    $.ajax({
                        url:'/layui/treetable',
                        type: "post",
                        data:{},
                        dataType: 'json',
                        success:function (data) {
                            debugger;
                            var data=data.data;
                            callback(data);
                        }
                    });

                }, 800);
            },
            style: 'margin-top:0;'
        });

        setTimeout(function () {
            $('body').children('.page-loading').hide();
            $('body').removeClass('page-no-scroll');
        }, 100);

        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });

        $('#btnClearSearch').click(function () {
            insTb.clearFilter();
        });


    });