在使用easyui的datagrid組件時，在查詢時傳遞的查詢參數(shù)是對象類型，為了方便，擴展了jquery中的序列化方法，調(diào)用該方法，可以將表單的所有數(shù)據(jù)序列化
$.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("系統(tǒng)提示", "您確定要刪除這條記錄嗎?", function(r) { if (r) { $.post("${ctx }/user/delete.action", {id : id}, function(result) { if (result.isSuccess) { $.messager.show({ title : "系統(tǒng)提示", msg : result.msg, showType : "show" }); $("#dg").datagrid("reload"); } else { $.messager.show({ title : "系統(tǒng)提示", 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><!-- 表格顯示數(shù)據(jù) --><table id="dg"></table></body></html>以上這篇jQuery序列化表單成對象的簡單實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
