在使用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序列化表单成对象的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
本文向大家介绍jQuery将表单序列化成一个Object对象的实例,包括了jQuery将表单序列化成一个Object对象的实例的使用技巧和注意事项,需要的朋友参考一下 验证表单的时候经常需要获取表单中name='***'的元素的值,然后加以判断。jQuery中提供了jQuery.serizlizeArray来将表单序列化成一个数组。尽管如此,数组还是不方便我们操作,我需要讲表单序列化成一个对象。这
问题内容: 我正在尝试使用JSON(使用simplejson)序列化python对象列表,并收到以下错误:对象“不可JSON序列化”。 该类是一个简单的类,其字段只有整数,字符串和浮点数,并且从一个父超类继承相似的字段,例如: foo,bar是我上面提到的简单类型。唯一棘手的事情是,ChildClass有时具有一个字段,该字段引用另一个对象(类型不是ParentClass或ChildClass)。
本文向大家介绍jQuery实现form表单元素序列化为json对象的方法,包括了jQuery实现form表单元素序列化为json对象的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现form表单元素序列化为json对象的方法。分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: 结果如下图所示: 希望本文所述对大家jQuery程序设计有所帮助
但它返回一个id为空且产品为空的对象。当然,我不需要为这个简单的操作编写自定义的吗?
本文向大家介绍简单了解Ajax表单序列化的实现方法,包括了简单了解Ajax表单序列化的实现方法的使用技巧和注意事项,需要的朋友参考一下 原生表单序列化 随着Ajax的出现,表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化 在JavaScript中可以利用表单字段的type属性,连同name和value属性,一起实现表单的序列化。 在进行表单序列
本文向大家介绍jquery实现简单的表单验证,包括了jquery实现简单的表单验证的使用技巧和注意事项,需要的朋友参考一下 jquery如何实现简单的表单验证,我们先跟大家分享一下实现思路。 大概思路: 先为每一个required添加必填的标记,用each()方法来实现。 在each()方法中先是创建一个元素,然后通过append()方法将创建的元素加入到父元素后面。 这里面的this用的很精髓