有时候我们需要将页面的form表单的数据,进行格式化成json,比如easyui的回显功能,那么我们可以自己用jquery写一个方法实现:
这里有一个easyui的隐藏窗口,里面有一个表单,当表单输入查询条件后,点击查询,窗口关闭. 但是需要再次点开这个隐藏窗口,之前的搜索条件回显:
<scritp>
$(function(){
// 先将body隐藏，通过点击事件显示弹窗
$("body").css({visibility:"visible"});
}
</scritp>
<body>
.....
<!--easyui的数据网格-->
<div region="center" border="false">
<table id="grid"></table>
</div>
<!--搜索弹窗-->
<div class="easyui-window" id="searchWindow">
<form id='searchForm'>
XXXX
<input>标签
XXXX
<button id='searchBtn'>
</form>
</div>
</body>点击工具栏上的查询,弹窗如图:
写一个serializeJson方法
<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;
};
</script>调用这个方法: 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>点击查询按钮后,窗口关闭,再次点击查询,查询条件还在
