layui中的table模塊中的基礎參數應用

layui 的 table模塊是一個重頭，在基礎參數方面盡可能地做到友好，即：保證功能的前提而又避免過於繁雜的配置。基礎參數一般出現在以下幾種場景中：

場景一：下述 lay-data 里面的內容即為基礎參數項，切記：值要用單引號
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
 
場景二：下述方法中的鍵值即為基礎參數項
table.render({
  height: 300
  ,url: '/api/data'
});
 
更多場景：下述options即為含有基礎參數項的對象
> table.init('filter', options); //轉化靜態表格
> var tableObj = table.render({});
  tableObj.reload(options); //重載表格

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

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

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

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

JS：
table.render({
  cols:  [[ //標題欄
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用戶名', width: 120}
  ]]
});
 
它等價於：
<table class="layui-table" lay-data="{基礎參數}" 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: '聯系人', width: 80, rowspan: 2} //rowspan即縱向跨越的單元格數
    ,{field: 'amount', title: '金額', width: 80, rowspan: 2}
    ,{align: 'center', title: '地址', colspan: 3} //colspan即橫跨的單元格數，這種情況下不用設置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '詳細', width: 300}
  ]]
});
 
它等價於：
<table class="layui-table" lay-data="{基礎參數}">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:80}" rowspan="2">聯系人</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模塊支持無限極表頭，你可按照上述的方式繼續擴充。核心點在於 rowspan 和 colspan 兩個參數的

接下來就是表頭里的一些參數設置

<1> field：設定字段名

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

 

 <2> title：設定標題名稱

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

 

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

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

 

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

table.render({
  cols: [[
    {checkbox: true} //其它參數在此省略
    ,{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} //其它參數在此省略
    ,{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 寬度無任何內容的列。

table.render({
  cols: [[ //其它參數在此省略
    {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，從而對列開啟排序功能。

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

table.render({
  cols: [[
    {sort:true} //其它參數在此省略
    ,{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} //其它參數在此省略
    ,{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'} //其它參數在此省略
    ,{field:'id', title:'ID', width:100}
  ]]
});
 
等價於：
<th lay-data="{edit:'text'}"></th>
<th lay-data="{field:'id', width:100}">ID</th>

 

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

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內容，如：

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

 

<10> toolbar：綁定工具條。通常你需要在表格的每一行加上 查看、編輯、刪除 這樣類似的操作按鈕，而 tool 參數就是為此而生，你因此可以非常便捷地實現各種操作功能。tool 參數和 templet 參數的使用方式完全類似，通常接受的是一個選擇器，也可以是一段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模塊的工具條事件，完成不同的操作功能：

//監聽工具條
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的一些必要元素進行的理解與記錄。