Einfache Implementierung der Serialisierung von Formularen in Objekte durch jQuery-js-Tutorial-php.cn

Einfache Implementierung der Serialisierung von Formularen in Objekte durch jQuery

高洛峰

Freigeben： 2016-12-03 15:47:16

Original

1270 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren