[TOC] ## lay-data（table） ``` id - 設定容器唯一ID <table class="layui-table" lay-data="{id:'idTest'}" lay-filter="test"> …… </table> page - 是否開啟分頁 <table class="layui-table" lay-data="{page:true}" lay-filter="test"> …… </table> limits - 每頁數據量可選項 <table class="layui-table" lay-data="{limits:[30,60,90,150,300], limit:60}" lay-filter="test"> …… </table> loading - 是否顯示加載條 <table class="layui-table" lay-data="{loading:false}" lay-filter="test"> …… </table> width - 設定容器寬度 <table class="layui-table" lay-data="{width:1000}" lay-filter="test"> …… </table> height - 設定容器高度 <table class="layui-table" lay-data="{height:315}" lay-filter="test"> …… </table> <table class="layui-table" lay-data="{height:'full-20'}" lay-filter="test"> …… </table> 設定表格外觀(行列無邊框，隔行背景，表格尺寸) <table class="layui-table" lay-data="{skin:'line/row/nob', even:true/false, size:'sm/lg'}" lay-filter="test"> …… </table> ``` ## lay-data （tr） ``` <table class="layui-table" lay-data="{page:true}" lay-filter="test"> <thead> <tr> <th lay-data="{checkbox:true}">checkbox</th> <th lay-data="{checkbox:true,LAY_CHECKED: true}">checkbox已選</th> <th lay-data="{field:'id'}">id</th> <th lay-data="{width:180}">width</th> <th lay-data="{space:true}">space</th> <th lay-data="{sort:true}">sort</th> <th lay-data="{fixed:'right|center|left'}">fixed</th> <th lay-data="{edit:'text'}">edit</th> <th lay-data="{templet: '#titleTpl'}">templet</th> <th lay-data="{toolbar: '#barDemo'}">toolbar</th> <th lay-data="{initSort:{field:'id', type:'desc'}}">initSort</th> </tr> </thead> </table> ``` ## 獲取選中行 ``` <table class="layui-table" lay-data="{id: 'idTest'}"> …… </table> var checkStatus = table.checkStatus('idTest'); //test即為基礎參數id對應的值 console.log(checkStatus.data) //獲取選中行的數據 console.log(checkStatus.data.length) //獲取選中行數量，可作為是否有選中行的條件 console.log(checkStatus.isAll ) //表格是否全選 ``` ## 事件監聽 ``` <table class="layui-table" lay-filter="test"></table> table.on(); ``` ## 監聽復選框選擇 ``` table.on('checkbox(test)', function(obj){ console.log(obj.checked); //當前是否選中狀態 console.log(obj.data); //選中行的相關數據 console.log(obj.type); //如果觸發的是全選，則為：all，如果觸發的是單選，則為：one }); ``` ## 監聽單元格編輯 ``` table.on('edit(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" console.log(obj.value); //得到修改后的值 console.log(obj.field); //當前編輯的字段名 console.log(obj.data); //所在行的所有相關數據 data[field] = value; //更新緩存中的值 }); ``` ## toolbar - 綁定工具條 ``` <th lay-data="{toolbar: '#barDemo'}"></th> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a> <a class="layui-btn layui-btn-mini" lay-event="edit">編輯</a> <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">刪除</a> <!-- 這里同樣支持 laytpl 語法，如： --> {{# if(d.auth > 2){ }} <a class="layui-btn layui-btn-mini" lay-event="check">審核</a> {{# } }} </script> 注意：屬性 lay-event="" 是模板的關鍵所在，值可隨意定義。 ``` ## 工具條DEMO ``` //監聽工具條 table.on('tool(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" var data = obj.data; //獲得當前行數據 var layEvent = obj.event; //獲得 lay-event 對應的值 var tr = obj.tr; //獲得當前行 tr 的DOM對象 if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //刪除 layer.confirm('真的刪除行么', function(index){ obj.del(); //刪除對應行（tr）的DOM結構，并更新緩存 layer.close(index); //向服務端發送刪除指令 }); } else if(layEvent === 'edit'){ //編輯 //do something //同步更新緩存對應的值 obj.update({ username: '123' ,title: 'xxx' }); } }); ``` ## 返回數據格式 ``` { code: 0, msg: "", count: 1000, data: [] } ``` ## 獲取選中行 ``` <table class="layui-table" lay-data="{id: 'idTest'}"> …… </table> var checkStatus = table.checkStatus('idTest'); //test即為基礎參數id對應的值 console.log(checkStatus.data) //獲取選中行的數據 console.log(checkStatus.data.length) //獲取選中行數量，可作為是否有選中行的條件 console.log(checkStatus.isAll ) //表格是否全選 ``` ## 事件監聽 ``` <table class="layui-table" lay-filter="test"></table> ``` ### 監聽復選框選擇 ``` table.on('checkbox(test)', function(obj){ console.log(obj.checked); //當前是否選中狀態 console.log(obj.data); //選中行的相關數據 console.log(obj.type); //如果觸發的是全選，則為：all，如果觸發的是單選，則為：one }); ``` ### 監聽單元格編輯 ``` table.on('edit(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" console.log(obj.value); //得到修改后的值 console.log(obj.field); //當前編輯的字段名 console.log(obj.data); //所在行的所有相關數據 data[field] = value; //更新緩存中的值 }); ``` ### 監聽工具條 ``` //監聽工具條 table.on('tool(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" var data = obj.data; //獲得當前行數據 var layEvent = obj.event; //獲得 lay-event 對應的值 var tr = obj.tr; //獲得當前行 tr 的DOM對象 if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //刪除 layer.confirm('真的刪除行么', function(index){ obj.del(); //刪除對應行（tr）的DOM結構，并更新緩存 layer.close(index); //向服務端發送刪除指令 }); } else if(layEvent === 'edit'){ //編輯 //do something //同步更新緩存對應的值 obj.update({ username: '123' ,title: 'xxx' }); } }); ``` ### 監聽排序切換 ``` table.on('sort(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" console.log(obj.field); //當前排序的字段名 console.log(obj.type); //當前排序類型：desc（降序）、asc（升序）、null（空對象，默認排序） console.log(this); //當前排序的 th 對象 //盡管我們的 table 自帶排序功能，但并沒有請求服務端。 //有些時候，你可能需要根據當前排序的字段，重新向服務端發送請求，如： table.reload('idTest', { initSort: obj //記錄初始排序，如果不設的話，將無法標記表頭的排序狀態。 layui 2.1.1 新增參數 ,where: { //請求參數 field: obj.field //排序字段 ,order: obj.type //排序方式 } }); }); ``` ## 表格重載 這個我不太清楚，待使用后再來看！ ``` 【HTML】 <table class="layui-table" lay-data="{id: 'idTest'}"> …… </table> 【JS】 table.reload('idTest', { url: '/api/table/search' ,where: {} //設定異步數據接口的額外參數 //,height: 300 }); ```