layui table的使用与封装

1.版本与封装方式

layui-v2.5.4
出于需求的需要,未使用官方所推荐的layui.use()相关方式进行调用.通过了layui.table.render()的非模块化方式（即所有模块一次性加载)进行调用
将layui table的常用方法以字面量的方式进行保存,在其他页面进行调用实现功能.

2.引用

<!-- layui的样式包 -->
<link rel="stylesheet" href="${request.contextPath}/skins/layui/css/layui.css" media="all"/>

<!-- layui的js,模块化使用 -->
<!--<script type="text/javascript" src="${request.contextPath}/skins/layui/layui.js"></script>-->

<!--layui的js,可非模块化 -->
<script type="text/javascript" src="${request.contextPath}/skins/layui/layui.all.js"></script>

3.代码

/*
    * 参考示例:
    * https://www.layui.com/doc/modules/table.html
    * 封装了layui_table的一些常用功能
    * */
    var layui_table = {
        //表格渲染结束后的表格对象
        tableins: null,
        //用于创建表格的参数
        table_para: {
            elem: '#table_div'
            //容器唯一 id.id 是对表格的数据操作方法上是必要的传递条件
            , id: "table_id"
            , height: 400
            //数据接口
            // ,url: '${request.contextPath}/user/query'
            //接口http请求类型
            , method: 'get'
            //默认每页数据条数
            , limit: 20
            //开启分页
            , page: true
            //开启表格头部工具栏区域
            // ,toolbar:"#toolbarDemo"
            //默认工具
            , defaultToolbar: ['filter', 'exports', 'print']
            //其他请求参数
            , where: {}
            //定义请求时相关分页参数
            , request: {
                //页码的参数名称,默认：page
                pageName: 'current'
                //每页数据量的参数名,默认：limit
                , limitName: 'size'
            }
            //对分页返回数据进行转换
            , parseData: function (res) {
                return {
                    //解析接口状态
                    "code": res.code,
                    //解析提示文本
                    "msg": res.msg,
                    //解析数据长度
                    "count": res.data.total,
                    //解析数据列表
                    "data": res.data.records
                };
            }
            // ,cols: [[ //表头
            //     {field: 'id', title: 'id', sort: true,type:'checkbox', fixed: 'left'}
            //     ,{field: 'id', title: 'ID'}
            //     ,{field: 'username', title: '用户名'}
            //     ,{field: 'password', title: '密码'}
            //     ,{field: 'sex', title: '性别'}
            //     ,{field: 'email', title: '邮箱'}
            //     ,{field: 'phone', title: '手机号'}
            //     ,{field: 'remark', title: '备注'}
            // ]]
        },
        //设置表格渲染的核心参数 url和表头信息,表格头部工具栏区域(script的id)
        set_table_data: function (url, cols, toolbar) {
            layui_table.table_para.toolbar = toolbar;
            layui_table.table_para.url = url;
            layui_table.table_para.cols = cols
        },
        //设置表格渲染的核心参数 url,限制条件,表头信息,表格头部工具栏区域(script的id)
        set_table_data_where: function (url,where, cols, toolbar) {
            layui_table.table_para.toolbar = toolbar;
            layui_table.table_para.where=where;
            layui_table.table_para.url = url;
            layui_table.table_para.cols = cols
        },
        //更新表格的参数
        update_table_para:function(para){
            if(para!=null){
                for(var key in para){
                    layui_table.table_para[key]=para[key];
                }
            }
        },
        //表格渲染
        table_render: function (para) {
            //预设表格高度
            layui_table.table_para.height= $("body").height()-80;
            //更新参数
            layui_table.update_table_para(para);
            layui_table.tableins = layui.table.render(layui_table.table_para);
        },

        //表格搜索 参数:搜索参数
        search: function (search_para) {
            var curr_page=1;
            // 将搜索的页码设置为当前表格的页码
            // curr_page=$(".layui-laypage-em").next().html();
            var search_para = {
                where: search_para,
                page: {
                    curr: curr_page
                }
            }
            layui.table.reload(layui_table.table_para.id, search_para)
        },

        //设置点击表格行,进行选中
        click_line_checked: function () {
            //https://fly.layui.com/jie/31942/
            $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {
                var index = $(this).attr('data-index');
                var tableBox = $(this).parents('.layui-table-box');
                if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
                    tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l")
                } else {
                    tableDiv = tableBox.find(".layui-table-body.layui-table-main")
                }
                // 加上下面的,限定只能选中一行数据
                // var trs = tableDiv.find(".layui-unselect.layui-form-checkbox.layui-form-checked").parent().parent().parent();
                // for (var i = 0; i < trs.length; i++) {
                //     var ind = $(trs[i]).attr("data-index");
                //     if (ind != index) {
                //         var checkCell = tableDiv.find("tr[data-index=" + ind + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
                //         if (checkCell.length > 0) {
                //             checkCell.click()
                //         }
                //     }
                // }
                var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
                if (checkCell.length > 0) {
                    checkCell.click()
                }
            });
            $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
                e.stopPropagation()
            });
        },

        //获取当前选中行的数据
        get_checked_data: function () {
            //获取选中行对象
            var checkStatus = layui.table.checkStatus(layui_table.table_para.id);
            //获取数据
            return checkStatus.data;
        },

        //要求选中一条数据,且返回id
        selectOne: function () {
            var table_data = layui_table.get_checked_data();
            if (table_data == null) {
                layer.msg("无法获取选中数据", {icon: 2});
                return null;
            }
            if (table_data.length != 1) {
                if (table_data.length == 0) {
                    layer.msg("至少要选中一条数据", {icon: 2});
                } else {
                    layer.msg("只能选择一条数据", {icon: 2});
                }
                return null;
            }
            var one_id = paraGetOneId(table_data);
            if (one_id == null) {
                layer.msg("无法获取选中行id", {icon: 2});
                return null;
            }
            return one_id;
        },

        //要求选中多条数据,且返回id
        selectMany: function () {
            var table_data = layui_table.get_checked_data();
            if (table_data == null) {
                layer.msg("无法获取选中数据", {icon: 2});
                return null;
            }
            if (table_data.length < 1) {
                layer.msg("至少要选中一条数据", {icon: 2});
                return null;
            }
            var many_id = paraGetId(table_data);
            if (many_id == null) {
                layer.msg("无法获取选中行id", {icon: 2});
                return null;
            }
            return many_id;
        },
        //在表头,以指定格式进行时间转换
        date_format: function (date, format) {
            if(format==null){
                format="yyyy-MM-dd hh:mm:ss";
            }
            if (!isEmpty(date)) {
                return new Date(date).format(format)
            }
            return "";
        }
    }

引用到的方法 paraGetOneId和paraGetId,paraArrayToLiteral.
进行设置 jQuery.ajaxSettings.traditional = true; ,能够便捷的传递数组参数

//获取字面量数组的第一个id项
function paraGetOneId(para) {
    if (para.length == 0) {
        return null;
    } else {
        var temp = para[0];
        return temp.id;
    }
}
//获取字面量数组的id项
function paraGetId(para) {
    var ids = [];
    if (para.length == 0) {
        return null;
    }
    for (var i = 0; i < para.length; i++) {
        ids.push(para[i].id)
    }
    return ids;
}
//将ajax()、post()请求时的数组参数视为一个数组,而不是多个数组参数
jQuery.ajaxSettings.traditional = true;

//form的封装参数数组转为参数字面量
function paraArrayToLiteral(para) {
    var literal = {};
    for (var i = 0; i < para.length; i++) {
        var key=para[i].name;
        //如果当前值已经存在,说明有一个参数是数组
        if(literal[key]!=null){
            //把value改成数组类型,储存所有值
            var curr=literal[key];
            if((typeof curr)=="object"){
                curr.push(para[i].value)
                literal[key]=curr;
            }else{
                var temp=new Array()
                temp.push(curr);
                temp.push(para[i].value)
                literal[key]=temp;
            }
        }else{
            literal[key] = para[i].value
        }

    }
    return literal;
}

在与后端的分页代码进行整合上,有两种方式
一是后端兼容前端,在后端加上一个转换的步骤,将相关的数据按照layui的规范进行set
二是前端兼容后端,在表格参数上设置layui需要的数据对应到的后端数据
当前使用的是第二种方法,设置如下(在上面的代码也有):

         //定义请求时相关分页参数
          , request: {
              //页码的参数名称,默认：page
              pageName: 'current'
              //每页数据量的参数名,默认：limit
              , limitName: 'size'
          }
          //对分页返回数据进行转换
          , parseData: function (res) {
              return {
                  //解析接口状态
                  "code": res.code,
                  //解析提示文本
                  "msg": res.msg,
                  //解析数据长度
                  "count": res.data.total,
                  //解析数据列表
                  "data": res.data.records
              };
          }
```

4.页面使用

下面页面的引用不再说明解释,页面部分地方还未优化,

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="always" name="referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <#include "../common/header.html">
</head>
<body>
<!--最外面的灰底框,用于与ifram区别开-->
<div class="col-xs-12 lightgray_div">
    <!--白底框-->
    <div class="col-xs-12 white_div">
        <!--搜索框-->
        <div class="col-xs-12 search_div">
            <div class="input-group g-fr">
                <form id="inquire" class="form-inline ">
                    <div class="input-group ">
                        <select class="form-control" name="role" id="role">
                            <option value="0">所有角色</option>
                            <option value="1">超级管理员</option>
                            <option value="2">管理员</option>
                            <option value="3">高级用户</option>
                            <option value="4">普通用户</option>
                        </select>
                    </div>
                    <div class="input-group ">
                        <input type="text" class="form-control" id="gmt_create" placeholder="注册时间">
                        <input type="hidden" id="gmt_create_start" name="gmt_create_start">
                        <input type="hidden" id="gmt_create_end" name="gmt_create_end">
                    </div>

                    <div class="input-group ">
                        <input type="text" class="form-control" name="username" placeholder="用户姓名">
                    </div>
                    <button type="button" class="layui-btn" style="height: 30px" id="btn_search" onclick="table_func.search()"><i
                            class="layui-icon layui-icon-search"></i></button>
                </form>
            </div>
        </div>
        <div class="col-xs-12">
            <div id="table_parent_div" >
                <table id="table_div"  lay-filter="main"></table>
            </div>
        </div>
    </div>
</div>
</body>
<#include "../common/layui_init.html">
<!--表格工具类的按钮-->
<script type="text/html" id="toolbarBox">
    <div style="margin-bottom: -5px">
        <div class="layui-btn-container " style="float: left;">
            <button class="layui-btn " onclick="table_func.add()"><i class="layui-icon layui-icon-add-1"></i>添加</button>
            <button class="layui-btn  layui-btn-normal" onclick="table_func.edit()"><i
                    class="layui-icon layui-icon-edit"></i>编辑
            </button>
            <button class="layui-btn   layui-btn-danger" onclick="table_func.delete()"><i class="layui-icon layui-icon-delete"></i>删除
            </button>
            <button class="layui-btn   layui-btn-normal" onclick="table_func.set_role()"><i class="layui-icon"></i>设置用户角色
            </button>

        </div>
    </div>
</script>
<script type="text/javascript">
    //表头
    var cols = [[
        {field: 'id', title: 'id', sort: true, type: 'checkbox', fixed: 'left'}
        , {field: 'id', title: 'ID'}
        , {field: 'username', title: '用户名'}
        , {field: 'password', title: '密码(已加密)'}
        , {field: 'sex', title: '性别'}
        , {field: 'email', title: '邮箱'}
        , {field: 'phone', title: '手机号'}
        , {field: 'role_info', title: '角色'}
        , {field: 'remark', title: '备注'}
        , {
            field: 'gmt_create', title: '创建时间'
            , templet: function (col) {
                return layui_table.date_format(col.gmt_create, "yyyy-MM-dd hh:mm:ss")
            }
        },
        {
            field: 'gmt_create', title: '修改时间'
            , templet: function (col) {
                return layui_table.date_format(col.gmt_modified, "yyyy-MM-dd hh:mm:ss")
            }
        }
    ]]
    //页面要用的方法
    table_func = {
        //表格初始化
        init: function () {
            //设置表格渲染的参数
            layui_table.set_table_data('${request.contextPath}/user/query', cols, "#toolbarBox");
            //进行表格渲染
            layui_table.table_render();
        },
        //搜索
        search: function () {
            layui_table.search(paraArrayToLiteral($("#inquire").serializeArray()))
        },
        //添加
        add: function () {
            window.location.href = "${request.contextPath}/pages/user/add";
        },
        //编辑
        edit: function () {
            var id = layui_table.selectOne();
            if (id != null) {
                window.location.href = "${request.contextPath}/pages/user/add?id=" + id;
            }
        },
        //删除
        delete: function () {
            var id = layui_table.selectMany();
            if (id != null) {
                layui_layer.confirm("确定要删除吗?",function () {
                    $.post("${request.contextPath}/user/delete", {ids:asString(id)}, function (o) {
                        if (o.code == 0) {
                            layer.msg(o.message);
                            table_func.search();
                        } else {
                            layui_layer.error_alert(o.message);
                        }
                    });
                })
            }
        },
        //设置角色
        set_role: function () {
            var id = layui_table.selectOne();
            if (id != null) {
                layer.open({
                    type:2,
                    title:"设置角色",
                    shadeClose: true,
                    shadeClose: true,
                    shade: 0.5,
                    area: ['90%', '90%'],
                    content: "${request.contextPath}/pages/role/module/set_role?userId="+id,
                    end : function(index, layero){
                        table_func.search();
                    }
                })
            }
        },
    }
    $(function () {
        //设置点击表格行,进行选中
        layui_table.click_line_checked();
        //渲染日期选择框
        layui_date.range_date_render("#gmt_create", "date", "#gmt_create_start", "#gmt_create_end");
        $("#role").select2();
        table_func.init();
    });
</script>
<#include "../common/footer-inner.html">
</html>

5.展示效果

用户管理

6.还需完善的地方

一个页面无法展示两个表格