使用Layuitable實現高效的數據管理

一、Layuitable簡介

Layuitable是一款基於Layui的開源表格插件。它具有可拓展性強、便於使用等特點，能夠在數據管理中提供很好的支持。使用Layuitable實現高效的數據管理，不僅可以提升數據管理效率，還能優化用戶交互體驗，更好地管理數據。

二、Layuitable如何提高數據管理效率

Layuitable具有以下幾方面的特點，可以幫助提高數據管理效率：

1.數據加載快速

Layuitable具有快速加載數據的能力，支持異步加載數據，可以將數據以JSON對象的方式返回到表格中。

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, sort: true, fixed: 'left'},
      {field: 'username', title: '用戶名', width:80},
      {field: 'sex', title: '性別', width:80, sort: true},
      {field: 'city', title: '城市', width:80}, 
      {field: 'sign', title: '簽名', width: 177},
      {field: 'experience', title: '積分', width: 80, sort: true},
      {field: 'score', title: '評分', width: 80, sort: true},
      {field: 'classify', title: '職業', width: 80},
      {field: 'wealth', title: '財富', width: 135, sort: true},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
});

2.支持異步刷新數據

當表格數據發生變化時，可以通過ajax方式實時從後台取得數據並更新表格中的數據。

table.reload('id', {
  url: '/demo/table/user/',
  where: { //設定異步數據接口的額外參數，任意設
    name: 'layui'
  }, 
  page: {
    curr: 1 //重新從第 1 頁開始
  }
}, 'data');

3.支持編輯數據

Layuitable支持行內編輯和彈出層編輯兩種方式，並且可以設置編輯權限。

table.render({
  elem: '#demo'
  ,url:'/demo/table/user/'
  ,cols: [[
    {type:'checkbox'}
    ,{field:'id', width:80, title: 'ID', sort: true}
    ,{field:'username', width:80, title: '用戶名'}
    ,{field:'email', title: '郵箱', minWidth: 150}
    ,{field:'Sign', title: '簽名'}
    ,{field:'sex', title: '性別', width:80, align: 'center'}
    ,{field:'city', title: '城市', width:100}
    ,{field:'experience', title: '積分', width:80, sort: true, align: 'center'}
    ,{field:'ip', title: 'IP', minWidth: 100}
    ,{field:'logins', title: '登入次數', minWidth: 100, align: 'center'}
    ,{field:'joinTime', title: '加入時間', minWidth: 100, sort: true}
    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
  ]]
  ,id: 'testReload'
  ,page: true
  ,height: 310
  ,cellMinWidth: 30 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
});

// 監聽性別操作
form.on('switch(sexDemo)', function(obj){
  layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
});

//監聽工具條
table.on('tool(test)', function(obj){
  var data = obj.data;
  if(obj.event === 'del'){
    layer.confirm('真的刪除行么', function(index){
      obj.del();
      layer.close(index);
    });
  } else if(obj.event === 'edit'){
    layer.prompt({
      formType: 2
      ,value: data.email
    }, function(value, index){
      obj.update({
        email: value
      });
      layer.close(index);
    });
  }
});

var $ = layui.$, active = {
  reload: function(){
    var demoReload = $('#demoReload');
    
    //執行重載
    table.reload('testReload', {
      page: {
        curr: 1 //重新從第 1 頁開始
      }
      ,where: {
        key: {
          id: demoReload.val()
        }
      }
    });
  }
};

$('.demoTable .layui-btn').on('click', function(){
  var type = $(this).data('type');
  active[type] ? active[type].call(this) : '';
});

4.支持自定義列的類型和數據格式

Layuitable支持在列中自定義數據類型和格式，可以滿足不同的需求。

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo'
    ,height: 480
    ,url: '/demo/table/user/'
    ,cellMinWidth: 80
    ,cols: [[
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
      ,{field:'username', title:'用戶名', width:120, edit: 'text'}
      ,{field:'email', title:'郵箱', width:150, edit: 'text', templet: function(res){
        return ''+ res.email +''
      }}
      ,{field:'sex', title:'性別', width:80, edit: 'text', sort: true}
      ,{field:'city', title:'城市', width:100, edit: 'text'}
      ,{field:'sign', title:'簽名', width:120, edit: 'text'}
      ,{field:'experience', title:'積分', width:80, edit: 'text', sort: true}
      ,{field:'score', title:'評分', width:80, edit: 'text', sort: true}
      ,{field:'classify', title:'職業', width:100, edit: 'text'}
      ,{field:'wealth', title:'財富', width:135, edit: 'text', sort: true}
      ,{fixed: 'right', title:'操作', width:150, toolbar: '#barDemo', align:'center'}
    ]]
    ,page: true
  });
});

三、Layuitable如何優化用戶交互體驗

Layuitable具有以下幾方面的特點，可以優化用戶交互體驗：

1.支持行內工具條

Layuitable支持在每一行後面添加工具條，用戶鼠標移入行內時即可操作工具條。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格操作列演示 </title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

<table class="layui-table" lay-skin="line">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>ID</th>
      <th>登錄名</th>
      <th>加入時間</th>
      <th>操作</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>10001</td>
      <td>user-0</td>
      <td>2017-01-01</td>
      <td>
        <div class="layui-btn-group">
          <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
          <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
          <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<script src="/layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
    ,form = layui.form;
  
  //監聽工具條
  $('.layui-table').on('tool(test)', function(obj){ //註：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
    var data = obj.data //獲得當前行數據
    ,layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      layer.confirm('真的刪除行么', function(index){
        obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
        layer.close(index);
      });
    } else if(layEvent === 'edit'){
      layer.alert('編輯操作');
    }
  });
});
</script>

</body>
</html>

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