jqGrid中的自定义客户端聚合

这个问题类似于jqGrid中的自定义聚合/分组，但有点不同。

我有以下jqGrid。

它加载一次，我希望客户端完成以下所有function。 下拉列表是一个选择器，用于更改显示数据的方式。 比如说我想通过State显示，它应该只显示State列（我可以通过显示和隐藏列来处理它），我希望它聚合/求和“Number1”，“Number2”和“Number3”列也是如此。 它应该看起来像这样（希望我的手动添加是正确的）。

我也需要能够回到第一个网格，尽管如此，869需要分解为Taylor Ridge，Skokie，Beecher的285,489,95值。 这是jqGrid可以处理的东西吗？

以下是第一个网格的XML，但我完全可以控制这个XML的构建方式，因此我可以根据需要进行更改。

   1 IL SPARLAND 32 61 19 0   2 IL EDWARDS 69 56 2 0   2 IL SPARLAND 52 30 8 0   2 CA TAYLOR RIDGE 285 72 15 0   1 CA SKOKIE 489 60 12 0   1 CA BEECHER 95 46 17 0   

Answer 1

我觉得你的问题很有意思。 此外，因为你花了几乎所有的声望点来获得赏金，所以我决定你真的需要问题的解决方案。 所以我为你做了以下演示 。 在开始时它显示完整的网格而不进行分组：

关于select元素，您可以选择分组列并作为结果接收

要么

取决于select元素中的选择。 如果选择“无分组”，则将恢复网格的原始视图。

对于实现，我使用groupSummary和groupSummary的自定义实现。

我建议您另外阅读答案 ， 该答案描述了如何自定义分组的摘要行。

演示正文的HTML代码是

 
  No grouping State City Level  
 
   

相应的JavaScript代码如下：

 var intTemplate = { formatter: 'integer', align: 'right', sorttype: 'int', summaryType: 'sum'}, grouppingTemplate = { summaryType: function (val, name, record) { if (typeof (val) === "string") { return record[name]; } return val; } }, $grid = $("#grid"); $grid.jqGrid({ url: 'CustomGrouping2.xml', height: 'auto', colModel: [ { name: 'Level', formatter: 'integer', sorttype: 'int', template: grouppingTemplate }, { name: 'State', template: grouppingTemplate }, { name: 'City', template: grouppingTemplate }, { name: 'Number1', template: intTemplate }, { name: 'Number2', template: intTemplate }, { name: 'Number3', template: intTemplate }, { name: 'Selected', template: intTemplate } ], cmTemplate: { width: 90 }, xmlReader: { root: 'result' }, loadonce: true, rowNum: 1000, grouping: false, groupingView: { groupField: ['State'], groupSummary: [true], groupColumnShow: [true], groupText: ['{0}'], groupDataSorted: true, showSummaryOnHide: true }, loadComplete: function () { if (this.p.grouping) { $(this).children('tbody').children('tr').each(function () { var $tr = $(this); if (!$tr.hasClass('jqfoot')) { $tr.hide(); } }); } } }); $('#chooseGrouping').change(function () { var index, count, sel = $('option:selected', this).val(), allGroups = ["State", "City", "Level"]; if (sel === "") { $grid.jqGrid('setGridParam', {grouping: false}); for (index = 0, count = allGroups.length; index < count; index++) { $grid.jqGrid('showCol', allGroups[index]); } } else { $grid.jqGrid('setGridParam', {grouping: true, groupingView: {groupField: [sel]}}); $grid.jqGrid('showCol', sel); index = $.inArray(sel, allGroups); if (index >= 0) { allGroups.splice(index, 1); for (index = 0, count = allGroups.length; index < count; index++) { $grid.jqGrid('hideCol', allGroups[index]); } } } $grid.trigger('reloadGrid'); });