Question

我需要生成一个 jqGrid 结构，类似于trirand JqGrid 4.6演示网站中的 Grouped Header Row Config 示例。

在这里我有一个单独的ajax调用来获取数据，而ajax调用一个ASP MVC动作方法。

$.ajax({
url:'Controller/Action/ClientId?='+ id,
method:'get',
success:function(data){

var gridData = data;

jQuery("#list483").jqGrid({
    datatype: "local",
    height: 'auto',
    rowNum: 30,
    rowList: [10,20,30],
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
        {name:'name',index:'name', width:100, editable:true},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},      
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    gridComplete:function(){


                        var dataArray = $('#list483').jqGrid('getGridParam', 'data');

//do some processing here

},
    pager: "#plist483",
    viewrecords: true,
    sortname: 'name',
    grouping:true,
    groupingView : {
        groupField : ['name'],
        groupColumnShow : [false],
        groupText : ['<b>{0} - {1} Item(s)</b>']
    },
    caption: "Configure group header row"
});


//load data to grid here
for(var n=0;n<gridData .length;n++){
                    jQuery("#list483").jqGrid('addRowData', n + 1, gridData [n]);
                }





}


})

假设来自ajax的数据与demo网站中的数组相同，请点击此处：

 [
        {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
        {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
        {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
        {id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
        {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
        {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ]

假设上面的数据数组有1000个对象。所以我需要服务器端分页。但是，如何将服务器端分页添加到此外部ajax电话？

添加服务器端分页后，必须执行以下操作：

客户端排序必须正常工作
RowList必须正常工作

感谢

Answer 1

主要问题：您发布了一些虚拟代码，这可能与您的实际代码无关。最好是代码，它更接近您的实际代码，只是将数据替换为相同格式的任何虚拟数据。

最大的问题：你使用数据类型：“local”，但写下实现服务器端分页的要求。这不是结果。此外，使用循环中调用的addRowData填充网格。这是最糟糕和最慢的方式，我知道。如果您使用datatype: "local"，则应使用data: gridData填充数据。在您使用数据创建网格的方式。 jqGrid将首先按groupingView.groupField排序输入数据，然后按sortname排序，并在网格中显示结果数据的第一页。

我建议您在所有网格中使用gridview: true和autoencode: true以获得更好的性能，并在加载不包含HTML片段的纯数据时正确显示数据。您建议从index删除不需要的colModel媒体资源。

我建议您在JSFiddle中发布演示文稿，这将简化您的问题分析并准备好修复问题。您还可以使用JSFiddle的Echo服务（请参阅here）。我为您创建了演示https://jsfiddle.net/OlegKi/mkgtuuzy/，它几乎使用了您的代码和以下选项

sortname: 'id',
gridview: true,
autoencode: true,

我会另外推荐你，不要使用复古版4.6。而不是你可以使用free jqGrid 4.13.4。这是我在2014年底开发的fork之后，将主要的jqGrid fork重命名为Guriddo jqGrid JS（参见the post），更改许可协议并使其商业化（参见价格here）。免费的jqGrid 4.13.4与旧的4.6完全兼容，但它包含许多修复，性能改进以及README中描述的每个已发布版本和the wiki的许多新功能。我建议您阅读the article以及wiki文章this one和this one，其中介绍了一些小而重要的改进，您可以在免费的jqGrid中使用这些改进。

演示https://jsfiddle.net/OlegKi/mkgtuuzy/1/使用与上一页相同的代码，但包含Font Awesome 4.7的CSS，免费的jqGrid 4.13.4和选项iconSet: "fontAwesome"。

关于服务器端分页的要求，如果正确填充数据，您应该很好地理解1000行数据是jqGrid的小数据集。 The demo演示了自由jqGrid的性能，每页有5000行，13列和25行。您可以看到本地分页，排序和过滤数据的性能。如果您要从服务器加载压缩（gziped）JSON数据加载并在免费的jqGrid中添加loadonce: true（和forceClientSorting: true），那么您可以直接从datatype: "json"轻松加载所有数据。 {1}}。你应该有非常好的总体表现。

如果数据来自单独的ajax调用，我如何为jqGrid添加服务器端分页？[Trirand JQgrid 4.6]

1 个答案: