修改flexigrid 能用form查询
很久没写Blog了，这次写写项目中用到的flexigrid,在里面能够写查询表单 方便增加查询条件
打开jquery.flexigrid.js文件，其中：在populate: function()方法里面加多个ajax的方法：
var param = $("#searchForm").serialize(); //重点,将form表单序列化成url参数字符串
$.ajax({
type: p.method,
/* ***** 原来的代码注释掉
url: p.url,
data: param,
原来的代码注释掉 **** */
url: p.url+u,
data: param,
dataType: p.dataType,
success: function(data) { if (data != null && data.error != null) { if (p.onError) { p.onError(data); g.hideLoading(); } } else { g.addData(data); } },
error: function(data) { try { if (p.onError) { p.onError(data); } else { alert("获取数据发生异常;") } g.hideLoading(); } catch (e) { } }
然后在使用flexigrid的页面加上你的查询表单：
<body>
<div id="ptable" style="margin: 10px;"></div>
<form name="searchForm" id="searchForm" method="post">
<table id="pjTable" style="display: none;"></table>
<table id="searchTab" class="searchTab">
<tr>
<td>
服务点名称:<input type="text" id="serviceName" name="serviceName" maxlength="10" size="15" />
城市名称:<select name="cityId" id="cityId" class="drpdwn">
</select>
<input type="button" value=" 查询 " onclick="search()" id="searchBtn" title="条件为空,则查询所有." />
<input type="reset" value=" 清空 " onclick="clearValue()" id="clearBtn" />
</td>
</tr>
</table>
</form>
<!-- 编辑部门信息 -->
<div class="jqmWindow" id="editServicePointForm" width="30%" ALIGN="CENTER">
<form name="servicePointForm" id="servicePointForm"
action="<%=contextPath%>/pujin/ServicePoint/ServicePointAction.do?method=addServicePointAction"
method="post">
<input type="hidden" name="id" id="id" />
<input type="hidden" name="cityId" id="cityId" />
<table border="1" ALIGN="CENTER" width="50%">
<tr>
<td>
服务网点名称
</td>
<td>
<input type="text" id="serviceName" name="serviceName" class="tex0"/>
</td>
</tr>
<tr>
<td>
所属城市
</td>
<td>
<input type="text" id="city" name="city" class="tex0"/>
<input type="button" value="选择" class="sbttn" onclick="updateCity()">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value=" 保存 " onclick="modify()" />
<input type="button" value=" 取消 " class="jqmClose" />
</td>
</tr>
</table>
</form>
</div>
</body>
});
最后 添加一下javascript 使modify()这个方法能查询
function modify(){
var param = $("#servicePointForm").serialize();
$.ajax({
type:"POST",
data: param,
url:"<%=contextPath%>/pujin/ServicePoint/ServicePointAction.do?method=addServicePointAction",
success:function(result){
$("#servicePointForm input[type!=button]").each(function(){
this.value = "";
});
alert(result);
$("#editServicePointForm").jqmHide();
$("#pjTable").flexReload();
}
});
}
这样就能解决原来flexigrid没有查询条件的问题
打开jquery.flexigrid.js文件，其中：在populate: function()方法里面加多个ajax的方法：
var param = $("#searchForm").serialize(); //重点,将form表单序列化成url参数字符串
$.ajax({
type: p.method,
/* ***** 原来的代码注释掉
url: p.url,
data: param,
原来的代码注释掉 **** */
url: p.url+u,
data: param,
dataType: p.dataType,
success: function(data) { if (data != null && data.error != null) { if (p.onError) { p.onError(data); g.hideLoading(); } } else { g.addData(data); } },
error: function(data) { try { if (p.onError) { p.onError(data); } else { alert("获取数据发生异常;") } g.hideLoading(); } catch (e) { } }
然后在使用flexigrid的页面加上你的查询表单：
<body>
<div id="ptable" style="margin: 10px;"></div>
<form name="searchForm" id="searchForm" method="post">
<table id="pjTable" style="display: none;"></table>
<table id="searchTab" class="searchTab">
<tr>
<td>
服务点名称:<input type="text" id="serviceName" name="serviceName" maxlength="10" size="15" />
城市名称:<select name="cityId" id="cityId" class="drpdwn">
</select>
<input type="button" value=" 查询 " onclick="search()" id="searchBtn" title="条件为空,则查询所有." />
<input type="reset" value=" 清空 " onclick="clearValue()" id="clearBtn" />
</td>
</tr>
</table>
</form>
<!-- 编辑部门信息 -->
<div class="jqmWindow" id="editServicePointForm" width="30%" ALIGN="CENTER">
<form name="servicePointForm" id="servicePointForm"
action="<%=contextPath%>/pujin/ServicePoint/ServicePointAction.do?method=addServicePointAction"
method="post">
<input type="hidden" name="id" id="id" />
<input type="hidden" name="cityId" id="cityId" />
<table border="1" ALIGN="CENTER" width="50%">
<tr>
<td>
服务网点名称
</td>
<td>
<input type="text" id="serviceName" name="serviceName" class="tex0"/>
</td>
</tr>
<tr>
<td>
所属城市
</td>
<td>
<input type="text" id="city" name="city" class="tex0"/>
<input type="button" value="选择" class="sbttn" onclick="updateCity()">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value=" 保存 " onclick="modify()" />
<input type="button" value=" 取消 " class="jqmClose" />
</td>
</tr>
</table>
</form>
</div>
</body>
});
最后 添加一下javascript 使modify()这个方法能查询
function modify(){
var param = $("#servicePointForm").serialize();
$.ajax({
type:"POST",
data: param,
url:"<%=contextPath%>/pujin/ServicePoint/ServicePointAction.do?method=addServicePointAction",
success:function(result){
$("#servicePointForm input[type!=button]").each(function(){
this.value = "";
});
alert(result);
$("#editServicePointForm").jqmHide();
$("#pjTable").flexReload();
}
});
}
这样就能解决原来flexigrid没有查询条件的问题