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

2021-03-23 本文已影响0人程序员ken

1.前言：

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

2. layui-form的封装

2.1.针对select组件的封装

file

2.1.1 结构

一般不同的是select里面的option不同，所以html里面的select标签会保留在页面上。

2.1.1.1 解析数据源匹配到前端固有的取值方式

只需要一个select方法，构建页面的下拉框，那select的方法里面需要哪些东西？

肯定需要四部分【重点】：

2.1.1.2 ajax的配置包括请求参数

2.1.1.3 绑定的select集合及它的lay-filter

绑定的select的id的集合，这个肯定是数组，select的lay-filter属性值，这个拥有监听点击事件，以便进行回调，还有就是默认的select的选中值捆绑，可以设置默认选中

2.1.1.4 解析数据设置option

重点就是每个option 的文本值和value的设置，这个在参数keyValues里面设置，使用数组对象，单个里面为{key:'',value:'',extra:''}，处理第几个select时采用针对的key value 和extra ，以便正常的数据源正常的取值，另外提醒一下extra是个额外的扩展字段，存于没有option的data-info里面。

2.1.1.5 事件的回调

这个包括下拉框的回调和因为后端的格式不一定跟前端的一样，所有返回的数据需要重新解析，这点在parseData的回调方法中得以体现，返回的格式为下图所示,还有就是样式不能适配业务直接走successBack方法，定义了successBack方法，就不能构建select控件了，切记。

file

2.1.1.6 局部代码

file

ps: select也有单独封装，引用layui_select.js即开，使用方式：var laySelect = new LaySelect(); laySelect.select({...});

2.1.2 使用demo


var LayForm = new LayForm();
    //非联动 --> 注意同一个表单只能‘使用’一次select 方法 不然原数据会被覆盖
// 需要使用多个 建议引用layui-select.js 通过多次创建对象调用调用select方法
LayForm.select({
    elems: ['#interest', '#profession', '#money'],
    layFilters: ['interest', 'profession', 'money'],
    defaultValues: ['game', 'jiaoshi', '0050'],
    url: 'xxx://192.168.0.xxx:6889/rest/test/getMsg',
    where: {
            root: 'zhongguo'
    }
})

2.2 单纯的构建form [表单]

这里就快速带过了，里面我构建编辑器，一个init方法即可构建整个表单，这里只需要绑定form标签和提交按钮的lay-filter ，加上了两个回调事件，一个是设置时间编辑器等控件、自定义规则、添加事件监听等业务，另外一个是针对表单提交的回调。

2.2.1 使用demo


var LayForm = new LayForm();
            LayForm.init({
                formFilter: 'demo',
                submitFilter: 'demo1'
        }, {
                "username": "我是谁",
                "phone": "18225840789",
                date: "2020-03-02",
                password: '7324362'

    }, function(form, layer, layedit, laydate) {
                laydate.render({
                    elem: '#date'
        });
}, function(form, layer, layedit, laydate, data) {
                console.log(data)
});