flexigrid自定义查询

相信用过flexigrid的朋友都知道,它有自带的查询功能,但是我想自定义自己的查询,界面如下:

flexigrid自定义查询_第1张图片

以下是实现自定义查询的关键代码,希望对大家有所帮助:

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下载我最新的代码

你可能感兴趣的:(flexigrid)