在使用easyui的datagrid组件时，在查询时传递的查询参数是对象类型，为了方便，扩展了jquery中的序列化方法，调用该方法，可以将表单的所有数据序列化
$.fn.serializeObject=function(){ var obj=new Object(); $.each(this.serializeArray(),function(index,param){ if(!(param.name in obj)){ obj[param.name]=param.value; } }); return obj; };
具体使用：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/WEB-INF/views/inc/taglibs.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <jsp:include page="/WEB-INF/views/inc/meta.jsp"></jsp:include> <title>Insert title here</title> <script type="text/javascript"> /* 将form表单序列化成对象object*/ $.fn.serializeObject=function(){ var obj=new Object(); $.each(this.serializeArray(),function(index,param){ if(!(param.name in obj)){ obj[param.name]=param.value; } }); return obj; }; $(function() { query(); }); function query() { var params=$('#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} ] ] }); } function fmtOperate(value, row, index) { var e=''; e += '<a href="${ctx}/user/initForm.action?id=' + row.id + '">编辑</a> '; e += '<a href="javascript:void(0)">删除</a>'; return e; } /* 删除 */ function del(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"); } }); } /*添加*/ function add(){ window.location.href="${ctx}/user/initForm.action?id=0"; } </script> </head> <body> <form> <label>用户名：</label><input type="text"/> <input type="button" value="查询"/> <input type="button" value="添加"/> </form> <!-- 表格显示数据 --> <table></table> </body> </html>
以上这篇jQuery序列化表单成对象的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: