layui數(shù)據(jù)表格使用技巧有哪些

小編給大家分享一下layui數(shù)據(jù)表格使用技巧有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

三種初始化渲染方式

我先從最簡(jiǎn)單的初始化表格寫起，如果我直接把全部代碼帖出來，你們可能會(huì)看得頭暈

1，方法渲染：

<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>

var table = layui.table            ,form = layui.form;    layui.use('table', function () {  // 引入 table模塊        table.render({            id:"dataTable",//            elem: '#layui_table_id',//指定表格元素            url: '/menu/menuList.ajax',  //請(qǐng)求路徑            cellMinWidth: 20 //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增            ,skin: 'line ' //表格風(fēng)格 line （行邊框風(fēng)格）row （列邊框風(fēng)格）nob （無邊框風(fēng)格）          　//,even: true    //隔行換色            ,page: true  //開啟分頁            ,limits: [10,20,50]  //每頁條數(shù)的選擇項(xiàng)，默認(rèn)：[10,20,30,40,50,60,70,80,90]。            ,limit: 10 //每頁默認(rèn)顯示的數(shù)量            ,method:'post'  //提交方式         　　,cols: [[                {type:'checkbox'}, //開啟多選框                {                    field: 'menuId', //json對(duì)應(yīng)的key                    title: 'ID',   //列名                    sort: true   // 默認(rèn)為 false,true為開啟排序                }            ]]        });    });

java后臺(tái)返回的json數(shù)據(jù)格式

{code: 0, count: 8,  //總行數(shù)data: [,…], //表格數(shù)據(jù)msg: ""}

2，自動(dòng)渲染方法 （以下代碼由官方提供，自動(dòng)渲染的方法 適合復(fù)雜行頭時(shí)使用，一般建議使用上面的方法渲染）

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">  <thead>    <tr>      <th lay-data="{field:'id', width:80, sort: true}">ID</th>      <th lay-data="{field:'username', width:80}">用戶名</th>      <th lay-data="{field:'sex', width:80, sort: true}">性別</th>      <th lay-data="{field:'city'}">城市</th>      <th lay-data="{field:'sign'}">簽名</th>      <th lay-data="{field:'experience', sort: true}">積分</th>      <th lay-data="{field:'score', sort: true}">評(píng)分</th>      <th lay-data="{field:'classify'}">職業(yè)</th>      <th lay-data="{field:'wealth', sort: true}">財(cái)富</th>    </tr>  </thead></table>

二，如何添加編輯按鈕

var table = layui.table            ,form = layui.form;    layui.use('table', function () {  // 引入 table模塊        table.render({            id:"dataTable",//            elem: '#layui_table_id',//指定表格元素            url: '/menu/menuList.ajax',  //請(qǐng)求路徑            cellMinWidth: 20 //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增            ,skin: 'line ' //表格風(fēng)格 line （行邊框風(fēng)格）row （列邊框風(fēng)格）nob （無邊框風(fēng)格）          　//,even: true    //隔行換色            ,page: true  //開啟分頁            ,limits: [10,20,50]  //每頁條數(shù)的選擇項(xiàng)，默認(rèn)：[10,20,30,40,50,60,70,80,90]。            ,limit: 10 //每頁默認(rèn)顯示的數(shù)量            ,method:'post'  //提交方式,done: function(res, curr, count) { //表格數(shù)據(jù)加載完后的事件    //調(diào)用示例    layer.photos({//點(diǎn)擊圖片彈出        photos: '.layer-photos-demo'        ,anim: 1 //0-6的選擇，指定彈出圖片動(dòng)畫類型，默認(rèn)隨機(jī)（請(qǐng)注意，3.0之前的版本用shift參數(shù)）    });    //如果是異步請(qǐng)求數(shù)據(jù)方式，res即為你接口返回的信息。    //如果是直接賦值的方式，res即為：{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長(zhǎng)度    console.log(res);    //得到當(dāng)前頁碼    console.log(curr);    //得到數(shù)據(jù)總量    console.log(count);}  　　,cols: [[ {type:'checkbox'}, //開啟多選框  { field: 'menuId', //json對(duì)應(yīng)的key title: 'ID', //列名 sort: true // 默認(rèn)為 false,true為開啟排序  },{ fixed: 'right', title: '操作', width: 215, align:'center', toolbar: '#barDemo' //綁定按鈕組 } ]] }); });//監(jiān)聽工具條table.on('tool(dataTable)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"    var data = obj.data //獲得當(dāng)前行數(shù)據(jù)            ,layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值    if(layEvent === 'detail'){　　　　 layui.alert(JSON.stringifr(data)) ; //將編輯的行信息轉(zhuǎn)為json字符串        layer.msg(data.attrId);    } else if(layEvent === 'del'){        layer.msg('刪除'+data.menuId);        console.log(table)    } else if(layEvent === 'edit'){           });    }});

<script type="text/html" id="barDemo">  // id和toolbar 屬性綁定     <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>     <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a></script>

三，如何在表格中添加表單組件（以下我將推薦2種）

1，使用模塊引擎的方式（這種方法比較麻煩，個(gè)人推薦第二種）

<!--  是否顯示 --><script type="text/html" id="isShow">  // 請(qǐng)注意 id之間的關(guān)聯(lián)    {{#  if(d.menuDisplay === 'Y'){ }}    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="顯示|隱藏" lay-filter="isShow" checked>    {{#  } else { }}    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="顯示|隱藏" lay-filter="isShow" >    {{#  } }}</script>

{   //在表格對(duì)象cols屬性中添加    field: 'menuDisplay',  /    title: '是否顯示',    templet: '#isShow', //模板關(guān)聯(lián)以上定義的    unresize: true,    filter: "isShow",    sort: false}

2，使用 函數(shù)的方法

{    field: 'menuDisplay',    title: '是否顯示',    unresize: true,    filter: "isShow",    sort: false,    templet: function (d) {        if (d.menuDisplay == ‘Y’) {            return` <input type = "checkbox"            name = "menuDisplay"            value = "`+d.menuId+`"            lay - skin = "switch"            lay - text = "顯示|隱藏"            lay - filter = "isShow" > `;        } else {            return` <input type = "checkbox"            name = "menuDisplay"            value = "`+d.menuId+`"            lay - skin = "switch"            lay - text = "顯示|隱藏"            lay - filter = "isShow"            checked > `;        }    }}

四、 展示圖片

{                    field: 'img',                    title: '圖片',                    unresize: true,                    sort: false,                    //style:'height:100px;',                    templet:function (d) {                        return `<div class="layer-photos-demo" onclick="img_click()" style="cursor:pointer;">                                      <img layer-pid="圖片id，可以不寫"  layer-src="/images/bug-success-bg.jpg" src="/images/bug-success-bg.jpg" alt="圖片名">                                    </div>`;                    }                }

當(dāng)表格數(shù)據(jù)加載完后再綁定屬性

以上是“l(fā)ayui數(shù)據(jù)表格使用技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！