jqGrid中的自定义客户端聚合 [英] Custom client-side aggregation in jqGrid
问题描述
此问题与。在开始时它显示完整的网格而不进行分组：
关于select元素，您可以选择分组列并接收结果，如
< img src =https://i.stack.imgur.com/WKxuH.pngalt =在此处输入图像说明>
或
取决于select元素中的选择。如果选择无分组，将恢复网格的原始视图。
对于实现，我使用 groupSummary 使用 summaryType 的自定义实现。
我建议你另外阅读答案，其中介绍了如何自定义分组的摘要行。
演示是
< ; fieldset style =float：leftclass =ui-widget ui-widget-content ui-corner-all ui-jqgrid>
< select id =chooseGrouping>
< option value =>没有分组< /选项>
< option value =State> State< / option>
< option value =City> City< / option>
< option value =Level> Level< / option>
< / select>
< / fieldset>
< div style =clear：left>
< table id =grid>< tr>< td>< / td>< / tr>< / table>
< / div>
相应的JavaScript代码如下：
< pre class =lang-js prettyprint-override>
var intTemplate = {formatter：'integer'，align：'right'，sorttype：'int'，
summaryType：'sum'} ，
grouppingTemplate = {
summaryType：function（val，name，record）{
if（typeof（val）===string）{
return record [name] ;
}
返回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，
分组：false，
分组视图：{
groupField：['State']，
groupSummary：[true] ，
groupColumnShow：[true]，
groupText：['{0}']，
groupDataSorted：true，
showSumm aryOnHide：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'）;
}）;
This question is similar to Custom aggregation/grouping in jqGrid but a little bit different.
I have the following jqGrid.
It is loaded once and I'd like all of the following functionality to be done client side. The drop down is a selector that changes how to display the data. Say for example I want to display by State, it should just show the State column (I can handle that through showing and hiding the columns), and I'd like it to aggregate/sum the "Number1", "Number2", and "Number3" columns as well. It should look something like this (Hopefully my manual addition is correct).
I'd also need to be able to GET BACK to the first grid though so, 869 needs to broken back out into 285, 489, 95 values for Taylor Ridge, Skokie, Beecher. Is this something that can be handled by jqGrid?
The following is the XML for the first grid, but I do have full control over how this XML is built so I can change that as necessary.
<?xml version ='1.0' encoding='utf-8'?>
<result>
<row>
<cell>1</cell>
<cell>IL</cell>
<cell>SPARLAND</cell>
<cell>32</cell>
<cell>61</cell>
<cell>19</cell>
<cell>0</cell>
</row>
<row>
<cell>2</cell>
<cell>IL</cell>
<cell>EDWARDS</cell>
<cell>69</cell>
<cell>56</cell>
<cell>2</cell>
<cell>0</cell>
</row>
<row>
<cell>2</cell>
<cell>IL</cell>
<cell>SPARLAND</cell>
<cell>52</cell>
<cell>30</cell>
<cell>8</cell>
<cell>0</cell>
</row>
<row>
<cell>2</cell>
<cell>CA</cell>
<cell>TAYLOR RIDGE</cell>
<cell>285</cell>
<cell>72</cell>
<cell>15</cell>
<cell>0</cell>
</row>
<row>
<cell>1</cell>
<cell>CA</cell>
<cell>SKOKIE</cell>
<cell>489</cell>
<cell>60</cell>
<cell>12</cell>
<cell>0</cell>
</row>
<row>
<cell>1</cell>
<cell>CA</cell>
<cell>BEECHER</cell>
<cell>95</cell>
<cell>46</cell>
<cell>17</cell>
<cell>0</cell>
</row>
</result>
I find your question interesting. Moreover because you spend almost all your reputation points for the bounty I decided that you really need the solution of the problem. So I made the following demo for you. At the start it displays the full grid without grouping:
With respect of the select element you can choose the grouping column and receive as the result like
or
depend on the choice in the select element. If you choose "No grouping" the original view of the grid will be restored.
For the implementation I used groupSummary with the custom implementation of summaryType.
I recommend you to read the answer additionally which describes how one can customize the summary row of the grouping.
The HTML code of body of the demo is
<fieldset style="float:left" class="ui-widget ui-widget-content ui-corner-all ui-jqgrid">
<select id="chooseGrouping">
<option value="">No grouping</option>
<option value="State">State</option>
<option value="City">City</option>
<option value="Level">Level</option>
</select>
</fieldset>
<div style="clear:left">
<table id="grid"><tr><td></td></tr></table>
</div>
The corresponding the JavaScript code is below:
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');
});
这篇关于jqGrid中的自定义客户端聚合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
