flexigrid中进行手动刷新

最新推荐文章于 2024-10-18 11:12:04 发布

最新推荐文章于 2024-10-18 11:12:04 发布 · 467 阅读

文章标签：

#JavaScript #浏览器 #UI #ViewUI

Web前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在使用Flexigrid时遇到的问题及解决方案。当Flexigrid默认的检索功能无法满足需求时，作者通过自定义检索组件并结合手动刷新功能实现了更灵活的数据展示。文章详细展示了如何利用jQuery实现查询条件输入后的数据重新加载。

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

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>