事情的起因是,使用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" οnclick="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>