微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery – jqGrid在第一次加载时排序

我的网格有以下代码(我在与数据源相同的目录中使用 XML文件).

var handsetGrid = $("#products").jqgrid({
    url: 'catalog.xml',datatype: "xml",colNames:["SKU","Name","Brand","Description","Metadescription"],colModel:[
        {name:"sku",key: true,index:"sku",width:100,xmlmap:"sku",align:"right",sortable:true},{name:"Name",index:"Name",width:300,sortable:true,xmlmap:">name>en"},{name:"Brand",index:"Brand",xmlmap:"brand"},{name:"description",index:"description",width:400,classes:"desc1",xmlmap:"description1>en",formatter:descFormatter},{name:"MetadescriptionEn",index:"MetadescriptionEn",xmlmap:"Metadescription>en",formatter:descFormatter}
    ],width: 1300,height:480,shrinkToFit:false,rownumbers: true,scroll: true,rowNum:22,ignoreCase: true,viewrecords: true,sortname: "Name",sortorder: "asc",sortable: true,loadonce: true,pager: "#pager",caption: "Handsets",xmlReader: {
        root: "products",row: "product",repeatitems: false,id: "sku"               
    },loadComplete: function(data) {
        // test whether we have initial loadind and the "data" has XML type
        if (data.nodeType) {
            myXMLdata = data; // save original XML data                         
        }
    },subGrid: true,subGridRowExpanded: function(subgrid_id,row_id) {
        var subgrid_table_id;
        subgrid_table_id = subgrid_id + "_t";
        jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
        jQuery("#" + subgrid_table_id).jqgrid( {
            datatype:'xmlstring',datastr: myXMLdata,colNames: [ 'Id','Name','Duration','Price'],colModel: [
                {name:"ppid",index:"ppid",width:80,xmlmap:">id"},{name:"ppname",index:"ppname",width:150,{name:"ppduration",index:"ppduration",width:85,xmlmap:">priceperduration>duration>en",formatter: durationFormatter},{name:"ppprice",index:"ppprice",xmlmap:">priceperduration>price",formatter: priceFormatter}
            ],gridview: true,xmlReader: {
                root: "products>product:has('sku:contains('"+row_id+"')')>priceplansavailable",row: "priceplan",repeatitems: false
            }                           
        });
    }       

}); 

$("#handsets").jqgrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,refresh:false});
$("#handsets").jqgrid('navButtonAdd',"#pager",{caption:"Search Bar",title:"Toggle Search Toolbar",buttonicon :'ui-icon-pin-s',onClickButton:function(){
        handsetGrid[0].toggletoolbar();
    }
});

$("#handsets").jqgrid('navButtonAdd',{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',onClickButton:function(){
        handsetGrid[0].clearToolbar();
    }
});

$("#handsets").jqgrid('filterToolbar',{defaultSearch:'cn'});

我的问题是当我加载网格时,我希望它已经为列排序:名称.
我期望使用这三个参数:

> sortname:“名称”,
> sortorder:“asc”,
> sortable:true,

单击列后它正常工作,只是第一个排序不起作用(加载页面后).

解决方法

如果使用“xml”或“json”之类的远程数据类型,则服务器负责提供已排序的数据.

如果你不能这样做,你可以在loadComplete中触发reloadGrid,但你应该使用setTimeout JavaScript方法来完成第一个加载过程.

要不进行递归,您应该将“reloadGrid”放在loadComplete的if(data.nodeType)块中.

更新:Free jqGrid有选项forceClientSorting:true,它解决了这个问题.该选项允许在显示第一页之前强制对数据进行排序和过滤(如果设置了可选的postData.filters).

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐