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序列化表单成对象的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。