【问题标题】:jqGrid sort on first loadjqGrid在第一次加载时排序
【发布时间】:2011-08-02 22:15:22
【问题描述】:

我的网格有以下代码(我使用与数据源位于同一目录中的 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", width:100, sortable:true, xmlmap:"brand"},
        {name:"description", index:"description", width:400, classes:"desc1", xmlmap:"description1>en", formatter:descFormatter},
        {name:"metadescriptionEn", index:"metadescriptionEn", width:400, classes:"desc1", 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, xmlmap:">name>en"},
                {name:"ppduration",index:"ppduration",width:85, xmlmap:">priceperduration>duration>en", formatter: durationFormatter},
                {name:"ppprice",index:"ppprice",width:80, 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',"#pager",{caption:"Clear", title:"Clear Search", buttonicon :'ui-icon-refresh',
    onClickButton:function(){
        handsetGrid[0].clearToolbar();
    }
});

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

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

  • 排序名称:“名称”,
  • 排序顺序:“asc”,
  • 可排序:真,

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

【问题讨论】:

    标签: jquery xml sorting jqgrid


    【解决方案1】:

    如果您使用“xml”或“json”等远程数据类型,服务器负责提供排序数据。

    如果您不能这样做,您可以触发loadComplete 内部的reloadGrid,但您应该使用setTimeout JavaScript 方法来完成第一次加载过程。

    要没有递归,您应该将 "reloadGrid" 放在 if (data.nodeType) 块的 loadComplete 内。

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

    【讨论】:

    • 它可以像这样正常工作: if( data.nodeType ){ myXMLdata = data; setTimeout(function() { $("#products").jqGrid('setGridParam',{ page: 1 }).trigger("reloadGrid"); }, 1 ); } ... 1 毫秒就足以让它工作。感谢您的帮助。
    • 大概setTimeout 是必需的,因为数据来自文件?
    • 我正在使用 if (data.nodeType) 进行递归
    • @kozla13:我不明白你如何进行递归。 您是否像问题中那样使用datatype: "xml", loadonce: true data.nodeType 将仅使用 XML 数据进行更改。您也可以测试datatype:参见the answer
    • @Oleg:我使用的是 json 数据,这就是问题所在。感谢您的快速响应。
    【解决方案2】:

    尝试运行

    handsetgrid.sortGrid("Name");
    

    加载完成后

    【讨论】:

    • 你怎么现在 loadComplete 已经完成了(没有像 afterLoad 这样的事件),因为我试图把它放在最后,但除了我的表变空之外没有任何效果。
    • 你在 loadComplete 中有那个参数:function(data) {
    猜你喜欢
    • 2012-02-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多