layui學習筆記——表格table

一、三種初始化渲染方式

（1）自動化渲染

一、三種初始化渲染方式
（1）自動化渲染
<table class="layui-table" lay-data="{基礎參數，詳見右側目錄：基礎參數選項}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{表頭基礎參數}">標題</th>
      ……
    </tr>
  </thead>
</table>

（2）方法級渲染（推薦）

<table id="demo"></table>
var table = layui.table;
//執行渲染
table.render({
  elem: '#demo' //指定原始表格元素選擇器（推薦id選擇器）
  ,height: 315 //容器高度
  ,cols: [{}] //設置表頭
});

（3）轉換靜態表格

var table = layui.table;
//轉換靜態表格
table.init('demo', {
  height: 315 //設置高度
  //支持全部基礎參數
});

二、基礎參數選項

（1）使用場景

場景一：下述 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); //重載表格

（2）options

table.render({ 
  elem: '#test' //或 elem: document.getElementById('test') 等
  , cols:  [[ //標題欄
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用戶名', width: 120}
  ]]
, url: '/api/data/'//接口地址。默認會自動傳遞兩個參數：?page=1&limit=30（該參數可經過 request 自定義）page 表明當前頁碼、limit 表明每頁數據量 
  //where: {token: 'sasasas', id: 123} //若是無需傳遞額外參數，可不加該參數
  //method: 'post' //若是無需自定義HTTP類型，可不加該參數
  //request: {} //若是無需自定義請求參數，可不加該參數
  //response: {} //若是無需自定義數據響應名稱，可不加該參數
  done: function(res, curr, count){
    //若是是異步請求數據方式，res即爲你接口返回的信息。
    //若是是直接賦值的方式，res即爲：{data: [], count: 99} data爲當前頁數據、count爲數據總長度
    console.log(res);
    //獲得當前頁碼
    console.log(curr); 
    //獲得數據總量
    console.log(count);
  }
,  initSort: {
    field: 'id' //排序字段，對應 cols 設定的各字段名
    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默認排序
  }
, page: true
,  limits: [30,60,90,150,300]
  ,limit: 60 //默認採用60
, loading: false// 是否顯示加載條
, id: 'idTest'  //該參數在對錶格的數據操做方法上是必要的傳遞條件，它是表格容器的索引。
,width: 1000// 設定容器寬度
,  skin: 'line' //行邊框風格
  ,even: true //開啓隔行背景
  ,size: 'sm' //小尺寸的表格
});

//表格重載
table.reload('idTest', options);

三、基礎方法

> table.set(options); //設定全局默認參數。options即各項基礎參數
> table.on('event(filter)', callback); //事件監聽。filter爲容器lay-filter設定的值
> table.init(filter, options); //filter爲容器lay-filter設定的值，options即各項基礎參數。
> table.checkStatus(id); //獲取表格選中行。id即爲id參數對應的值
> table.render(options); //用於表格方法級渲染，核心方法。

四、事件監聽

（1）監聽複選框選擇

table.on('checkbox(test)', function(obj){
  console.log(obj.checked); //當前是否選中狀態
  console.log(obj.data); //選中行的相關數據
  console.log(obj.type); //若是觸發的是全選，則爲：all，若是觸發的是單選，則爲：one
});

（2）監聽單元格編輯

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; //更新緩存中的值
});

（3）監聽工具條點擊

監聽排序切換
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 //排序方式
    }
  });
});