触发器('reloadGrid')调用后,列上的jqgrid排序图标不会重置

时间:2011-02-21 19:04:27

标签: jqgrid

请参阅下面的示例代码。

  • 最初网格在任何网格列标题中都没有排序图标 - 很好。

  • 点击“客户”列标题对网格进行排序。

  • 点击REFRESH按钮。它调用grid.trigger('reloadGrid')。

  • 重新加载网格,但“客户端”标题上的排序图标仍然存在。 - 不太好。

`

  $(function() {
     var mydata = [  
            {id:"1", name:"test",       amount:"200"},  
            {id:"2", name:"test2",      amount:"300"},  
            {id:"3", name:"F",          amount:"400"},  
            {id:"4", name:"test4",      amount:"200"},  
            {id:"5", name:"test5",      amount:"300"},  
            {id:"6", name:"test6",      amount:"400"},  
            {id:"7", name:"test7",      amount:"200"},  
            {id:"8", name:"test8",      amount:"300"},  
            {id:"9", name:"test9",      amount:"400"},  
            {id:"10",name:"test10",     amount:"500"},  
            {id:"11",name:"F",          amount:"500"},  
            {id:"12",name:"test11",     amount:"500"},  
            {id:"13", name:"test",      amount:"200"},  
            {id:"14", name:"O",         amount:"200"}  
 ];  
 jQuery("#list").jqGrid({           
        datatype: "local",  
        data: mydata,  
        width: 700,  
        loadComplete: function() {
            $(this).setGridParam({sortname: 'id'});
        },  
                    colNames:['Inv No','Client', 'Amount'],  
        colModel:[
            {name:'id',index:'id', width:65, sorttype:'int', searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},  
            {name:'name',index:'name', width:100, searchoptions:{dataUrl:'/api/domains/producttypedomain'}},  
            {name:'amount',index:'amount', sorttype:'int', width:80, align:"right"}
        ],  
        rowNum:100, 
        pager: '#pager',            
        height:'auto',  
        viewrecords: true,  
        rownumbers: true,  
        gridview : true,            
        caption:"Advanced Search Example"
    });
    jQuery("#list").jqGrid('navGrid','#pager',  
    {
        edit:false,add:false,del:false,search:true,refresh:true
    },  
    {}, // edit options
    {}, // add options
    {}, //del options
    {
        multipleSearch:true, overlay:false,  recreateFilter:true            
    } // search options
    );
});
$(function() {
    $('#refresh-btn').click(function() {
        jQuery("#list").trigger('reloadGrid');          
    });
});

`

2 个答案:

答案 0 :(得分:3)

如果您希望看不到排序图标,可以使用

执行此操作
$("span.s-ico",jQuery("#list").grid.hDiv).hide();

在大多数情况下,未排序的网格(sortname:'')不是最佳选择。所以我建议你为数据排序选择像'id'这样的列。如果您确实希望排序数据未排序,则必须在网格重新加载之前设置sortname:''参数。因此,单击“#refresh-btn”按钮时执行的功能应该是以下

$('#refresh-btn').click(function() {
    var myGrid = jQuery("#list");
    $("span.s-ico",myGrid[0].grid.hDiv).hide(); // hide sort icons
    myGrid.setGridParam({sortname: ''}).trigger('reloadGrid');
});

你想在loadComplete做什么我不确定。更改地点上的sortname参数为时已晚。

您可以看到代码here的修改版本。我更改了mydata数组中某些第一项的顺序,以便更清楚地表明加载后数据将以未排序的顺序显示。

我建议您从网格导航栏中删除“重新加载”按钮,或者添加custom button,看起来像“重新加载”按钮,然后执行您真正想要的操作。

答案 1 :(得分:1)

对于jqGrid的4.6.0版,这对我有用:

$('.s-ico').hide();