在jqGrid中更改组中行的样式/字体 [英] Change style/font of the rows in a group in jqGrid

问题描述

我有一个带有分组的jqGrid.我的jqGrid代码类似于我先前的问题此处或Oleg的工作小提琴.

I have a jqGrid which has grouping. My jqGrid code is similar to my previous question here or working fiddle by Oleg.

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

如何使未分组(或不在分组中)的行和分组头具有相同的样式，但分组中的行应与不在分组或分组头中的行具有不同的样式. /p>

How can I have rows which are not grouped (or not in a group) and grouping headers have the same style, but rows with in a group should have a style different to that of those not in group or grouping header.

推荐答案

我不确定我是否正确理解该要求.我在演示中进行了修改

I'm not sure that I correctly understand the requirement. I modified in the 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

where I set grouppedRows class to hidden grouped rows. You can see the results here: http://jsfiddle.net/OlegKi/xx7Jg/82/. If one opens the groups one see that the rows will be displayed in another style defined by the class grouppedRows

这篇关于在jqGrid中更改组中行的样式/字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！