jQuery序列化表单成对象的简单实现
在使用easyui的datagrid组件时，在查询时传递的查询参数是对象类型，为了方便，扩展了jquery中的序列化方法，调用该方法，可以将表单的所有数据序列化
$.fn.serializeObject=function(){
varobj=newObject();
$.each(this.serializeArray(),function(index,param){
if(!(param.nameinobj)){
obj[param.name]=param.value;
}
});
returnobj;
};
具体使用：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@includefile="/WEB-INF/views/inc/taglibs.jsp"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<jsp:includepage="/WEB-INF/views/inc/meta.jsp"></jsp:include>
<title>Inserttitlehere</title>
<scripttype="text/javascript">
/*将form表单序列化成对象object*/
$.fn.serializeObject=function(){
varobj=newObject();
$.each(this.serializeArray(),function(index,param){
if(!(param.nameinobj)){
obj[param.name]=param.value;
}
});
returnobj;
};
$(function(){
query();
});
functionquery(){
varparams=$('#queryForm').serializeObject();
//{username:$('#username').val()}
$('#dg').datagrid({
url:'${ctx}/user/loadData.action',
pagination:true,
idField:'id',
rownumbers:true,
singleSelect:true,
queryParams:params,
pageSize:10,
pageNumber:1,
pageList:[10,20,30,40],
sortName:'age',
sortOrder:'asc',
fitColumns:true,
columns:[[
{field:'phone',title:'电话',width:150,align:'center',sortable:'true'},
{field:'age',title:'年龄',width:100,align:'center',sortable:'true'},
{field:'email',title:'邮箱',width:100,align:'left',sortable:'true'},
{field:'username',title:'用户名',width:150,align:'center',sortable:'true'},
{field:'password',title:'密码',width:200,align:'left'},
{field:'_opt',title:'操作',width:200,align:'center',formatter:fmtOperate}
]]
});
}
functionfmtOperate(value,row,index){
vare='';
e+='<ahref="${ctx}/user/initForm.action?id='+row.id+'">编辑</a>';
e+='<ahref="javascript:void(0)"onclick="del('+row.id+');">删除</a>';
returne;
}
/*删除*/
functiondel(id){
$.messager.confirm("系统提示","您确定要删除这条记录吗?",function(r){
if(r){
$.post("${ctx}/user/delete.action",{id:id},function(result){
if(result.isSuccess){
$.messager.show({
title:"系统提示",
msg:result.msg,
showType:"show"
});
$("#dg").datagrid("reload");
}else{
$.messager.show({
title:"系统提示",
msg:result.msg,
showType:'show'
});
}
},"json");
}
});
}
/*添加*/
functionadd(){
window.location.href="${ctx}/user/initForm.action?id=0";
}
</script>
</head>
<body>
<formid="queryForm">
<label>用户名：</label><inputtype="text"name="username"id="username"/>
<inputtype="button"onclick="query();"value="查询"/>
<inputtype="button"onclick="add();"value="添加"/>
</form>
<!--表格显示数据-->
<tableid="dg"></table>
</body>
</html>
以上这篇jQuery序列化表单成对象的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。