Jqgrid – 分组行级别的数据

使用jqgrid，是否可以像附加图像一样对行级数据进行分组？ 基本上我想要将特定行的数据分成多行，从某些列开始。

例

Answer 1

我build议你使用cellattr在某些单元rowspan上设置rowspan属性，或者设置style="display:none"来隐藏另一个不需要的单元格。 这个想法和答案中的 colspan是一样的 。

因此，您可以创build以下网格（请参阅演示 ）

或另一个（见另一个演示 ）

网格的问题是在另一个jqGridfunction，如sorting，分页，hover和select。 一些可以通过额外的努力实现的特征，但是另一个更难以实现。

我在演示中使用的代码如下：

 var mydata = [ { id: "1", country: "USA", state: "Texas", city: "Houston", attraction: "NASA", zip: "77058", attr: {country: {rowspan: "5"}, state: {rowspan: "5"}} }, { id: "2", country: "USA", state: "Texas", city: "Austin", attraction: "6th street", zip: "78704", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "3", country: "USA", state: "Texas", city: "Arlinton", attraction: "Cowboys Stadium", zip: "76011", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "4", country: "USA", state: "Texas", city: "Plano", attraction: "XYZ place", zip: "54643", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "5", country: "USA", state: "Texas", city: "Dallas", attraction: "Reunion tower", zip: "12323", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "6", country: "USA", state: "California", city: "Los Angeles", attraction: "Hollywood", zip: "65456", attr: {country: {rowspan: "4"}, state: {rowspan: "4"}} }, { id: "7", country: "USA", state: "California", city: "San Francisco", attraction: "Golden Gate bridge", zip: "94129", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "8", country: "USA", state: "California", city: "San Diego", attraction: "See world", zip: "56653", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "9", country: "USA", state: "California", city: "Anaheim", attraction: "Disneyworld", zip: "92802", attr: {country: {display: "none"}, state: {display: "none"}} } ], arrtSetting = function (rowId, val, rawObject, cm) { var attr = rawObject.attr[cm.name], result; if (attr.rowspan) { result = ' rowspan=' + '"' + attr.rowspan + '"'; } else if (attr.display) { result = ' style="display:' + attr.display + '"'; } return result; }; $("#list").jqGrid({ datatype: 'local', data: mydata, colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'], colModel: [ { name: 'country', width: 70, align: 'center', cellattr: arrtSetting }, { name: 'state', width: 80, align: 'center', cellattr: arrtSetting }, { name: 'city', width: 90 }, { name: 'attraction', width: 120 }, { name: 'zip', index: 'tax', width: 60, align: 'right' } ], cmTemplate: {sortable: false}, rowNum: 100, gridview: true, hoverrows: false, autoencode: true, ignoreCase: true, viewrecords: true, height: '100%', caption: 'Grid with rowSpan attributes', beforeSelectRow: function () { return false; } }); 

我在上面的代码中使用了与input数据放在一起的附加attr属性。 这只是一个例子。 我想让cellattr函数的实现更简单。 您可以使用相同的想法，并以任何其他格式放置cellattr所需的信息。

Answer 2

这是我对JSON数据的解决scheme：

 var prevCellVal = { cellId: undefined, value: undefined }; $("#list").jqGrid({ url: 'your WS url' datatype: 'json', mtype: "POST", ajaxGridOptions: { contentType: "application/json" }, colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'], colModel: [ { name: 'country', width: 70, align: 'center', cellattr: function (rowId, val, rawObject, cm, rdata) { var result; if (prevCellVal.value == val) { result = ' style="display: none" rowspanid="' + prevCellVal.cellId + '"'; } else { var cellId = this.id + '_row_' + rowId + '_' + cm.name; result = ' rowspan="1" id="' + cellId + '"'; prevCellVal = { cellId: cellId, value: val }; } return result; } }, { name: 'state', width: 80, align: 'center' }, { name: 'city', width: 90 }, { name: 'attraction', width: 120 }, { name: 'zip', index: 'tax', width: 60, align: 'right' } ], cmTemplate: {sortable: false}, rowNum: 100, gridview: true, hoverrows: false, autoencode: true, ignoreCase: true, viewrecords: true, height: '100%', caption: 'Grid with rowSpan attributes', beforeSelectRow: function () { return false; }, gridComplete: function () { var grid = this; $('td[rowspan="1"]', grid).each(function () { var spans = $('td[rowspanid="' + this.id + '"]', grid).length + 1; if (spans > 1) { $(this).attr('rowspan', spans); } }); } }); 

这个例子是针对单个列的，但是只有很less的更正，它也可以用于多个列。

Answer 3

嘿那里“pistipanko”

我已经改变了你的解决scheme，我认为它运作得更好。

 cellattr: function(rowId, val, rawObject, cm, rdata) { var result; var cellId = this.id + '_row_' + rawObject[3] + grid.getGridParam('page'); if (prevCellVal.cellId == cellId) { result = ' style="display: none"'; } else { result = ' rowspan="' + rawObject[6] + '"'; prevCellVal = { cellId: cellId, value: rawObject[3] }; } return result; } 

我正在使用另一个列的值分组，这就是为什么rawObject[3]而我正在使用rawObject[6]的应用程序返回的rowspan值，

很好用。

希望它有助于:)