乐趣区

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

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)、掘金,转载请注明出处。

退出移动版