1、LayUI提交表单
这几天做项目,用到提交layui框架的弹出层的表单,因为需要在提交表单后,关闭当前弹出层,同时刷新父窗口的数据,因此,用普通的提交就不行了,因为普通的提交到后台之后没有返回值,就无法做到关闭弹出层和刷新父窗口。找了很多方法,包括查看api,找异步提交方法等,都没有找到合适的方法(也许是我太笨),最后,在小伙伴的帮助下,终于找到了一个好用的方法。在此,对我的小伙伴表示衷心的感谢!
1.1、js文件
jquery.js、layui.js、layer.js
1.2、jsp页面
提交
表单之间就是各种输入框,这个大家都懂的,提交按钮一定要是button,不能是input,否则表单监听不到提交事件,还有一个要特别注意的地方:由于后台使用Springmvc接收对象,所以前台往后台传值的时候,json数据中不能有值为空字符串,或值为null的数据,因此,在往后台传值前,需要将表单序列化后的数据中,值为空的属性给剔除。
1.3、js代码
layui.use(['form','layedit','laydate'],function(){ var form=layui.form ,layer=layui.layer; //监听提交 form.on('submit(demo1)',function(data){ //获取表单序列化数据,并将序列化数据转换为json对象 var params=paramString2obj($('#helpobject_form').serialize()); $.ajax({ type:'post', url:'', contentType:'application/json', cache:false, data:JSON.stringify(params), dataType:'json', success:function(data){ if(null!=data){ if(data=='success'){ layer.msg('添加成功',{icon:1,time:2000},function(){ var index=parent.layer.getFrameIndex(window.name); parent.layer.close(index); window.parent.location.reload();//刷新父窗口 }); }else{ layer.msg('添加失败'); } } }, error:function(data){ layer.alert(JSON.stringify(data)); } }); return false; });});/*serializedParams格式为"key1=value1&key2=value2".也支持'key.sonkey=value' */function paramString2obj (serializedParams) { var obj={}; function evalThem (str) { var strAry = new Array(); strAry = str.split("="); //使用decodeURIComponent解析uri 组件编码 for(var i = 0; i < strAry.length; i++){ strAry[i] = decodeURIComponent(strAry[i]); } var attributeName = strAry[0]; var attributeValue = strAry[1].trim(); //如果值中包含"="符号,需要合并值 if(strAry.length > 2){ for(var i = 2;i attributeValue += "="+strAry[i].trim(); } } if(!attributeValue){ return ; } var attriNames = attributeName.split("."), curObj = obj; for(var i = 0; i < (attriNames.length - 1); i++){ curObj[attriNames[i]]?"":(curObj[attriNames[i]] = {}); curObj = curObj[attriNames[i]]; } //使用赋值方式obj[attributeName] = attributeValue.trim();替换 //eval("obj."+attributeName+"=\""+attributeValue.trim()+"\";"); //解决值attributeValue中包含单引号、双引号时无法处理的问题 curObj[attriNames[i]] = attributeValue.trim(); }; var properties = serializedParams.split("&"); for (var i = 0; i < properties.length; i++) { //处理每一个键值对 evalThem(properties[i]); }; return obj;}
1.4、改进
上面的代码中的序列化form表单的方法有一个bug,那就是会把部分空格给序列化成"+"号,于是又找了另外一种方法。
//监听表单提交form.on('submit(demo1)',function(data){ var params=deleteEmptyProperty($('#dynamic_form').formatForm()); $.ajax({ type:'post', url:'', contentType:'application/json', cache:false, data:JSON.stringify(params), dataType:'json', success:function(data){}, error:function(data){} }); return false;});//删除json对象中的属性值为空字符串、null、undefined的属性// 支持递归删除,即有些空属性是由于代码执行中产生的,这些属性也要删除function deleteEmptyProperty(object){ for (var i in object) { var value = object[i]; // sodino.com // console.log('typeof object[' + i + ']', (typeof value)); if (typeof value === 'object') { if (Array.isArray(value)) { if (value.length == 0) { delete object[i]; console.log('delete Array', i); continue; } } deleteEmptyProperty(value); if (isEmpty(value)) { console.log('isEmpty true', i, value); delete object[i]; console.log('delete a empty object'); } } else { if (value === '' || value === null || value === undefined) { delete object[i]; console.log('delete ', i); } else { console.log('check ', i, value); } } } return object;}function isEmpty(object) { for (var name in object) { return false; } return true;}//序列化表单jQuery.prototype.formatForm=function(){ var obj=new Object(); $.each(this.serializeArray(),function(index,param){ if(!(param.name in obj)){ obj[param.name]=param.value; } }); return obj;};
2、LayUI监听select
在html中用到select都会用到它的change事件,在普通的select中,要监听select的change事件,直接在js代码中监听就可以了,这个so easy!
我要说的是layui框架里面的select的change事件的监听,layui框架里面的select的change事件的监听用监听普通select的change事件的方法是行不通的,不信?你试试!!!
下面,说说layui框架里面的select的change事件的监听。
2.1、js文件
jquery.js、layui.js
2.2、jsp页面
2.3、js代码
layui.use('form', function(){var form = layui.form;//监听select的改变事件form.on('select(privince)', function(data){ //选择省,去查询城市列表 getLocationList(data.value,"nativePlaceCityId"); //重新渲染表单 layui.form.render();})
其中privince是layui中给select定义的一个属性lay-filter="privince",
通过这种方法就可以监听到select值的变化,data代表默认选中的那个option,data.value就是select改变后的值。
使用select的最具代表性的操作,就是省市联动的级联操作,选择省之后,动态加载当前选择省对应的市的列表。
通过ajax获取市的列表并将值添加到select标签的做法和普通select操作方法一致,但是在将option添加给select完成后,要特别注意的是需要对表单整体重新渲染:
layui.form.render();
其中render可以指定对应的form的属性lay-filter值。
3、LayUI分页组件
3.1、layui的js文件
jquery.js、layui.js
3.2、jsp页面
3.3、js代码
function page(helpType,page,pageSize){ $.ajax({ url: '/helpobject/getHelpObjectList', type: 'post', dataType: "json", data: { helpType: helpType, page: page, pageSize: pageSize }, success: function(data){ if(null!=data && data.result.length>0){ //后台数据返回结果:{"total":10,"result":[]} var tx=""; for(var i=0;i // 做对应业务处理 } $("#xxx").html("").append(tx); //分页 layui.use('laypage',function(){ var laypage = layui.laypage; laypage.render({ elem: 'demo' ,count: data.total ,limit: pageSize ,curr: page || 1 ,layout: ['count','prev','page','next','limit','skip'] ,jump: function(obj,first){ if(!first){ page(helpType,obj.curr,obj.limit); } } }); }); } }, error: function(data){ alert(JSON.stringify(data)); } });}
效果如下: