关于jquery：更改jqGrid中组中行的样式/字体


Change style/font of the rows in a group in jqGrid

我有一个具有分组功能的 jqGrid。我的 jqGrid 代码类似于我之前的问题 here 或 Oleg 的工作小提琴。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$('#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
});

我怎样才能让未分组(或不在组中)的行和分组标题具有相同的样式，但在一个组中的行的样式应该与那些不在组或分组标题中的行的样式不同。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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