很久没写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没有查询条件的问题
分享到：
相关推荐
1.增加onClick事件； 2.对css做了调整，方便汉字显示，将div.nBtn高度由24变为30,以解决中文大字体情况下栏目选择下拉菜单无法操作的问题； 3.对css/images下面的文件统一添加flexi-*前缀。 本版本支持jQuery 1.9.1...
Flexigrid demo
我们都知道flexigrid表格插件的列宽只能设为固定的值，不能使用百分比来自适应窗口的变化。 本例通过修改flexigrid的源代码来实现列宽的自适应变化。如下使用:{display:'XXX',name:'XXX',width:'30%',sortable:...
jquery flexigrid；jquery flexigrid
flexigrid.jsflexigrid.jsflexigrid.jsflexigrid.jsflexigrid.jsflexigrid.jsflexigrid.js
FlexiGrid配置与使用说明，不错的文档
《修改jQuery表格插件flexigrid源码添加自定义功能》文章配套代码http://blog.csdn.net/neareast/article/details/12904393，对jquery表格插件flexigrid的源码进行修改，增加了几个自定义功能，对其功能进行了增强。...
flexigrid.js flexigrid.css
FlexiGrid(js版本)
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。... 本资源是作者根据原flexigrid 进行修改，首列加入CheckBox 的修改版。
FlexiGrid使用教程
此项目是struts2+json+flexigrid的完整实例，可帮助你对flexigrid快速上手，项目下载后直接导入自己的工程即可，所用jar包会另传，因为超出上传限制，还请理解。
flexigrid删除实例flexigrid删除实例flexigrid删除实例flexigrid删除实例
FlexiGrid使用手册，主要介绍FlexiGrid的主要属性和使用方法。
Flexigrid-表格,所属jquery
Flexigrid它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
jsp中flexigrid插件在ie下样式问题
对于flexigrid的使用，各个参数的意义应该不用解释，网上资料很多。插件接收的数据格式对于刚接触的人来说是个麻烦，这是一位兄台的整理，不尽完美但会告诉你如何封装格式。
FlexiGrid 插件简单应用从英文版本改为简体中文版本