LayUI提交表单，监听select，分页组件

LayUI提交表单，监听select，分页组件

1、LayUI提交表单

这几天做项目，用到提交layui框架的弹出层的表单，因为需要在提交表单后，关闭当前弹出层，同时刷新父窗口的数据，因此，用普通的提交就不行了，因为普通的提交到后台之后没有返回值，就无法做到关闭弹出层和刷新父窗口。找了很多方法，包括查看api，找异步提交方法等，都没有找到合适的方法(也许是我太笨)，最后，在小伙伴的帮助下，终于找到了一个好用的方法。在此，对我的小伙伴表示衷心的感谢！

1.1、js文件

jquery.js、layui.js、layer.js

1.2、jsp页面

<form id="helpobject_form" class="layui-form" method="post">
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1" id="saveData">提交button>
form>

表单之间就是各种输入框，这个大家都懂的，提交按钮一定要是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<strAry.length;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页面

<select name="nativePlaceProvinceId" lay-filter="privince"  id="nativePlaceProvinceId" lay-verify="required" lay-search="">
select>

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页面

<div>
    <div id="demo7">div>
div>

3.3、js代码

效果如下：