layui写后台表格思路和赋值用法详解

2023-08-08 20:16:06 463

layui.form模块用法总结。

基于layui做表单赋值取值

思路

一.初始一个方法用来给弹窗赋值，一种赋值，是按数据赋值，一种是清空数据

functioninitContorl(data){//传数据赋值为数组不传数据赋值为空
if(data){
form.val("control",data)
}else{
form.val("control",
{
"name1":"",
,"name2":"",
,"name3":""
})
}

*layui中form.val();方法form.val("control")中的control为

标签中的lay-filter值,name1,name2,name2为input的name属性值，我一般和id设为同一个

*赋值

1.nameval

2nameval

3nameval

4nameval

5开关nameval(true/fasle)

6多选这里比较搞人layui要设置不同的名字然后将对应的name设置为true而后台需要的是name:vule的json格式.

具体做法为:写成subject为传给后端的

name值，赋值intdata["subject["+el.st_grade+"]"]=true;intdata传给initContorl(data)的data参数.

所以多选赋值：name[vlue]val(true/fasle);

*清空不传datainitContorl就是清空

1-5自己设6设置为$("input:checkbox").attr("checked",false);使用过后要更新下表单状态form.render('checkbox');

二获取表单数据;

layui是在监听表单提交的时候获取表格值表单提交按钮结构提交

监听方法

form.on('submit(filter值)',function(data){

data.field//即为获取的表格值；

returnfalse;//阻止表单提交采用jaxa处理数据

})

获得的结构为

注意这里多选的格式并不是我们想要的格式;多选的取值不能用

于是这里用另外一个方式获取

首先清除掉带dx的项

vargetData=data.field;

for(keyingetData){
varmyReg=/dx/;
if(myReg.test(key)){
deletegetData[key];
}
}

然后给他赋值正确的格式

vararry=[];

$("input:checkbox[name^='grade']:checked").each(function(i){
arry[i]=$(this).val();
});

getData.dx=arry;

三、到这里完成表单的赋值取值，用layui很简单。做表格增删改查这个模块必不可少

以上这篇layui写后台表格思路和赋值用法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

layui写后台表格思路和赋值用法详解

热门推荐

随机推荐