jQuery序列化表单成对象的简单实现


Posted in Javascript onNovember 29, 2016

在使用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序列化表单成对象的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js 中debug方式
Feb 07 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 #Javascript
JS访问DOM节点方法详解
Nov 29 #Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 #Javascript
浅谈js函数的多种定义方法与区别
Nov 29 #Javascript
原生JS简单实现ajax的方法示例
Nov 29 #Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 #Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 #Javascript
You might like
php中iconv函数使用方法
2008/05/24 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
Python工程师面试必备25条知识点
2018/01/17 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Python字符串格式化输出代码实例
2019/11/22 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
解放思想演讲稿
2014/09/11 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL