layui 代码仓

1、扩展模块定义

// commonSearch.js
layui.define(['jquery', 'form', 'laydate'], function (exports) {
	var commonSearch = {
		getPersonIdentity: function() {
			// todo
		},
		getTljDictory: function() {
			// todo
		},
		// todo
	}
  exports('commonSearch', commonSearch)
})

使用layui.define()定义模块，其中jquery,form, laydate都是已经存在于layui中的内置模块，可以在该扩展组件中使用。

这里定义了commonSearch对象，然后通过exports抛出变量。

2、注册

// layui.baseExtend.js
layui.config({
    base: '/static/'
    , version: '20190927'
}).extend({
    commonSearch: "assets/js/commonSearch"
})

使用layui.config().extend({...})进行多个内置模块的注册。

base: 定义公共目录前缀，commonSearch的真实路径为/static/assets/js/commonSearch.js。

extend():以对象的形式声明抛出模块的使用名称以及模块文件对应路径。

官网中也可以使用use方法加载合并模块后的入口文件。

3、使用

在script引入layui.js后引入layui.baseExtend.js

<script src="/static/assets/lib/layui2.4.5/layui.js"></script>
<script src="/static/assets/js/layui.baseExtend.js"></script>

模块化引入使用

layui.use(['layer','table','commonSearch'], function(){
	// todo
})

2、表格编辑自定义校验规则

官方提供update方法来更新表格数据，但是页面上还是渲染着输入内容，需要手动重置下。

table.on("edit(jylcmxTable)", function(obj) {
        if(obj.field == "SJ") {
            var reg = /^1[3456789]\d{9}$/;
            if(!(reg.test(obj.value))) {
                Hussar.error("手机号格式有误，请重新输入");
                obj.tr.find('td[data-field=SJ] input').val("");
                var newObj = JSON.parse(JSON.stringify(obj.data));
                newObj.SJ = "";
                obj.update(newObj);
            }
        }
    })

3、表格列合并

aqfxHz.merge = function (tableId, res) {
        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['tljMc', 'jwdMc'];//需要合并的列名称
        var columsIndex = [0, 1];//需要合并的列索引值
        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $('div[lay-id="' + tableId + '"] .layui-table-body>.layui-table').find("tr");//所有行
            for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
                if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).css("display", "none");
                    });
                } else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算                    }
                }
            }
            mergeIndex = 0;
            mark = 1;
        }
    }