layui中table模塊有什么用

這篇文章主要介紹layui中table模塊有什么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

layui 的 table模塊是一個重頭，在基礎參數(shù)方面盡可能地做到友好，即：保證功能的前提而又避免過于繁雜的配置。

基礎參數(shù)一般出現(xiàn)在以下幾種場景中：

場景一：下述 lay-data 里面的內(nèi)容即為基礎參數(shù)項，切記：值要用單引號

<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>

場景二：下述方法中的鍵值即為基礎參數(shù)項

table.render({  height: 300  ,url: '/api/data'});

更多場景：下述options即為含有基礎參數(shù)項的對象

> table.init('filter', options); //轉(zhuǎn)化靜態(tài)表格> var tableObj = table.render({});  tableObj.reload(options); //重載表格

接下來看一下基礎元素有哪些？

1、elem - 綁定元素是指定原始table容器，只適用于 table.render()的渲染方式

HTML：<table id="test"></table>      JS：table.render({ //其它參數(shù)在此省略  elem: '#test' //或 elem: document.getElementById('test') 等});

2、設置表頭，這里包含很多值，是一個二維數(shù)組。如果你采用表格的“方法級渲染”，那么你需要借助該參數(shù)來設定表格。如：

JS：table.render({  cols:  [[ //標題欄    {checkbox: true}    ,{field: 'id', title: 'ID', width: 80}    ,{field: 'username', title: '用戶名', width: 120}  ]]}); 它等價于：<table class="layui-table" lay-data="{基礎參數(shù)}" lay-filter="test">  <thead>    <tr>      <th lay-data="{checkbox:true}"></th>      <th lay-data="{field:'id', width:80}">ID</th>      <th lay-data="{field:'username', width:180}">用戶名</th>    </tr>  </thead></table>

下面是一個二級表頭的例子：

JS：table.render({  cols:  [[ //標題欄    {field: 'username', title: '聯(lián)系人', width: 80, rowspan: 2} //rowspan即縱向跨越的單元格數(shù)    ,{field: 'amount', title: '金額', width: 80, rowspan: 2}    ,{align: 'center', title: '地址', colspan: 3} //colspan即橫跨的單元格數(shù)，這種情況下不用設置field和width  ], [    {field: 'province', title: '省', width: 80}    ,{field: 'city', title: '市', width: 120}    ,{field: 'county', title: '詳細', width: 300}  ]]}); 它等價于：<table class="layui-table" lay-data="{基礎參數(shù)}">  <thead>    <tr>      <th lay-data="{field:'username', width:80}" rowspan="2">聯(lián)系人</th>      <th lay-data="{field:'amount', width:120}" rowspan="2">金額</th>      <th lay-data="{align:'center'}" colspan="3">地址</th>    </tr>    <tr>      <th lay-data="{field:'province', width:80}">省</th>      <th lay-data="{field:'city', width:120}">市</th>      <th lay-data="{field:'county', width:300}">詳細</th>    </tr>  </thead></table>

需要說明的是，table模塊支持無限極表頭，你可按照上述的方式繼續(xù)擴充。核心點在于 rowspan 和 colspan 兩個參數(shù)的

接下來就是表頭里的一些參數(shù)設置

<1> field：設定字段名

table.render({  cols: [[    {field: 'id'} //其它參數(shù)在此省略    ,{field: 'username'}  ]]}); 等價于：<th lay-data="{field:'id'}"></th><th lay-data="{field:'username'}"></th>

<2> title：設定標題名稱

table.render({  cols: [[    {title: '郵箱'} //其它參數(shù)在此省略    ,{title: '簽名'}  ]]}); 等價于：<th lay-data="{}">郵箱</th> （PS：也可以把標題寫在lay-data里面，即 title:'郵箱'）<th lay-data="{}">簽名</th>

<3> width：設定列寬。列寬的設定也通常是必須的（“特殊列”除外，如：復選框列、工具列等），它關系到表格的整體美觀程度。

table.render({  cols: [[    {width: 80} //其它參數(shù)在此省略    ,{width: 120}  ]]}); 等價于：<th lay-data="{width:80}"></th><th lay-data="{width:120}"></th>

<4> checkbox：設定復選框。如果設置 true，則表示該列內(nèi)容為復選框，通常它被放在第一列。

table.render({  cols: [[    {checkbox: true} //其它參數(shù)在此省略    ,{field: 'id', title:'ID', width: 100}  ]]}); 等價于：<th lay-data="{checkbox:true}"></th><th lay-data="{field:'id', width:100}">ID</th>

還有需要注意的是，這里的LAY_CHECKED是和checkbox搭配使用的，如果設置 true，則表示復選框默認全部選中。

table.render({  cols: [[    {checkbox: true, LAY_CHECKED: true} //其它參數(shù)在此省略    ,{field: 'id', title:'ID', width: 100}  ]]}); 等價于：<th lay-data="{checkbox:true, LAY_CHECKED: true}"></th><th lay-data="{field:'id', width:100}">ID</th>

<5> space：設定空隙列。如果設置 true，則定義一個 15px 寬度無任何內(nèi)容的列。

table.render({  cols: [[ //其它參數(shù)在此省略    {space: true}    ,{field: 'id', title:'ID', width: 100}  ]]}); 等價于：<th lay-data="{space:true}"></th><th lay-data="{field:'id', width:100}">ID</th>

<6> sort：是否需要排序。如果設置 true，則在對應的表頭顯示排序icon，從而對列開啟排序功能。

注意：不推薦對值存在：數(shù)字和普通字符的列開啟排序，因為會進入字典序比對。比如：'賢心' > '2' > '100'，這可能并不是你想要的結(jié)果，但字典序排列算法（ASCII碼比對）就是這樣的，具體你也可以去了解一下字典序方面的知識。

table.render({  cols: [[    {sort:true} //其它參數(shù)在此省略    ,{field:'id', title:'ID', width:100}  ]]}); 等價于：<th lay-data="{sort:true}"></th><th lay-data="{field:'id', width:100}">ID</th>

<7> fixed：是否需要固定列。如果設置 true 或 'right'，則對應的列將會被固定在左或右，不隨滾動條而滾動。

table.render({  cols: [[    {fixed:true} //其它參數(shù)在此省略    ,{field:'id', title:'ID', width:100}    ,{field:'username', title:'姓名', width:120, fixed:'right'} //固定列在右  ]]}); 等價于：<th lay-data="{sort:true}"></th><th lay-data="{field:'id', width:100}">ID</th><th lay-data="{field:'username', width:120, fixed:'right'}">姓名</th>

<8> edit：是否允許編輯。如果設置 true，則對應列的單元格將會被允許編輯，目前只支持type="text"的input編輯。

table.render({  cols: [[    {edit:'text'} //其它參數(shù)在此省略    ,{field:'id', title:'ID', width:100}  ]]}); 等價于：<th lay-data="{edit:'text'}"></th><th lay-data="{field:'id', width:100}">ID</th>

<9> templet：自定義模版。在默認情況下，單元格的內(nèi)容是完全按照數(shù)據(jù)接口返回的content原樣輸出的，如果你想對某列的單元格添加鏈接等其它元素，你可以借助該參數(shù)來輕松實現(xiàn)。這是一個非常實用的功能，你的表格內(nèi)容會因此而豐富多樣。

table.render({  cols: [[    {field:'title', title: '文章標題', width: 200, templet: '#titleTpl'} //這里的templet值是模板元素的選擇器    ,{field:'id', title:'ID', width:100}  ]]}); 等價于：<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章標題</th><th lay-data="{field:'id', width:100}">ID</th>

事實上，templet也可以直接是一段html內(nèi)容，如：

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>' 注意：這里一定要被一層 <div></div> 包裹，否則無法讀取到模板

<10> toolbar：綁定工具條。通常你需要在表格的每一行加上 查看、編輯、刪除 這樣類似的操作按鈕，而 tool 參數(shù)就是為此而生，你因此可以非常便捷地實現(xiàn)各種操作功能。

tool 參數(shù)和 templet 參數(shù)的使用方式完全類似，通常接受的是一個選擇器，也可以是一段HTML字符。

table.render({  cols: [[    {field:'id', title:'ID', width:100}    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //這里的toolbar值是模板元素的選擇器  ]]}); 等價于：<th lay-data="{field:'id', width:100}">ID</th><th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>

下述是 toolbar 對應的模板，它可以存放在頁面的任意位置：

<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="" 是模板的關鍵所在，值可隨意定義。

接下來我們借助table模塊的工具條事件，完成不同的操作功能：

//監(jiān)聽工具條table.on('tool(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"  var data = obj.data; //獲得當前行數(shù)據(jù)  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結(jié)構(gòu)，并更新緩存      layer.close(index);      //向服務端發(fā)送刪除指令    });  } else if(layEvent === 'edit'){ //編輯    //do something        //同步更新緩存對應的值    obj.update({      username: '123'      ,title: 'xxx'    });  }});

以上是“l(fā)ayui中table模塊有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！