你还在这样使用layui?【layui-table篇】

1.前言:

layui用了几年,这个框架十分适合我们后台人员开发。简单易用,用的较多的模块肯定是table模块和form模块了。但是在一个开发团队中,不同的人开发水平的差异,如果没有调用统一的公共方法,那就会造成很多样式的不同和公共的bug出现到不同的页面 从而出现耗费过多的精力修改bug。所以我们需要做的是统一样式和方法的调用,将其二次封装以便于开发人员的调用。另一方面也能减少代码的冗余量。

2. layui-table的封装

2.1.页面构成:一般在页面的table的构成如下: 搜索区 头部工具栏 和table主体【包含对行和列 事件的处理】

file
需要的几点是: ‘’兼容‘’ 官方table的参数options 设置了默认值 和可以覆盖默认值 、 支持搜索方法(search/reset 【代表重置搜索】) 和 能够获取的layui的table组件

对外提供的方法

file

2.2.从使用案例去解析每个方法

如下列所示,首先是创建对象【这个是我封装的table组件对象】,重点在于init方法是初始化整个table


    

** init 方法**

init 方法的入参有四个分别是table的options【这个参考layui官网】、头部工具栏的点击事件、table行点击事件 和搜索区的id【当然搜索区用的也是layui的组件 如input select等等】

file
file

需要修改跟你项目匹配的几个地方,主要是table的options的参数 :parseData【因为不同后端返回的json的key不太一样,需要按layui固定的格式去赋值】和 request:默认向后端传递分页参数命名【这个部分是向你的项目靠拢】 还有就是 排序部分,这个在监听排序事件里面 【如上图标记】,这点也是能渠道前端的排序字段和方式 至于怎么向后端传参的,可以根据后端设置的来。这点跟request一样 ,是根据后端配置而不是根据layui的格式来制定的。

搜索区的id设置的原因是,初始化和后面搜索都需要统一组装参数,如果这点也需要每次都写一遍,不封装那要写累死,尤其是那种死心眼的开发者,一个个获取input 和select值的这种行为。

reset 方法:

file

这里用到了表格渲染,因为重置了参数 单选框 多选框 下拉框的表现还是原来的样子,需要重新渲染下。为了区分开区域 这里只渲染搜索区的控件。

当reset带了参数时,这部分参数注入到搜索参数里面去。参数格式为:{}.

3. 完整的js:


var LayDataTable = (function() {
    var table;
    var l_options;
    var l_searchConfig;
    var currentTable;
    var $;
    var whereData={};//搜索条件
    var form;

    function init(_options, headEvenFun = null, rowEvenFun = null, searchConfig = {}) {
        var _this = this;

        //设置默认项
        _options.elem = _options.elem || "";
        _options.height = _options.height || 700;

        //默认分页配置
        if (typeof(_options.page) != "boolean") {
            _options.page = _options.page ||{};
            _options.page = Object.assign({
                first: '首页',
                prev: '上一页',
                next: '下一页',
                last: '尾页',
                groups: '6',
                layout: ['count', 'first', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                theme: '#fe0627'
            },_options.page);
        }

        var options = Object.assign({
            title: '',
            defaultToolbar: ['filter', 'print'],
            limits: [10, 50, 100],
            limit: 10, //每页默认显示的数量
            skin: 'row', //表格风格
            even: typeof(_options.even)=='boolean'?_options.even:true, //开启隔行背景
            size: 'lg', //小尺寸的表格
            text:{
                none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
            },
            parseData:function(res) { //res 即为原始返回的数据
                return {
                    //这部分最后使用全局配置 根据实际业务修改
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data.item //解析数据列表
                };
            },
            request:{   //默认请求参数 根据实际业务修改
                pageName: 'start', //页码的参数名称,默认:page
                limitName: 'length' //每页数据量的参数名,默认:limit
            }
        },_options);

        
        var elemDom = document.getElementById(options.elem.substr(1));
        var tableFilter = elemDom.getAttribute("lay-filter");

        l_options = options;
        //搜索条件
        if (searchConfig) {
            l_searchConfig =searchConfig;
        }


        layui.use(['table', 'jquery','form'], function() {
            table = layui.table;
            $ =layui.$;
            setParams();
            l_options.where = whereData;
            //第一个实例
            currentTable = table.render(options);
            form= layui.form;

            //头工具栏事件
            if (typeof(headEvenFun) == "function") {
                table.on('toolbar(' + tableFilter + ')', function(obj) {
                    headEvenFun(table.checkStatus(obj.config.id), obj.event);
                });
            }

            //监听行工具事件
            if (typeof(rowEvenFun) == "function") {
                table.on('tool(' + tableFilter + ')', function(obj) {
                    rowEvenFun(obj);
                });
            }
            
            //监听排序事件 
            table.on('sort('+l_options.elem.replace("#","")+')', function(obj){ //注:sort 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"         
              
              table.reload(l_options.elem.replace("#",""), {
                initSort: obj //记录初始排序,如果不设的话,将无法标记表头的排序状态。
                ,where: { //请求参数                  (注意:这里面的参数可任意定义,并非下面固定的格式)---》根据实际业务修改
                   field: obj.field //排序字段
                  ,order: obj.type //排序方式
                }
              });
              
            });

        });

    }

    function search() { //搜索的方法     
        setParams();
        l_options.where = whereData;
        currentTable.reload(l_options);
    }

    function getTable() { //获取table
        return table;
    }
    
    function setParams(){// 设置参数
        var type;
        var searchId = typeof(l_searchConfig)==='object'?l_searchConfig.searchId:l_searchConfig;
        
        $("#"+searchId+" input,#"+searchId+" select").each(function(ind, item) {
            type = $(item).attr("type");
            if ($(item).attr("name")) {
                if (type == 'radio' || type == 'checkbox') {
                    whereData[$(item).attr("name")] = $("input[name='" + $(item).attr("name") + "']:checked").val() || '';
                } else {
                    whereData[$(item).attr("name")] = $(item).val() || '';
                }
            }
        })
    }

    function reset(whereParams) { //重置搜索
        var type;
        whereData = {};
        l_options.where={};
        var searchId = typeof(l_searchConfig)==='object'?l_searchConfig.searchId:l_searchConfig;
        
        $("#"+searchId+" input,#"+searchId+" select").each(function(ind, item) {
            type = $(item).attr("type");
            if ($(item).attr("name")) {
                if (type == 'hidden') {
                    whereData[$(item).attr("name")] = $(item).val() || '';
                } else if (type == 'radio' || type == 'checkbox') {
                    $(item).attr("checked", false);
                    whereData[$(item).attr("name")] = '';
                } else {
                    whereData[$(item).attr("name")] = '';
                    $(item).val("");                    
                }
            }
        
        });
        Object.assign(whereData,whereParams||{}) ;
        //局部刷新 搜索区  最顶部div 的 class="layui-form" 
        //需要搭配 lay-filter,并且lay-filter的值
        //一定要与 seachConfig里面searchId的值一样
        form.render('select',searchId);
        form.render('radio',searchId);
        form.render('checkbox',searchId);
    
        
        currentTable.reload({
            where: whereData,
            page:{
                 curr: 1//重新从第 1 页开始
            }
        });
    }


    //对象方法  [我的理解]
    return function() {
        this.init = init;
        this.search = search; //搜索
        this.reset = reset; //重置搜索
        this.getTable = getTable;
    }
})();


//属性使您有能力向对象添加属性和方法
LayDataTable.prototype = {
}

源码

file

本文来源于:程序员ken,专属平台有csdn、思否(SegmentFault)、 、 开源中国(oschina)、掘金,转载请注明出处。

你可能感兴趣的:(你还在这样使用layui?【layui-table篇】)