jQuery序列化表單成物件的簡單實現-js教程-PHP中文網

jQuery序列化表單成物件的簡單實現

高洛峰

發布： 2016-12-03 15:47:16

原創

1271 人瀏覽過

在使用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=$(&#39;#queryForm&#39;).serializeObject();
    //{username:$(&#39;#username&#39;).val()}
    $(&#39;#dg&#39;).datagrid({
        url : &#39;${ctx}/user/loadData.action&#39;,
        pagination : true,
        idField : &#39;id&#39;,
        rownumbers : true,
        singleSelect : true,
        queryParams : params,
        pageSize : 10,
        pageNumber:1,
        pageList : [ 10, 20, 30, 40 ],
        sortName : &#39;age&#39;,
        sortOrder : &#39;asc&#39;,
        fitColumns : true,
        columns : [ [
             {field : &#39;phone&#39;,title : &#39;电话&#39;,width : 150,align : &#39;center&#39;,sortable : &#39;true&#39;},
                 {field : &#39;age&#39;,title : &#39;年龄&#39;,width : 100,align : &#39;center&#39;,sortable : &#39;true&#39;},
                 {field : &#39;email&#39;,title : &#39;邮箱&#39;,width : 100,align : &#39;left&#39;,sortable : &#39;true&#39;},
                 {field : &#39;username&#39;,title : &#39;用户名&#39;,width : 150,align : &#39;center&#39;,sortable : &#39;true&#39;},
                 {field : &#39;password&#39;,title : &#39;密码&#39;,width : 200,align : &#39;left&#39;},
                 {field : &#39;_opt&#39;,title : &#39;操作&#39;,width : 200,align : &#39;center&#39;,formatter : fmtOperate}
                 ] ]
    });
}
 
function fmtOperate(value, row, index) {
    var e=&#39;&#39;;
    e += &#39;<a href="${ctx}/user/initForm.action?id=&#39; + row.id + &#39;">编辑</a> &#39;;
    e += &#39;<a href="javascript:void(0)" onclick="del(&#39; + row.id + &#39;);">删除</a>&#39;;
    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 : &#39;show&#39;
                    });
                }
            }, "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>

登入後複製