自定義方法將form表單中的資料轉為json
有時候我們需要將頁面的form表單的資料,進行格式化成json,比如easyui的回顯功能,那麼我們可以自己用jquery寫一個方法實現:
這裡有一個easyui的隱藏視窗,裡面有一個表單,當表單輸入查詢條件後,點選查詢,視窗關閉. 但是需要再次點開這個隱藏視窗,之前的搜尋條件回顯:
<scritp>
$(function(){
// 先將body隱藏，通過點選事件顯示彈窗
$("body").css({visibility:"visible"});
}
</scritp>
<body>
.....
<!--easyui的資料網格--> 點選工具欄上的查詢,彈窗如圖:
寫一個serializeJson方法
<script type="text/javascript">
//工具函式 將表單裡資料 序列化成json物件
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function 呼叫這個方法: easyui的 $(‘#grid’).datagrid(‘load’,data);
$(‘#grid’).datagrid(‘load’,data);easyui中這個方法的意思是載入本地資料進行顯示.
$(function(){
//頁面載入完成後為按鈕繫結單擊事件
$("#searchBtn").click(function(){
var data = $("#searchForm").serializeJson();
//console.log(data);
//通常一個查詢通過一些引數,這種方法可以呼叫從伺服器載入新資料。
$('#grid').datagrid('load',data);
})
})具體程式碼:
<!-- 查詢快遞員-->
<div class="easyui-window" title="查詢快遞員視窗" closed="true" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" modal="true" style="width: 400px; top:40px;left:200px">
<div style="overflow:auto;padding:5px;" border="false">
<form id="searchForm">
<table class="table-edit" width="80%" align="center">
<tr class="title">
<td colspan="2">查詢條件</td>
</tr>
<tr>
<td>工號</td>
<td>
<input type="text" name="courierNum" />
</td>
</tr>
<tr>
<td>收派標準</td>
<td>
<input type="text" name="standard.name" />
</td>
</tr>
<tr>
<td>所屬單位</td>
<td>
<input type="text" name="company" />
</td>
</tr>
<tr>
<td>型別</td>
<td>
<input type="text" name="type" />
</td>
</tr>
<tr>
<td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查詢</a>
<script type="text/javascript">
//工具函式 將表單裡資料 序列化成json物件
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
};
$(function(){
//頁面載入完成後為按鈕繫結單擊事件
$("#searchBtn").click(function(){
var data = $("#searchForm").serializeJson();
//console.log(data);
//通常一個查詢通過一些引數,這種方法可以呼叫從伺服器載入新資料。
$('#grid').datagrid('load',data);
$("#searchWindow").window("close");
})
})
</script>
</td>
</tr>
</table>
</form>
</div>
</div>點選查詢按鈕後,視窗關閉,再次點選查詢,查詢條件還在
相關推薦
自定義方法將form表單中的資料轉為json
有時候我們需要將頁面的form表單的資料,進行格式化成json,比如easyui的回顯功能,那麼我們可以自己用jquery寫一個方法實現: 這裡有一個easyui的隱藏視窗,裡面有一個表單,當表單輸入查詢條件後,點選查詢,視窗關閉. 但是需要再次點開這個隱藏視
自定義jquery的方法，將Form表單中的內容轉換成json
// 自定義jquery的方法，將Form表單中的內容轉換成json $.fn.serializeJson=function(){ var serializeObj={}; var array=this
jq 將form表單中的資料轉為json
/** * 獲取提交的資料 * @param obj * @returns {{}} */m.getParameterMap = function (obj) { var setmultivalue = function (val, name, value) {
將form表單中的所有輸入框值序列化時遇到的問題
var $form = this.$modal.find('form');//獲取模態框中的表單元素 var data = $form.serializeArray(); //form中的輸入框須有n
使用serializeObject()將form表單中的資料序列化成物件
在ajax中有 serializeArray()方法 可以將form表單中的資料序列化成如下的格式 [ { name: "a", value: "1" }, { name:
jquery 外掛方法 將form表單轉換成json串物件
(function($) { $.fn.serializeJson = function() { var serializeObj = {}; var array = this.serial
jquery將form表單內容轉換為json字串
var formObject = {}; var formArray = $("#form").serializeArray(); $.each(formArray, function (i, item) { formObject[item.name] = item.val
反射的應用 將form表單的資料自動封裝為物件
我們經常做表單提交，然後把一大堆頁面傳過來的引數一一通過set方法賦值到物件中； 還經常遇到一個表單提交同一個類的多個物件， 甚至遇到：一個表單提交多種不同類的物件。 學習完反射後，很希望做一個比較通用的工具類，不再每次為上面的事情做重複勞動。 例如：頁面有以
Form表單中資料的兩種提交方式
在Form表單中，資料的提交方式有兩種，分別為GET方式和POST方式，在接下來，我們將詳細講述這兩種提交資料的方式以及測試方法。 1 GET - 從指定的伺服器中獲取資料 1.1 GET方法 1.2 特點 （1） GET請求能夠被快
Layui 在使用Layui框架中使用form表單中的標籤但是沒有css效果的解決方法
這是原來的程式碼 <label class="layui-form-label">搜尋選擇框</label> <div class="layui-input-inline"> <select name="module
Ant Design Pro，用setFieldsValue方法，給巢狀到Form表單中的DatePicker元件設定預設值
其實用setFieldsValue或者獲取setState方法都可以設定DatePicker的預設值。 setState方法： <FormItem label="日期選擇框"> {getFieldDecorator('date', {
在使用Layui框架中使用form表單中的標籤但是沒有css效果的解決方法
這是原來的程式碼 <label class="layui-form-label">搜尋選擇框</label> <div class="layui-input-inline"> <select n
將form表單裡的資料封裝成物件 json2.js的例子 jquery的serialize方法轉換空格為+號的解決方法
將form表單裡的資料封裝成json物件即object，在後臺中用usr就能接收全部引數了。可適用於strts2，easyUI的DataGrid 傳參等 需要引用的js庫有jquery 和 json2.js <formid="fm"> <in
form表單中有多個提交或者通過按鈕來提交時的跳轉方法
<form id="myForm"> <input id="btnId" value="提交" type="button"> </form> form表單一般是通過submit提交的，按鈕無法正常提交表單資料，就需要引用js函式來提交
關於form表單中button按鈕自動提交問題
courier tex w3c line 自動提交 get style href span 坑:點擊確認按鈕,form表單提交2次,發送後臺2次請求 //錯誤代碼: <Button id="btnSubmit" name="btnSubmit" cla
js: 將 form表單序列化
序列化 form form的序列化，即將表單中的鍵值序列化為可提交的字符串 表單 <form id="target"> <select name="age"> <option value="age1">20</opti
form表單中get和post兩種提交方式的區別
name bsp inpu get div post input 普通 表單 一、form表單中get和post兩種提交方式的區別？ 1.get提交表單中的內容在鏈接處是可見的。post不可見 2.post相比於get是安全的 3.post不收限制大小，get有
form表單中多個button按鈕必須聲明type類型
orm 管理系 多個 分享 com 圖片 log bmi 一個 最近在做一個後臺管理系統，發現了一個小bug： 問題描述：form表單中有多個button按鈕（以下圖為例），如果第一個button不寫type屬性，那麽點擊第一個button按鈕會觸發submit事件； 解決
form表單中的input有哪些類型
span 添加圖片 選擇 password blog radi -s -a 圖片 text:文本框password:密碼框radio:單選按鈕checkbox:復選框file:文件選擇域hidden:隱藏域button:按鈕reset:重置按鈕submit:表單提交按鈕im
form表單中隱藏類型input的使用
rec box resp quest param value 數據 parameter == <form action="PersonSave.ashx" method="post"> <input type="hidden" name=