jquery将form表单数据封装成js对象

最新推荐文章于 2023-04-17 08:03:02 发布

原创最新推荐文章于 2023-04-17 08:03:02 发布 · 857 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

本文介绍了一种将HTML表单数据序列化为JavaScript对象的方法，并展示了如何在jqGrid插件中使用此方法来设置POST数据。通过自定义$.fn.serializeObject函数实现，方便处理表单提交。

// 将一个表单的数据返回成JS对象
$.fn.serializeObject = function() {
	var o = {};
	var a = this.serializeArray();
	$.each(a, function() {
		if (o[this.name]) {
			if (!o[this.name].push) {
				o[this.name] = [ o[this.name] ];
			}
			o[this.name].push(this.value || '');
		} else {
			o[this.name] = this.value || '';
		}
	});
	return o;
};

调用方式如下:

$(function() {
	$("#gridTable").jqGrid(
			{
				url : CTX+ "/transfer/querytransfer/doQueryByAjax.shtml",
				datatype : "json",
				mtype : 'POST',
				postData:$('#paramVo').serializeObject(),
				height : "auto",
				colNames : [ '提交时间', '完成时间', '交易号', '支出账户', '交易类型', '交易对方',
						'对方账号', '交易金额', '交易状态', '审核状态', '操作' ],
				colModel : [ {
					name : 'submitTime',
					width : 105,
					sorttype : "string"
				}, {
					name : 'finishTime',
					width : 105
				}, {
					name : 'txnId',
					width : 70
				}, {
					name : 'payAcct',
					width : 80,
					sorttype : "string"
				}, {
					name : 'txnCode',
					width : 50,
					formatter:function(v){
						var h="";
						if(v=="00700"){
							h="付款到银行";
						}else if(v=="00900"){
							h="付款到国付宝";
						}						
						return h;
					}
				}, {
					name : 'recName',
					width : 60
				}, {
					name : 'recAcct',
					width : 80,
					sorttype : "string"
				}, {
					name : 'txnAmt',
					width : 50
				}, {
					name : 'txnSts',
					width : 50
				}, {
					name : 'auditSts',
					width : 50
				}, {
					name : 'txnCode',
					width : 40,
					sorttype : "string",
					formatter:function(v,opts,rowObj){
						var h="啊";
						alert(dump(opts));
						alert(dump(rowObj));
						
						if(h=="00700"){
							h="批量详情";
						}
						
						return h;
					}
				} ],
				sortname : "submitTime",
				sortorder : "desc",
				viewrecords : true,
				gridview : true,
				rowNum : 10,
				rowList : [ 10, 20, 50,100],
				jsonReader : {
					repeatitems : false
				},
				pager : "#gridPager",
				caption : "付款记录列表"
			}).navGrid("#gridPager", {
		edit : false,
		add : false,
		del : false
	});

})