在jqGrid中更改組中行的樣式/字體

我有一個具有分組的jqGrid。我的jqGrid代碼與Oleg提供的我的上一個問題here或working fiddle類似。在jqGrid中更改組中行的樣式/字體

$('#states').jqGrid({ 
    datatype: 'local', 
    data: data.DOCS, 
    colNames: ['', 'Documents Received', 'Comments', 'NA', 'DocGroup'], 
    colModel: [ 
     { name: 'Documents', index: 'Documents', align: 'left', sortable: false, editable: false, width: 20 }, 
     { name: 'DocsReceived', index: 'DocsReceived', align: 'center', sortable: false, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 140 }, 
     { name: 'Comments', index: 'Comments', align: 'center', sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "3", cols: "16" }, width: 180 }, 
     { name: 'NA', index: 'NA', editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue} }, 
     { name: 'DocGroup', index: 'DocGroup', editable: false, width: 1, 
     sorttype: function (cellvalue, rowObject) { 
      return cellvalue? cellvalue : rowObject.Documents; 
     }} 
    ], 
    rowNum: data.DOCS.length, 
    //rowList: [10, 20, 30], 
    pager: '#statespagerdiv', 
    viewrecords: true, 
    sortorder: "asc", 
    sortname: 'Documents', 
    grouping: true, 
    groupingView: { 
     groupField: ['DocGroup'], 
     groupColumnShow: [false], 
     groupDataSorted: true, 
     groupOrder : 'asc' 
    }, 
    localReader: { 
     id: 'ConfigId' 
    }, 
    shrinkToFit: false, 
    height: 'auto', 
    loadComplete: function() { 
     hideGroupHeaders(this); 
    }, 
    onSelectRow: function (id) { 
     $(this).jqGrid('saveRow', previouslyselectedRow, false, 'clientArray'); 
     previouslyselectedRow = setJQGridRowEdit(id, previouslyselectedRow, $(this)); 
    }//, 
    //width: 710 
});

我怎麼能有未分組（或不在一組）和分組報頭具有相同風格的行，但排在一組應該有那些不在組或不同的風格分組標題。

來源

2015-02-23 fcmaine

我不確定我是否正確理解了要求。我在演示中修改了

function hideGroupHeaders(grid) { 
    var i, names = grid.p.groupingView.groups, l = names.length, $grp, j; 
    for (i = 0; i < l; i++) { 
     $grp = $('#' + grid.id + "ghead_0_" + i); 
     if (names[i].value === '') { 
      $grp.hide(); 
     } else { 
      // hide the grouping row 
      $(grid).jqGrid('groupingToggle', grid.id + "ghead_0_" + i); 
      for (j = 0; j < names[i].cnt; j++) { 
       $(grid.rows[$grp[0].rowIndex + 1 + j]).addClass("grouppedRows"); 
      } 
     } 
    } 
}

其中我將grouppedRows類設置爲隱藏的分組行。您可以在這裏看到結果：http://jsfiddle.net/OlegKi/xx7Jg/82/。如果打開組，則看到行將以該類別定義的另一種樣式顯示grouppedRows

enter image description here

來源

2015-02-24 20:04:00 Oleg

在jqGrid中更改組中行的樣式/字體

回答

相關問題