jQuery序列化表單成對(duì)象的簡(jiǎn)單實(shí)現(xiàn)
在使用easyui的datagrid組件時(shí),在查詢時(shí)傳遞的查詢參數(shù)是對(duì)象類型,為了方便,擴(kuò)展了jquery中的序列化方法,調(diào)用該方法,可以將表單的所有數(shù)據(jù)序列化
$.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表單序列化成對(duì)象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("系統(tǒng)提示", "您確定要?jiǎng)h除這條記錄嗎?", function(r) { if (r) { $.post("${ctx }/user/delete.action", {id : id}, function(result) { if (result.isSuccess) { $.messager.show({ title : "系統(tǒng)提示", msg : result.msg, showType : "show" }); $("#dg").datagrid("reload"); } else { $.messager.show({ title : "系統(tǒng)提示", 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> <!-- 表格顯示數(shù)據(jù) --> <table id="dg"></table> </body> </html>
以上這篇jQuery序列化表單成對(duì)象的簡(jiǎn)單實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap table表格插件自適應(yīng)固定表頭(超好用)
這篇文章主要介紹了BootStrap table表格插件自適應(yīng)固定表頭(超好用)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08基于jquery中children()與find()的區(qū)別介紹
本篇文章介紹了,基于jquery中children()與find()的區(qū)別,需要的朋友參考下2013-04-04jQuery實(shí)現(xiàn)圖片上傳預(yù)覽效果功能完整實(shí)例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片上傳預(yù)覽效果功能,結(jié)合完整實(shí)例形式分析了jQuery處理圖片上傳預(yù)覽相關(guān)事件響應(yīng)、瀏覽器判斷、圖片及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05基于Jquery的開發(fā)個(gè)代陰影的對(duì)話框效果代碼
基于Jquery的開發(fā)個(gè)代陰影的對(duì)話框效果代碼,需要的朋友可以參考下。2011-07-07jQuery實(shí)現(xiàn)可以計(jì)算進(jìn)制轉(zhuǎn)換的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)可以計(jì)算進(jìn)制轉(zhuǎn)換的計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
使用jquery的scrollTop方法監(jiān)視頁面垂直滾動(dòng)像素,并根據(jù)像素隱藏或者顯示頂部的導(dǎo)航條,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05