使用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>