layui table

layui提供了table工具，具有非常丰富的功能，下面记录一次table的开发
首先是html，在html中我们有一个table要用layui，代码如下：

 <table class="layui-hide" id="subTable" lay-filter="subTableEvent"></table>

然后我们通过layui内置模块对该table进行数据加载和渲染，以及一些事件绑定等

<script src="/layui/layui.js"></script>
<script  th:inline="none"> //th:inline="none"为解决我引用了thymeleaf，下面的cols后面有两个[导致的报错问题
    layui.use(['table','element'], function(){
        var table = layui.table,element = layui.element;
        table.render({
            elem: '#subTable'   //html中要绑定table的id
            ,height: 420       //设置表格高度
            ,url: '/user/table/subject'         //后台接口
            ,title: '用户表'                   //表名
            ,page: true                     //开启分页
            ,toolbar:'default'              //表头工具栏，default用了默认的，可以自定义工具栏模板，如下面的toolbar
             ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},          //设置复选框
                {field:'subject_no', title:'主键值'}           //字段值
                ,{field:'subject_code', title:'编号',width:150}
                ,{field:'subject_nam', title: '名称'}
                ,{field:'user_type', title: '用户类型'}
                ,{field:'seq_num', title:'排序'}
                ,{fixed: 'right', width: 165, title: '操作', align:'center', toolbar: '#bar'} //最后加了工具栏一列，绑定了下面的bar模板
            ]]

        });

        //监听行工具事件
        table.on('tool(subTableEvent)', function(obj){ //注：tool 是工具条事件名（固定），subTableEvent 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data                 //获得当前行数据
                ,layEvent = obj.event;          //获得 lay-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.msg('编辑操作');
            }
        });
        //监听头工具栏事件
        table.on('toolbar(subTableEvent)', function(obj){ //注：toolbar 是工具条事件名（固定），subTableEvent 是 table 原始容器的属性 lay-filter="对应的值"
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });
    });
</script>
<script type="text/html" id="bar">
//自定义工具栏，此处的工具栏绑定在了列上，也可以绑定到表头工具栏
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbar">
//自定义工具栏，可将toolbar：‘default’换成 toolbar：‘#toobar’进行引用
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>

后台采用了springboot

   @ResponseBody
    @RequestMapping(value = "/user/table/subject" , method = RequestMethod.GET , produces="application/json;charset=utf-8")
    public JSONObject getModelInfo(){
        JSONObject subjectJo = subjectService.getSubjectInfoFormatTable();
        return subjectJo;
    }

package com.base.myweb.service.serviceImpl;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.base.myweb.mapper.SubjectMapper;
import com.base.myweb.pojo.Subject;
import com.base.myweb.service.SubjectService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class SubjectServiceImpl implements SubjectService {

    @Autowired
    SubjectMapper subjectMapper;

    @Override
    public JSONObject getSubjectInfoFormatTable() {
        JSONObject subjectJo = new JSONObject();
        List<Subject> subjectList = subjectMapper.selectList(null);
        JSONArray dataArr = new JSONArray();
        for (Subject subject:subjectList ) {
            JSONObject subJo = new JSONObject();
            subJo.put("subject_no",String.valueOf(subject.getSubjectNo()));
            subJo.put("subject_code",subject.getSubjectCode());
            subJo.put("subject_nam",subject.getSubjectNam());
            subJo.put("user_type",subject.getUserType());
            subJo.put("seq_num",String.valueOf(subject.getSeqNum()));
            dataArr.add(subJo);
        }
        subjectJo.put("data",dataArr);
        subjectJo.put("count",subjectList.size());
        subjectJo.put("msg","");
        subjectJo.put("code",0);
        return subjectJo;
    }
}

访问后台获取到的数据格式如下：

{
    "msg": "",
    "code": 0,
    "data": [
        {
            "subject_code": "question",
            "user_type": "customer",
            "subject_nam": "Quest",
            "subject_no": "1",
            "seq_num": "1"
        },
        {
            "subject_code": "share",
            "user_type": "customer",
            "subject_nam": "Share",
            "subject_no": "2",
            "seq_num": "2"
        },
        {
            "subject_code": "notice",
            "user_type": "admin",
            "subject_nam": "Notice",
            "subject_no": "3",
            "seq_num": "5"
        },
        {
            "subject_code": "suggest",
            "user_type": "customer",
            "subject_nam": "Suggest",
            "subject_no": "4",
            "seq_num": "4"
        },
        {
            "subject_code": "discuss",
            "user_type": "customer",
            "subject_nam": "Discuss",
            "subject_no": "5",
            "seq_num": "3"
        }
    ],
    "count": 5
}

最后帖一张效果图，似乎checkbox样式存在一点问题

我们在js的table.on中绑定了对应的方法，列的工具栏和表头的工具栏都是可以进行方法定义并使用的，表头右侧的显示列，导出和打印功能不需要我们进行处理就可使用。