在使用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)" onclick="del(' + row.id + ');">刪除</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 id="queryForm"> <label>用戶名:</label><input type="text" name="username" id="username"/> <input type="button" onclick="query();" value="查詢"/> <input type="button" onclick="add();" value="添加"/> </form> <!-- 表格顯示數據 --> <table id="dg"></table> </body> </html>
以上這篇jQuery序列化表單成對象的簡單實現就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。