flexigrid中进行手动刷新

事情的起因是,使用flexigrid的时候,发现flexigrid的检索框不能满足我的需求,只能自己写检索的部分,然后手动刷新grid中的数据。页面效果如图所示。


flexigrid中进行手动刷新_第1张图片

 

flexigrid默认UI上有一个“刷新”按钮,点击即可刷新grid中的数据。如果我们在自己程序中需要手动地进行grid刷新,则调用$('#grid').flexReload()即可。其中$('#grid')是你定义的flexigrid。下面是我实现上面这个页面时的一些关键代码。

 

 

<div style="padding:2px; background-color: #C2DAFA;text-align:right">
    <span>姓名:</span>
    <s:textfield id="qname" name="conditions.name"></s:textfield>
    <span style="margin-left:10px">单位:</span>
    <s:textfield id="qunit" name="conditions.unit"></s:textfield>
    <input type="button" onclick="javascript:doquery()" value="查询" />
</div>
<table id="grid" style="display:none;"></table>
<script type="text/javascript">
    $("#grid").flexigrid({
        //......定义flexigrid
    });

function doquery(){
    var name = $("#qname").val();
    var unit = $("#qunit").val();
    if(name == ""){
        alert("请输入姓名");
        return;
    }
    var params;
    if(unit == ""){
        params = {'conditions.name':name};
    }else{
        params = {'conditions.name':name, 'conditions.unit':unit};
    }
    $.post(
        "/search.action",
        params,
        function(){$('#grid').flexReload();}
    );
 }
</script>

 

你可能感兴趣的:(JavaScript,UI,浏览器)