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

Posted 2023-01-11

1.前言：

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

2. layui-form的封装

2.1.针对select组件的封装

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控件了，切记。

2.1.1.6 局部代码

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)
);

​​在线文档​​：

​​https://ten-ken.gitee.io/javascriptdocs/docs/index.html​​

​​源码及使用demo​​：

​​https://gitee.com/ten-ken/style-script/tree/master/layui-util%EF%BC%88layui%E5%B7%A5%E5%85%B7%EF%BC%89​​