怎么利用layui美化table数据表格

Introduction

Layui 是继 Bootstrap 后又一次成功的前端框架，依赖于 jQuery，为了更好地扩展，layui 蒸馏了很多经典的前端组件，如：表格(table)、表单(form)、弹窗(layer)、分页(paginator)、背景磁贴等常用组件。如果你正在使用layui开发，那么你一定需要更好地美化数据表格(table)。接下来我们将会利用 layui 框架并关联data表格来美化表单，让你的页面更具吸引力。

Getting started with Layui

首先，我们需要在项目中引入layui，你可以从layui官网中直接下载最新版的layui源码，或者使用CDN引入layui。

接下来，就可以开始使用layui的各种组件了。

Step 1: HTML

要创建一个 data table，我们需要在HTML中添加一个 table 元素，以及必要的数据：

  <table id="demo" lay-filter="test"></table>  
  <script type="text/html" id="toolbarDemo">  
    <div class="layui-btn-container">  
      <button class="layui-btn layui-btn-sm" lay-event="getSelected">获取选中行数据</button>  
      <button class="layui-btn layui-btn-sm" lay-event="setCheckData">选中行数据</button>  
    </div>  
  </script>  

Step 2: Javascript

接下来，我们需要使用Javascript为table添加数据，并调用Layui的表格组件渲染该table。以下是基本的Javascript代码：

  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
      url: '/demo/table/user/', //数据接口
      toolbar: '#toolbarDemo', //指向自定义工具栏模板选择器
      title: '用户数据表', //定义导出页的标题
      cols: [[ //表头
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'ID', width: 80, fixed: 'left'},
        {field: 'username', title: '用户名', width: 120},
        {field: 'sex', title: '性别', width: 80, sort: true},
        {field: 'city', title: '城市', width: 100},
        {field: 'sign', title: '签名', width: 200},
        {field: 'experience', title: '积分', width: 80, sort: true},
        {field: 'ip', title: 'IP', width: 120},
        {field: 'logins', title: '登录次数', width: 100, sort: true},
        {field: 'joinTime', title: '加入时间', width: 120},
        {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
      ]],
      page: true //开启分页
    });
  });

美化Table

接下来，我们使用Layui的CSS和JS来美化我们的Table。

Step 1: CSS

.layui-table-cell {
    height: auto !important;
    line-height: 30px !important;
    white-space: normal !important;
}
.laytable-cell-1-manage{
    text-align:center;
    white-space:nowrap;
}
.laytable-cell-1-username{
    text-align:center;
    white-space:nowrap;
}
.laytable-cell-1-state{
    text-align:center;
    white-space:nowrap;
}

Step 2: JS

table.render({
    elem: '#test'
    ,height: 415
    ,url: '/demo/table/user/'
    ,cols: [[
        {type:'checkbox', fixed:'left'}
        ,{field:'id', width:80, title: 'ID', sort: true, fixed:'left'}
        ,{field:'username', width:120, title: '用户名', sort: true,templet:function(d){
        },style:'height:54px;'}
        ,{field:'state', width:80, title: '状态', sort: true,templet:function(d){
            var str = d.state;
            if (str ==1 ) {
                return '正常';
            } else {
                return '冻结';
            }
        },style:'height:54px;'}
        ,{field:'sex', width:80, title: '性别', sort: true,templet:function(d){
            var str = d.sex;
            if (str == '0') {
                return '女';
            } else if (str == '1') {
                return '男';
            } else {
                return '';
            }
        },style:'height:54px;'}
        ,{field:'sign', title: '签名' ,style:'height:54px;'}
        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:180}
    ]]
    ,skin: 'nob' //行边框风格
    ,even: true //开启隔行背景
    ,cellMinWidth: 110 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,done: function(res, curr, count){
        $('.layui-table-cell').each(function(){
            var $this = $(this);
            $this.css('height', $this.height()+20);
        });
    }
});

Step 3: Result

最后一步就是来看看我们精致酷炫的table了！

总结

Layui 是一款非常强大的前端框架，在美化数据表格时也是非常好用的，通过上述的教程，相信你已经学会了利用 layui 框架美化数据表格。在使用时，我们可以根据自己的需求灵活变通。