在jqGrid中更改组中行的样式/字体答案

【问题标题】：Change style/font of the rows in a group in jqGrid在jqGrid中更改组中行的样式/字体
【发布时间】：2015-04-25 08:09:20
【问题描述】：

我有一个具有分组功能的 jqGrid。我的 jqGrid 代码类似于我之前的问题 here 或 Oleg 的 working fiddle。

$('#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
});

我怎样才能让未分组（或不在组中）的行和分组标题具有相同的样式，但在组中的行的样式应该与不在组或分组标题中的行不同。

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

我不确定我是否正确理解了要求。我在demo中修改了

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 类定义的另一种样式显示

【讨论】：