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

·  阅读 688

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

在线文档

ten-ken.gitee.io/javascriptd…

源码及使用demo

gitee.com/ten-ken/sty…

file

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改