怎么使用layui中的table模塊中的基礎(chǔ)參數(shù)

這篇文章將為大家詳細(xì)講解有關(guān)怎么使用layui中的table模塊中的基礎(chǔ)參數(shù)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

導(dǎo)語(yǔ)：

layui是由職業(yè)前端傾情打造，面向全層次的前后端開發(fā)者，低門檻開箱即用的前端 UI 解決方案。

layui 的 table模塊是一個(gè)重頭，在基礎(chǔ)參數(shù)方面盡可能地做到友好，即：保證功能的前提而又避免過(guò)于繁雜的配置?；A(chǔ)參數(shù)一般出現(xiàn)在以下幾種場(chǎng)景中：

場(chǎng)景一：下述 lay-data 里面的內(nèi)容即為基礎(chǔ)參數(shù)項(xiàng)，切記：值要用單引號(hào)
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>

場(chǎng)景二：下述方法中的鍵值即為基礎(chǔ)參數(shù)項(xiàng)
table.render({
  height: 300
  ,url: '/api/data'
});

更多場(chǎng)景：下述options即為含有基礎(chǔ)參數(shù)項(xiàng)的對(duì)象
> table.init('filter', options); //轉(zhuǎn)化靜態(tài)表格
> var tableObj = table.render({});
  tableObj.reload(options); //重載表格

接下來(lái)看一下基礎(chǔ)元素有哪些？

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

HTML：
<table id="test"></table>

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

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

JS：
table.render({
  cols:  [[ //標(biāo)題欄
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用戶名', width: 120}
  ]]
});

它等價(jià)于：
<table class="layui-table" lay-data="{基礎(chǔ)參數(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>

下面是一個(gè)二級(jí)表頭的例子：

JS：
table.render({
  cols:  [[ //標(biāo)題欄
    {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ù)，這種情況下不用設(shè)置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '詳細(xì)', width: 300}
  ]]
});
 
它等價(jià)于：
<table class="layui-table" lay-data="{基礎(chǔ)參數(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}">詳細(xì)</th>
    </tr>
  </thead>
</table>

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

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

<1> field：設(shè)定字段名

table.render({
  cols: [[
    {field: 'id'} //其它參數(shù)在此省略
    ,{field: 'username'}
  ]]
});

等價(jià)于：
<th lay-data="{field:'id'}"></th>
<th lay-data="{field:'username'}"></th>

<2> title：設(shè)定標(biāo)題名稱

table.render({
  cols: [[
    {title: '郵箱'} //其它參數(shù)在此省略
    ,{title: '簽名'}
  ]]
});

等價(jià)于：
<th lay-data="{}">郵箱</th> （PS：也可以把標(biāo)題寫在lay-data里面，即 title:'郵箱'）
<th lay-data="{}">簽名</th>

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

table.render({
  cols: [[
    {width: 80} //其它參數(shù)在此省略
    ,{width: 120}
  ]]
});

等價(jià)于：
<th lay-data="{width:80}"></th>
<th lay-data="{width:120}"></th>

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

table.render({
  cols: [[
    {checkbox: true} //其它參數(shù)在此省略
    ,{field: 'id', title:'ID', width: 100}
  ]]
});

等價(jià)于：
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:'id', width:100}">ID</th>

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

table.render({
  cols: [[
    {checkbox: true, LAY_CHECKED: true} //其它參數(shù)在此省略
    ,{field: 'id', title:'ID', width: 100}
  ]]
});

等價(jià)于：
<th lay-data="{checkbox:true, LAY_CHECKED: true}"></th>
<th lay-data="{field:'id', width:100}">ID</th>

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

table.render({
  cols: [[ //其它參數(shù)在此省略
    {space: true}
    ,{field: 'id', title:'ID', width: 100}
  ]]
});

等價(jià)于：
<th lay-data="{space:true}"></th>
<th lay-data="{field:'id', width:100}">ID</th>

<6> sort：是否需要排序。如果設(shè)置 true，則在對(duì)應(yīng)的表頭顯示排序icon，從而對(duì)列開啟排序功能。

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

table.render({
  cols: [[
    {sort:true} //其它參數(shù)在此省略
    ,{field:'id', title:'ID', width:100}
  ]]
});

等價(jià)于：
<th lay-data="{sort:true}"></th>
<th lay-data="{field:'id', width:100}">ID</th>

<7> fixed：是否需要固定列。如果設(shè)置 true 或 'right'，則對(duì)應(yīng)的列將會(huì)被固定在左或右，不隨滾動(dòng)條而滾動(dòng)。

table.render({
  cols: [[
    {fixed:true} //其它參數(shù)在此省略
    ,{field:'id', title:'ID', width:100}
    ,{field:'username', title:'姓名', width:120, fixed:'right'} //固定列在右
  ]]
});

等價(jià)于：
<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：是否允許編輯。如果設(shè)置 true，則對(duì)應(yīng)列的單元格將會(huì)被允許編輯，目前只支持type="text"的input編輯。

table.render({
  cols: [[
    {edit:'text'} //其它參數(shù)在此省略
    ,{field:'id', title:'ID', width:100}
  ]]
});

等價(jià)于：
<th lay-data="{edit:'text'}"></th>
<th lay-data="{field:'id', width:100}">ID</th>

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

table.render({
  cols: [[
    {field:'title', title: '文章標(biāo)題', width: 200, templet: '#titleTpl'} //這里的templet值是模板元素的選擇器
    ,{field:'id', title:'ID', width:100}
  ]]
});

等價(jià)于：
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章標(biāo)題</th>
<th lay-data="{field:'id', width:100}">ID</th>

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

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

<10> toolbar：綁定工具條。通常你需要在表格的每一行加上 查看、編輯、刪除 這樣類似的操作按鈕，而 tool 參數(shù)就是為此而生，你因此可以非常便捷地實(shí)現(xiàn)各種操作功能。tool 參數(shù)和 templet 參數(shù)的使用方式完全類似，通常接受的是一個(gè)選擇器，也可以是一段HTML字符。

table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //這里的toolbar值是模板元素的選擇器
  ]]
});

等價(jià)于：
<th lay-data="{field:'id', width:100}">ID</th>
<th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>

下述是 toolbar 對(duì)應(yīng)的模板，它可以存放在頁(yè)面的任意位置：

<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 語(yǔ)法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-mini" lay-event="check">審核</a>
  {{#  } }}
</script>

注意：屬性 lay-event="" 是模板的關(guān)鍵所在，值可隨意定義。

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

//監(jiān)聽工具條
table.on('tool(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"
  var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)
  var layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值
  var tr = obj.tr; //獲得當(dāng)前行 tr 的DOM對(duì)象

  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //刪除
    layer.confirm('真的刪除行么', function(index){
      obj.del(); //刪除對(duì)應(yīng)行（tr）的DOM結(jié)構(gòu)，并更新緩存
      layer.close(index);
      //向服務(wù)端發(fā)送刪除指令
    });
  } else if(layEvent === 'edit'){ //編輯
    //do something

    //同步更新緩存對(duì)應(yīng)的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  }
});

關(guān)于“怎么使用layui中的table模塊中的基礎(chǔ)參數(shù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。