乐趣区

关于javascript:你还在这样使用layuilayuiform篇

jiezi

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/java…

源码及应用 demo：

https://gitee.com/ten-ken/sty…

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

退出移动版