flexigrid自定义查询

相信用过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="width: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就可以了。希望对大家有所帮助。

个人网站：http://yeshanghai.ueuo.com/

个人google code:http://code.google.com/p/andy-dreamer/，大家可以通过svn下载我最新的代码

评论

1 楼 kimi430 2012-09-04  

顶，新手用flexigrid,受教了~