使用jqgrid，是否可以像所附的图像一样对行级别的数据进行分组？基本上，我想将特定行的数据从某些列开始拆分为多行。
例
最佳答案
我建议您使用cellattr在某些单元格上设置rowspan属性，或者将style="display:none"设置为隐藏其他不需要的单元格。这个想法与the answer中的colspan相同。
结果，您可以创建以下网格（请参见the demo）
或另一个（请参见another demo）
网格的问题在于另一个jqGrid功能，例如排序，分页，悬停和选择。某些功能可以通过额外的努力来实现，而另一种则很难实现。
我在演示中使用的代码如下：
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;
}
});
我在上面的代码中使用了附加的
attr属性和输入数据。这只是一个例子。我想使cellattr函数的实现更简单。您可以使用相同的想法，并以任何其他格式放置cellattr所需的信息。