jqGrid中的自定义聚合/分组 [英] Custom aggregation/grouping in jqGrid
问题描述
概述
我需要通过巧妙的技巧，修改或修改插件来自定义jqGrid插件，以支持以下类型的聚合/分组.
I need to somehow customize the jqGrid plugin, either by clever tricks, hacks, or modification of the plugin, to support the following type of aggregation/grouping.
我非常感谢jqGrid社区有关如何实现此想法的一些想法.
I would be very grateful for some ideas from the jqGrid community on how to implement this.
详细信息
聚合/分组的工作原理如下.
The aggregation/grouping works as follows.
最初，向用户显示如下所示的数据网格，并根据列1"进行了分组.注意超链接(例如"+5")；这些超链接表示折叠的"行，其中除具有超链接的那些列外，这些行中的所有数据的所有列均具有相同的值.
The user is initially presented with a grid of data as in the following, grouped according to "Column 1." Notice the hyperlinks (e.g. "+5"); these hyperlinks represented "collapsed" rows in which all of the data in those rows have the same values for all columns except the ones with hyperlinks.
例如，通过单击"+5"链接，表格将展开以显示先前折叠为1的5行(替换包含"+5"链接的折叠行).请注意，现在展开的行在第2列中均具有唯一值，该列以前具有"+5"链接.
By clicking, for example, on the "+5" link, the table expands to display the 5 rows which were previously collapsed into one (replacing the collapsed row that included the "+5" link). Notice that now the expanded rows all have unique values in Column 2, which previously had the "+5" link.
关于如何实现此目标的任何想法?其他任何网格插件都可以做到这一点吗?
Any ideas on how to implement this? Is this possible in with any other grid plugins?
推荐答案
jqGrid不直接支持您需要的这种分组，因此必须实施某种手动分组.
jqGrid don't support directly such kind of grouping which you need, so one have to implement some kind of manual grouping.
分组本身应在服务器上完成，并且服务器响应应包含扩展行和折叠行.我不太了解一个组扩展链接应该如何工作，因此我描述了如何使用每行一个链接来实现组.另一方面，我决定实施预先扩展的行的折叠.我是针对JSON数据中包含的其他信息进行此操作的.
The grouping itself should be done on the server and the server response should contain both extended and collaped rows. I don't quite understand how more as one group expanding link should work so I describe how one can implement the gruping with one link per row. On the other side I decide to implement the collapsing of the previosly expanded row. I do this with respect of additional information included in the JSON data.
让我们服务器生成以下JSON数据:
Let us the server produce the following JSON data:
{
"total": 1,
"page": 1,
"records": 15,
"rows" : [
{"id":"1", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"3523423423", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"87689768", "column7":"8755"},
{"id":"2", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"545345343", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"3", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"4234235", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"4", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"3242323", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"5", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"6453334", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"6", "collapseTo":null, "expandTo":{"column2":["1","2","3","4","5"]}, "column1":"534345345", "column2":"+5", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"7", "collapseTo":{"id":"9","colName":"column4"}, "expandTo":null, "column1":"763484", "column2":"773845358", "column3":"7657565663", "column4":"87546598", "column5":"75675634", "column6":"89058", "column7":"3453463"},
{"id":"8", "collapseTo":{"id":"9","colName":"column4"}, "expandTo":null, "column1":"763484", "column2":"773845358", "column3":"7657565663", "column4":"98976989", "column5":"75675634", "column6":"89058", "column7":"3453463"},
{"id":"9", "collapseTo":null, "expandTo":{"column4":["7","8"]}, "column1":"763484", "column2":"773845358", "column3":"7657565663", "column4":"+2", "column5":"75675634", "column6":"89058", "column7":"3453463"},
{"id":"10", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"909424", "column7":"9768768"},
{"id":"11", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"22934920", "column7":"9768768"},
{"id":"12", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"124376325", "column7":"9768768"},
{"id":"13", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"36727845", "column7":"9768768"},
{"id":"14", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"6856345", "column7":"9768768"},
{"id":"15", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"43536366", "column7":"9768768"},
{"id":"16", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"76543686", "column7":"9768768"},
{"id":"17", "collapseTo":null, "expandTo":{"column6":["10","11","12","13","14","15","16"]}, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"+7", "column7":"9768768"}
]
}
一个人可以使用隐藏的列来保存其他信息.我使用的不是 jQuery.data ，它可以更有效地保存信息.具有分组链接的行在JSON数据中包含诸如"expandTo":{"column2":["1","2","3","4","5"]}之类的信息.其他行包含"expandTo":null.在loadComplete内部，我们可以隐藏所有具有"expandTo":null的行.在其他行中，我们会将某些列的包含转换为链接.例如，如果expandTo具有{"column2":["1","2","3","4","5"]}，那么我们应该将项目从"column2"列转换为链接.在链接上单击操作后，我们将隐藏该行，并使数组["1","2","3","4","5"]中的所有行可见.
One can use hidden column to save additional information. I use instead of that jQuery.data which allows to save the information more effectively. The rows with the grouping links contain in the JSON data the information like "expandTo":{"column2":["1","2","3","4","5"]}. Other rows contain "expandTo":null. Inside of loadComplete we can hide all rows having "expandTo":null. In the other rows we will convert the contain of some columns to links. For example if expandTo has {"column2":["1","2","3","4","5"]} then we should convert the item from the column "column2" to the link. As the click action on the link we will hide the row and make all rows from the array ["1","2","3","4","5"] visible.
演示此操作的演示，您可以在此处找到.单击链接后，将展开分组.双击展开的行，将其折叠并退回以前状态的网格.
The demo which demonstrate this you can find here. On clicking of the link the grouping will be expanded. The double click on the expanded rows follows to collapsing the rows and retiring the grid in the previous state.
相应的代码是:
var grid = $("#list"),
myExpanding = function(e) {
var myData = $(this).data("expandTo"), i, l;
if (myData && typeof(myData.length) !== "undefined" && myData.length>0) {
for (i=0,l=myData.length; i<l; i++) {
$("#"+myData[i]).show();
}
$(this).closest("tr").hide();
}
e.preventDefault();
}, cmNameToIndex = {};
grid.jqGrid({
datatype:'json',
url:'CustomGrouping.json',
colNames:[//'Expand To',
'Column 1','Column 2','Column 3','Column 4','Column 5','Column 6','Column 7'],
colModel:[
//{name:'expandTo', width:1, hidden:true},
{name:'column1'},
{name:'column2'},
{name:'column3'},
{name:'column4'},
{name:'column5'},
{name:'column6'},
{name:'column7'}
],
cmTemplate:{width:85,align:'center',sortable:false},
rowNum:10000,
gridview:true,
jsonReader:{repeatitems: false},
loadComplete: function(data) {
var i=0, rows = data.rows, l = rows.length, cm = grid[0].p.colModel, rowid,
idToItem = {}, item;
// The ids of the rows which has in the first column (expandTo) the information
// about rows which should be expanded will be saved in the nonHiddenRows array.
// For the rows the expandingInfo[rowid]
for(; i<l; i++) {
item = rows[i];
idToItem[item.id] = item;
}
// fill cmNameToIndex to find easier the column index by column name
cmNameToIndex = {};
for (i=0,l=cm.length;i<l;i++){
cmNameToIndex[cm[i].name] = i;
}
$("tr.jqgrow",this).each(function(){
var tr=$(this), colName, linkInfo, td, rowid = this.id, item = idToItem[rowid];
//if ($.inArray(rowid,nonHiddenRows) !== -1) {
if (item && item.expandTo) {
//tr.show();
linkInfo = item.expandTo;
for (colName in linkInfo) {
if (linkInfo.hasOwnProperty(colName)) {
i = cmNameToIndex[colName];
td = $("td:nth-child("+(i+1)+")",this);
td.wrapInner($('<a>',
{
href:"#",
click:myExpanding,
}).data("expandTo",linkInfo[colName]));
}
}
} else {
tr.hide();
}
if (item && item.collapseTo) {
tr.data("collapseTo",item.collapseTo)
}
});
},
ondblClickRow: function(rowid, iRow, iCol, e) {
var tr = $("#"+rowid), tr1 = $(e.target,grid[0].rows).closest("tr.jqgrow"),
collapse = tr.data("collapseTo"), i, ids, l;
if (collapse && collapse.id && collapse.colName) {
i = cmNameToIndex[collapse.colName];
tr = $("#"+collapse.id);
ids = $("a", tr[0].cells[i]).data("expandTo");
if (ids && ids.length) {
tr.show();
for(i=0,l=ids.length; i<l; i++) {
$("#"+ids[i]).hide();
}
}
}
},
height: '100%'
});
这篇关于jqGrid中的自定义聚合/分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
