jQuery序列化表單成對象的簡單實現(xiàn)

更新時間：2016年11月29日 09:22:43 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query序列化表單成對象的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在使用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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: