展开和折叠时将子网格与网格一起分组答案

【问题标题】：grouping of subgrid along with grid when expanded and colasped展开和折叠时将子网格与网格一起分组
【发布时间】：2017-03-10 13:25:16
【问题描述】：

我有一个 jqgrid，其中我对第一列和第二列进行了分组，这样如果 n 行的列具有相同的值，那么它将合并（对第一行使用 rowspan，对具有相同值的其他行使用 display:none）。

我还有一个子网格。现在，当我扩展网格中的任何行时，分组中的其他行都向左移动。

这是我的分组功能：

attrSetting: 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;
}

我已经编写了一些代码来处理这个问题，每次展开子网格时，rowspan 都会增加 1，并且每次子网格折叠时也会减少 1，如下所示：

var rowspanValue = this.getElements("tbody>tr.ui-widget-content")[row_id - 1].getElement("[aria-describedby=idCommonGridTabledetailMainContainerPATHApp_Stream]").rowSpan;
    this.getElements("tbody>tr.ui-widget-content")[row_id - 1].getElement("[aria-describedby=idCommonGridTabledetailMainContainerPATHApp_Stream]").setAttributes({ rowspan: rowspanValue + 1 });
    this.getElements("tbody>tr.ui-widget-content")[row_id - 1].getElement("[aria-describedby=idCommonGridTabledetailMainContainerPATHApp_\\%CompletionAvg]").setAttributes({ rowspan: rowspanValue + 1 });
    this.getElements("tbody>tr.ui-widget-content")[row_id - 1].getElement("[aria-describedby=idCommonGridTabledetailMainContainerPATHApp_\\%WeightAvg]").setAttributes({ rowspan: rowspanValue + 1 });

但这不起作用，因为只有分组的第一行有行跨度，所以如果我扩展每个分组的第一行，那么它工作正常，对于其他人，问题仍然存在。

有没有什么方法可以检测 DOM 中具有相同分组的所有行，并每次设置第一行的行跨度，或者任何其他方式来实现它。

请建议。

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

我在格式化程序中为我想要分组的列设置了一个自定义属性，这就是我修改代码的方式：

    cellattr: function(rowId, val, rawObject, cm) {
            return pathProjectModel.attrSetting(rowId, val, rawObject, cm) + 'attr-stream =' + val;
    } 



 subGridRowExpanded: function(subgrid_id, row_id) {
       var subgrid_table_id, rowspanValue;
       // grouping of subgrid along with grid
       var streamName = $('#idCommonGridTabledetailMainContainerPATHApp').jqGrid('getCell', row_id, 'Stream');
       var streamGroup = widget.getElements('[attr-stream = "' + streamName + '"]');
        rowspanValue = streamGroup[0].rowSpan;
        for (var i = 0; i < streamGroup.length; i++) {
            streamGroup[i].setAttributes({ rowspan: rowspanValue + 1 });
            streamGroup[i].getClosest("tr.ui-widget-content").getElement("[aria-describedby=idCommonGridTabledetailMainContainerPATHApp_\\%CompletionAvg]").setAttributes({ rowspan: rowspanValue + 1 });
            streamGroup[i].getClosest("tr.ui-widget-content").getElement("[aria-describedby=idCommonGridTabledetailMainContainerPATHApp_\\%WeightAvg]").setAttributes({ rowspan: rowspanValue + 1 });
        }
 }


subGridRowColapsed: function(subgrid_id, row_id) {
    var rowspanValue;
    var streamName = $('#idCommonGridTabledetailMainContainerPATHApp').jqGrid('getCell', row_id, 'Stream');
    var streamGroup = widget.getElements('[attr-stream = "' + streamName + '"]');
    rowspanValue = streamGroup[0].rowSpan;
    for (var i = 0; i < streamGroup.length; i++) {
         streamGroup[i].setAttributes({ rowspan: rowspanValue - 1 });
         streamGroup[i].getClosest("tr.ui-widget-content").getElement("[aria-describedby=idCommonGridTabledetailMainContainerPATHApp_\\%CompletionAvg]").setAttributes({ rowspan: rowspanValue - 1 });
         streamGroup[i].getClosest("tr.ui-widget-content").getElement("[aria-describedby=idCommonGridTabledetailMainContainerPATHApp_\\%WeightAvg]").setAttributes({ rowspan: rowspanValue - 1 });
    }
}

【讨论】：