flexigrid中进行手动刷新

事情的起因是，使用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>

 

评论

4 楼 kevin_zhm 2012-04-18  

请问不使用分页要怎么处理。数据加载不了

3 楼 fannyxjf 2010-03-25  

看起来好像是增加了checkbox和行号？其他的看不出来。。。

melin 写道

对其进行了一些改造，应用在公司项目中，比较方便

$("#flex1").flexigrid ({
url: bizAction,
path : 'menuList EOSMenu',
isDefineColums : true,
id : "WH_BH_1",
editable : true,
rowid    : 'menuID',
firstCol : 'num',
height:300,
onlyCheckOne : true,
isSubmitCheckBox : false,
rowColorFunct : rowColorFunct,

operUrls : {save:'common.biz.bizSave',del:'common.biz.bizDel'},
colModel : [
{display: '菜单ID', name : 'menuID', column:'col1',id : 'menuID', width : 80, sortable : true, align: 'left',editable:false,url:"javascript:test(cm, _text)"}, //url:"test(cm, _text)" or url:"javascript:alert('{0}')"
{display: '菜单名称', name : 'menuName',column:'col2', id : 'menuName', width : 180, sortable : true, align: 'left', colmove:false, colresize:false},
{display: '菜单级别', name : 'menuLevel',column:'col3', id : 'menuLevel1', width : 80, sortable : true, align: 'center', type:'sel_flexSel'},
{display: '创建时间', name : 'menuLevel',column:'col4', id : 'menuLevel2', width : 80, sortable : false, align: 'center', type:'date_flexDate', dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'},
{display: '菜单路径', name : 'menuAction',column:'col5', id : 'menuAction', width : 300, sortable : true, align: 'left', vtip:true},
{display: '菜单路径', name : 'menuAction',column:'col6', id : 'menuAction2', width : 600, sortable : true, align: 'left',whiteSpace:"pre-wrap"}
//white-space 可以设置的值
//normal 默认。空白会被浏览器忽略。
//pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
//nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
//pre-wrap 保留空白符序列，但是正常地进行换行。
//pre-line 合并空白符序列，但是保留换行符。
],

buttons : [
{name: '保存', bclass: 'save', onpress : operator},
{name: '删除', bclass: 'delete', onpress : operator},
{separator: true},
{name: '添加一行', onpress : operator}
],

usepager: true,
title: '菜单信息',
useRp: true,
sortname: "col1",
sortable : false,
sortorder: "asc",
onSuccess: function(){vtip();},
showTableToggleBtn: true
});

2 楼 melin 2010-03-25  

对其进行了一些改造，应用在公司项目中，比较方便

$("#flex1").flexigrid ({
url: bizAction,
path : 'menuList EOSMenu',
isDefineColums : true,
id : "WH_BH_1",
editable : true,
rowid    : 'menuID',
firstCol : 'num',
height:300,
onlyCheckOne : true,
isSubmitCheckBox : false,
rowColorFunct : rowColorFunct,

operUrls : {save:'common.biz.bizSave',del:'common.biz.bizDel'},
colModel : [
{display: '菜单ID', name : 'menuID', column:'col1',id : 'menuID', width : 80, sortable : true, align: 'left',editable:false,url:"javascript:test(cm, _text)"}, //url:"test(cm, _text)" or url:"javascript:alert('{0}')"
{display: '菜单名称', name : 'menuName',column:'col2', id : 'menuName', width : 180, sortable : true, align: 'left', colmove:false, colresize:false},
{display: '菜单级别', name : 'menuLevel',column:'col3', id : 'menuLevel1', width : 80, sortable : true, align: 'center', type:'sel_flexSel'},
{display: '创建时间', name : 'menuLevel',column:'col4', id : 'menuLevel2', width : 80, sortable : false, align: 'center', type:'date_flexDate', dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'},
{display: '菜单路径', name : 'menuAction',column:'col5', id : 'menuAction', width : 300, sortable : true, align: 'left', vtip:true},
{display: '菜单路径', name : 'menuAction',column:'col6', id : 'menuAction2', width : 600, sortable : true, align: 'left',whiteSpace:"pre-wrap"}
//white-space 可以设置的值
//normal 默认。空白会被浏览器忽略。
//pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
//nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
//pre-wrap 保留空白符序列，但是正常地进行换行。
//pre-line 合并空白符序列，但是保留换行符。
],

buttons : [
{name: '保存', bclass: 'save', onpress : operator},
{name: '删除', bclass: 'delete', onpress : operator},
{separator: true},
{name: '添加一行', onpress : operator}
],

usepager: true,
title: '菜单信息',
useRp: true,
sortname: "col1",
sortable : false,
sortorder: "asc",
onSuccess: function(){vtip();},
showTableToggleBtn: true
});

1 楼 elfer 2010-03-25  

不错，很好很强大！