layui的表格渲染方式

三種初始化渲染方式

 

 

1.方法渲染

【添加表單容器】

<table id="demo" lay-filter="test"></table>

【添加對應的js代碼就可以了】

var table = layui.table;
 
//執行渲染
table.render({
  elem: '#demo' //指定原始表格元素選擇器（推薦id選擇器）
  ,height: 315 //容器高度
  ,cols: [{}] //設置表頭
  //,…… //更多參數參考右側目錄：基本參數選項
});

代碼案例【如圖1】

html代碼：

            <!---表頭操作--->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 刪除 </button>
                </div>
            </script>
            <!--操作模板后面使用-->
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            <script type="text/html" id="currentTableBar">
                <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">編輯</a>
                <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">刪除</a>
            </script>

js代碼

    <script>
        layui.use(['form', 'table'], function () {//使用了layUI里面的form和table的組件
            var $ = layui.jquery,//使用了jquery
            form = layui.form,
            table = layui.table;
            table.render({
                elem: '#currentTableId',//使用展示表單的對應上面的table
                url: '../api/table.json',//后台接口地址
                toolbar: '#toolbarDemo',//表頭模板id
                cols: [[//下面是后台返回數據字段挨個展示
                    { type: "checkbox", width: 50 },
                    { field: 'id', width: 80, title: 'ID' },
                    { field: 'username', width: 80, title: '用戶名' },
                    { field: 'sex', width: 80, title: '性別'},
                    { field: 'city', width: 80, title: '城市' },
                    { field: 'sign', title: '簽名', minWidth: 150 },
                    { field: 'experience', width: 80, title: '積分'},
                    { field: 'score', width: 80, title: '評分'},
                    { field: 'classify', width: 80, title: '職業' },
                    { field: 'wealth', width: 135, title: '財富' },
                    { title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center" }//toolbar使用了一個模板
                ]],
                limits: [10, 15, 20, 25, 50, 100],//分頁
                limit: 15,
                page: true,
                skin: 'line'//皮膚
            });
        });
</script>

 備注：自動渲染，和轉化為靜態表格這不說了。參考文檔即可

表單搜索框實現【如圖】

        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);//將數據進行json話發送給后台
            layer.alert(result, {
                title: '最終的搜索信息'
            });

            //執行搜索重載
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

 添加功能實現【如圖】點擊彈框