suchen

Heim >Web-Frontend >js-Tutorial >Einfache Implementierung der Serialisierung von Formularen in Objekte durch jQuery

Einfache Implementierung der Serialisierung von Formularen in Objekte durch jQuery

高洛峰
高洛峰Original
2016-12-03 15:47:161258Durchsuche

Bei Verwendung der Datagrid-Komponente von easyui sind die in der Abfrage übergebenen Abfrageparameter Objekttypen. Der Einfachheit halber wurde die Serialisierungsmethode in jquery erweitert. Durch Aufrufen dieser Methode können alle Daten im Formular serialisiert werden >

$.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;
};

Spezifische Verwendung: 

<%@ 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>

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery serialisiert das Formular in eine Instanz des Object-ObjektsNächster Artikel：jQuery serialisiert das Formular in eine Instanz des Object-Objekts

In Verbindung stehende Artikel

Mehr sehen