layui動態表格詳解

一、layui動態表格日期

在實際項目開發中，經常需要在表格中展示日期數據。 layui提供了非常方便的日期格式化功能，只需要在對應表格列的templet屬性中加入格式化字符串即可。

<table id="demo" lay-filter="test"></table>
&lt;script&gt;
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo'
    ,url:'/demo/table/user/'
    ,page:true
    ,cols: [[
      {field:'id', title:'ID', width:80}
      ,{field:'username', title:'用戶名', width:120}
      ,{field:'email', title:'郵箱', width:150}
      ,{field:'sign', title:'簽名'}
      ,{field:'sex', title:'性別'}
      ,{field:'city', title:'城市'}
      ,{field:'experience', title:'積分', width:80, sort: true}
      ,{field:'ip', title:'IP'}
      ,{field:'logins', title:'登入次數', width:100, sort: true}
      ,{field:'joinTime', title:'加入時間', width:120, sort: true, templet: function(d){
        return layui.util.toDateString(d.joinTime, 'yyyy-MM-dd HH:mm:ss');
      }}
    ]]
  });
});
&lt;/script&gt;

以上代碼演示了在表格中展示某用戶加入時間的日期格式化操作。templet屬性中傳入函數，使用Layui自帶的util.toDateString函數對日期格式化。

二、layui動態表格監聽input

表格中的輸入框改變後需要做一些操作，如實時更新本地數據或請求後端接口保存數據。Layui提供了監聽表格input事件的方法。

table.on('edit(test)', function(obj){
  var value = obj.value //得到修改後的值
  ,data = obj.data //得到所在行所有鍵值
  ,field = obj.field; //得到字段
  //後續操作...
});

以上代碼演示了監聽表格test中所有input的修改事件，代碼裡面可以根據需求進一步操作。

三、layui動態表格分頁

表格分頁是Layui表格組件非常重要的一個功能，可以輕鬆地實現數據展示效果與用戶體驗的平衡。而在Layui中設置分頁也是一件非常方便的事情。只需要在表格渲染時定義page屬性即可。

<table id="demo" lay-filter="test"></table>
&lt;script&gt;
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo'
    ,url:'/demo/table/user/'
    ,page:true
    ,cols: [[
      {field:'id', title:'ID', width:80}
      ,{field:'username', title:'用戶名', width:120}
      ,{field:'email', title:'郵箱', width:150}
      ,{field:'sign', title:'簽名'}
      ,{field:'sex', title:'性別'}
      ,{field:'city', title:'城市'}
      ,{field:'experience', title:'積分', width:80, sort: true}
      ,{field:'ip', title:'IP'}
      ,{field:'logins', title:'登入次數', width:100, sort: true}
      ,{field:'joinTime', title:'加入時間', width:120, sort: true}
    ]]
  });
});
&lt;/script&gt;

以上代碼演示了在表格中添加分頁的代碼，需要將page屬性設置為true。當然，在實際使用中，我們還可以對分頁進行自定義設置。如設置每頁展示數量、添加分頁信息提示語等。

四、layui動態表格輸入框

輸入框是常見的表格組件，Layui為表格中的輸入框提供了非常方便的模板渲染方式。

<table id="demo" lay-filter="test"></table>
&lt;script&gt;
layui.use(['table', 'form'], function(){
  var table = layui.table;
  var form = layui.form;
  
  //同時綁定多個表格渲染
  table.render({
    elem: '#demo1'
    ,data: [{
      "id": "10001"
      ,"username": "杜甫"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"experience": "116"
      ,"ip": "192.168.0.8"
      ,"logins": "108"
      ,"joinTime": "2016-10-14"
    },{
      "id": "10002"
      ,"username": "李白"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"experience": "12"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
    }]
    ,page: true
    ,cols: [[
      {field:'id', title:'ID', width:80}
      ,{field:'username', title:'用戶名', width:120, edit: 'text'}
      ,{field:'email', title:'郵箱', width:150, edit: 'text'}
      ,{field:'sex', title:'性別', width:80, edit: 'text', sort: true}
      ,{field:'city', title:'城市', edit: 'text'}
      ,{field:'experience', title:'積分', width:80, edit: 'text', sort: true}
      ,{field:'ip', title:'IP', width:120, edit: 'text'}
      ,{field:'logins', title:'登入次數', width:100, edit: 'text', sort: true}
      ,{field:'joinTime', title:'加入時間', width:120}
    ]]
  });
  
  //監聽單元格編輯
  table.on('edit(test)', function(obj){
    console.log(obj.field); //當前編輯的字段名
    console.log(obj.value); //當前編輯的值
    console.log(obj.data); //所在行的所有相關數據
   
    //提交後台
  });
});
&lt;/script&gt;

以上代碼演示了如何渲染一個帶有輸入框的表格，需要在對應的列設置edit屬性，並在對應單元格渲染函數中添加edit屬性值，此時表格對應單元格將會渲染一個輸入框。同時，需要監聽表格中所有的編輯事件，並在回調函數中進行處理。

五、layui動態表格亂碼

在前後端分離的開發中，數據傳輸往往採用異步傳輸，ajax傳遞的JSON數據格式是UTF-8的。當我們出現中文亂碼時，需要指定編碼格式為UTF-8。

<table id="demo" lay-filter="test"></table>
&lt;script&gt;
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo'
    ,url:'/demo/table/user/'
    ,page:true
    ,cols: [[
      {field:'id', title:'ID', width:80}
      ,{field:'username', title:'用戶名', width:120}
      ,{field:'email', title:'郵箱', width:150}
      ,{field:'sign', title:'簽名'}
      ,{field:'sex', title:'性別'}
      ,{field:'city', title:'城市'}
      ,{field:'experience', title:'積分', width:80, sort: true}
      ,{field:'ip', title:'IP'}
      ,{field:'logins', title:'登入次數', width:100, sort: true}
      ,{field:'joinTime', title:'加入時間', width:120, sort: true, templet: function(d){
        return layui.util.toDateString(d.joinTime, 'yyyy-MM-dd HH:mm:ss');
      }}
    ]]
    ,text: {
        none: '暫無相關數據'
    }
    ,contentType: 'application/json; charset=utf-8'
    ,dataType: 'json'
  });
});
&lt;/script&gt;

以上代碼演示了contentType和dataType的設置，使用contentType指定請求數據格式為’application/json; charset=utf-8’，使用dataType指定數據解析格式為json。

六、layui動態表格圖片上傳

表格中涉及到圖片上傳操作的時候，Layui提供了非常方便的方式。

<table id="test" lay-filter="demo">
&lt;script&gt;
layui.use(['table', 'upload'], function(){
  var table = layui.table;
  var upload = layui.upload;
  
  //單元格渲染
  table.render({
    elem: '#test'
    ,url: '/demo/table/user/'
    ,cols: [[
      {checkbox: true}
      ,{field:'id', title:'ID', width:80}
      ,{field:'username', title:'用戶名', width:120}
      ,{field:'email', title:'郵箱', width:150, edit: 'text'}
      ,{field:'sign', title:'簽名'}
      ,{field:'sex', title:'性別'}
      ,{field:'city', title:'城市'}
      ,{field:'experience', title:'積分', width:80, sort: true}
      ,{field:'ip', title:'IP'}
      ,{field:'logins', title:'登入次數', width:100, sort: true}
      ,{field:'joinTime', title:'加入時間', width:120, sort: true
        ,templet: function(d){
          return layui.util.toDateString(d.joinTime, 'yyyy-MM-dd HH:mm:ss');
        }
      }
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]]
    ,page: true
    ,id: 'testReload'
    ,response: {
        statusCode: 200 //規定成功的狀態碼，默認：0
    }
    ,toolbars: [{
      icon: 'layui-icon-upload'
      ,title: '批量上傳'
      ,event: 'uploadImg'
    }]
  });
  
  //上傳圖片
  upload.render({
    elem: '#test'
    ,url: '' //圖片上傳接口
    ,method: 'post'
    ,accept: 'images'
    ,auto: false
    ,bindAction: '.uploadImg'
    ,headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer '+ sessionStorage.getItem('token')
    }
    ,done: function(res){
      console.log(res)
    }
    ,error: function () {
      layer.msg('上傳失敗，請檢查網絡');
    }
  });
}); 
&lt;/script&gt;

以上代碼演示了涉及圖片上傳圖片預覽的Layui表格代碼實現方式。需要在對應列中添加toolbar屬性，並在建造表格的時候添加toolbars屬性，同時對應單元格需要添加manage屬性並使用上傳文件組件進行上傳操作。

七、layui動態表格怎麼傳參

Layui動態表格可以通過params參數和where參數進行參數傳遞。其中，params發生在最初始的請求上，而where參數則是發生在數據重載時的參數。

//params參數傳遞
table.render({
  elem: "#demo"
  ,url: "url"
  ,params: {
    test: 123
  }
  ,where: {
    test: 123
  }
})

以上代碼對兩種情況的參數進行了展示，params直接在定義表格的時候對請求的params進行定義，而where在數據重載時進行定義。

八、layui動態表格日期選擇器

Layui的日期選擇器非常方便易用，同時與Layui表格的結構銜接地非常緊密。我們可以在表格的渲染函數中對需要使用到時間的列添加lay-event屬性為date，然後在監聽事件中對其進行日期選擇器的綁定。

//日期選擇器綁定

table.render({

elem: "#tableTest5"

,id: "
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/296141.html