相信用过flexigrid的朋友都知道,它有自带的查询功能,但是我想自定义自己的查询,界面如下:
以下是实现自定义查询的关键代码,希望对大家有所帮助:
html:
<div class="queryForm"> <div style="margin-top:10px;"> <div class="prompt"><span>id:</span></div> <input id="query_id" type="text"/> <div class="prompt"><span>名称:</span></div> <input id="query_name" type="text"/> </div> <div style="margin-top:10px;"> <div class="prompt"><span>描述:</span></div> <input id="query_description" type="text"/> <div class="prompt"><span>父目录:</span></div> <s:select id="query_parent_id" list="#dropMenu.dropMenuList" cssStyle="125px;height:20px;" name="query_parent_id" cssClass="default" headerKey="-1" headerValue="请选择" listKey="id" listValue="description"></s:select> </div> </div>
js:
function query(){ var params = [{"name" : "id", "value" : $("#query_id").val()}, {"name" : "name", "value" : $("#query_name").val()}, {"name" : "description", "value" : $("#query_description").val()}, {"name" : "parent_id", "value" : $("#query_parent_id").val()}]; $('#menu_grid').flexOptions({params : params, newp : 1}).flexReload(); }
正如以上代码所示,query方法去调用flexigrid的felxReload方法去刷新,但在刷新之前传入参数,传入参数的格式必须是上面代码中的格式,否则flexigrid将无法解析传入后台,flexReload执行的时候会自动向后台post请求,并且将带上你传入的参数,但这里并没有传入post的url,是因为在初始化flexigrid的时候已经定义好了,flexigrid会自动去找到这个url,并且post向它。还有要注意的是,往往查询的时候是到第一页,所以大家看到flexOptions方法还传入newp,其实newp就是flexigrid向后台传入的最终page参数,所以这里只需指定为1就可以了。希望对大家有所帮助。
个人google code:http://code.google.com/p/andy-dreamer/,大家可以通过svn下载我最新的代码
(在不断的尝试中总结经验,以帮助后面的人更快的上路,http://zhs.guohe.in/)