如何在分层jqgrid中设置每个级别的背景色 [英] How set background color of each level in hierarchical jqgrid

问题描述

我在asp.net mvc项目中使用免费的jqgrid(v5.1.1). 在我看来，我有5个层次的jqgrid.如何设置每个级别标题的背景颜色?例如，第一级的标题为蓝色"颜色，第二级的标题为绿色"颜色，第三级的标题为浅蓝色"颜色，并且....

I use free jqgrid(v5.1.1) in my asp.net mvc project. In my view,I have 5 level hierarchical jqgrid. how can I set background color of header of each level? for example header of first level has "blue" color,second level has "green" color,third level has "light blue" color and....

这是我的代码:

 //************************************fill grid level 1 **********************************
function FillJQueryGrid(ProjectIdVal) {

    $("#jqGrid").jqGrid({
        url: '@Url.Action("GetCodingCodeSumLists", "Report")' + '?ProjectId=' + ProjectIdVal,// jqgrid_data,

        jsonReader: {
            repeatitems: false,
            root: function (obj) {
                return obj.records;
            }
        },
        datatype: "json",
        height: 'auto',
        page: 1,
        colModel: [
            { label: 'Fieco Doc No.', name: 'comp_code', key: true},
            { label: 'Subject', name: 'Comp_Subject' },
            { label: 'Delay', name: 'sum_delay_count' },

        ],
        width:"100%",
        loadonce: true,
        autowidth: true,
        rowNum: 20,
        subGrid: true,
        subGridRowExpanded: showChildGridrevision,
        pager: "#jqGridPager"
    });
        };

//***********************************fill grid level 2 *******************************************
    function showChildGridrevision(parentRowID, parentRowKey) {
        var childGridID = parentRowID + "_table";
        var childGridPagerID = parentRowID + "_pager";

        var childGridURL = '@Url.Action("GetRevisionSumLists", "Report")' + '?CompCode=' + parentRowKey;

        $('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');

        $("#" + childGridID).jqGrid({
            url: childGridURL,
            jsonReader: {
                repeatitems: false,
                root: function (obj) {
                    return obj.records;
                }
            },
            datatype: "json",
            height: 'auto',
            width: "100%",

            page: 1,
            colModel: [
                {label:'CompCode_Revision',name:'CompCode_Revision',key:true,hidden:true},
                { label: 'comp_code', name: 'comp_code', hidden: true },
                { label: 'revision', name: 'revision',width:500 },
                { label: 'Delay', name: 'sum_delay_count',width:500 }
            ],
            loadonce: true,
            subGrid: true,
            subGridRowExpanded: showChildGridTransmital,
            pager: "#" + childGridPagerID
        });

    }

    //***********************************fill grid level 3 *******************************************
    function showChildGridTransmital(parentRowID2, parentRowKey2) {
        debugger;
        var childGridID2 = parentRowID2 + "_table";
        var childGridPagerID2 = parentRowID2 + "_pager";

        var childGridURL2 = '@Url.Action("GetTransmitalSumLists", "Report")' + '?CompCode_Revision=' + parentRowKey2;

        $('#' + parentRowID2).append('<table id=' + childGridID2 + '></table><div id=' + childGridPagerID2 + ' class=scroll></div>');

        $("#" + childGridID2).jqGrid({
            url: childGridURL2,
            jsonReader: {
                repeatitems: false,
                root: function (obj) {
                    return obj.records;
                }
            },
            datatype: "json",
            height:'auto',
            page: 1,
            colModel: [
                { label: 'CompCode_Revision_Transmital', name: 'CompCode_Revision_Transmital', key: true,hidden:true},
                { label: 'CompCode_Revision', name: 'CompCode_Revision', hidden: true },
                { label: 'transmital no', name: 'trans_ref_no' ,width:200},
                { label: 'transmital subject', name: 'ChkMain_Subject' ,width:400},
                { label: 'transmital date', name: 'trans_date',width:200 },
                { label: 'Delay', name: 'sum_delay_count',width:200 }
            ],

            width:'100%',
            loadonce: true,
            subGrid: true,
            subGridRowExpanded: showChildGridReceiver,
            pager: "#" + childGridPagerID2
        });

    }

    //***********************************fill grid level 4 *******************************************
    function showChildGridReceiver(parentRowID, parentRowKey) {
        debugger;
        var childGridID = parentRowID + "_table";
        var childGridPagerID = parentRowID + "_pager";

        var childGridURL = '@Url.Action("GetReceiverSumLists", "Report")' + '?CompCode_Revision_Transmital=' + parentRowKey;

        $('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');

        $("#" + childGridID).jqGrid({
            url: childGridURL,
            jsonReader: {
                repeatitems: false,
                root: function (obj) {

                    return obj.records;
                }
            },
            datatype: "json",
            page: 1,
            colModel: [
                { label: 'CompCode_Revision_Transmital_receiver', name: 'CompCode_Revision_Transmital_receiver', key: true, hidden: true },
                { label: 'receiver_id', name: 'receiver_id',hidden:true },
                { label: 'Receiver Name', name: 'receiver_name',width:500 },
                { label: 'Delay', name: 'sum_delay_count', width: 500 }
            ],
            loadonce: true,
            height: '100%',
            subGrid: true,
            subGridRowExpanded: showChildGridLetter,
            pager: "#" + childGridPagerID
        });

    }
    //***********************************fill grid level 5 *******************************************
    function showChildGridLetter(parentRowID, parentRowKey) {
        debugger;
        var childGridID = parentRowID + "_table";
        var childGridPagerID = parentRowID + "_pager";

        var childGridURL = '@Url.Action("GetLettersOfCodingWithDelayLists", "Report")' + '?CompCode_Revision_Transmital_Receiver=' + parentRowKey;

        $('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');

        $("#" + childGridID).jqGrid({
            url: childGridURL,
            jsonReader: {
                repeatitems: false,
                root: function (obj) {

                    return obj.records;
                }
            },
            datatype: "json",
            page: 1,

            colModel: [
                { label: 'DCC_letter_id', name: 'DCC_letter_id', key: true, hidden: true },
                { label: 'CommentLetter No', name: 'Let_no'},
                { label: 'Subject', name: 'Let_subject' ,width:300},
                { label: 'Estimate Date', name: 'estimate_date_of_letter' },
                { label: 'Send Date', name: 'Let_date' },
                { label: 'Delay', name: 'delay_count_of_letter'}
            ],
            loadonce: true,
            height: '100%',
            subGrid: false,
            pager: "#" + childGridPagerID
        });

    }

推荐答案

首先，我要提到的是，没有免费的jqGrid v5.1.1.它是商业版本，您可以在链接下的价格下看到该价格，该链接可以在. 免费jqGrid 是jqGrid的替代分叉，我从此开始开发2014年底，在"jqGrid"结束并将分叉重命名为"Guriddo jqGrid JS"之后.

First of all, I want to mention, that there are no free jqGrid v5.1.1. It's commercial version, which price you can see under under link, which you see in the comment at the beginning of jquery.jqGrid.min.js: "License: http://guriddo.net/?page_id=103334%22". Free jqGrid is alternative fork of jqGrid, which I develop starting with the end of 2014, after the end of "jqGrid" and renaming the fork to "Guriddo jqGrid JS".

第二个重要的共同点:重要的是，HTML页面上没有 id个重复项.因此，应该选择唯一的id值.在使用子网格的情况下，如果打开多个子网格，则可以轻松获得ID副本.通过在所有子网格中使用idPrefix，可以非常轻松地解决问题.例如，您可以使用

The second important common remark: it's important, that one has no id duplicates on HTML page. Thus one should choose unique id values. In case of usage subgrids one can easy get id duplicates if multiple subgrids are opened. One can solve the problem in very easy way, by usage idPrefix in all subgrids. For example you can use

idPrefix: parentRowKey + "_" // or parentRowKey2 + "_"

现在介绍您的主要问题.有多种方法使用background-color来允许用户查看网格的级别.例如，每个子网格都由两部分组成:td.subgrid-cell和td.subgrid-data.可以在td.subgrid-cell上设置背景颜色.您将获得下图所示的结果

Now about your main problem. There are many ways to use background-color to allow the user to see the level of the grid. For example, every subgrid consist of two parts: td.subgrid-cell and td.subgrid-data. One can set background color on td.subgrid-cell. You will have the results like on the picture below

另一个选项是在每个子网格的列标题上设置背景颜色.结果会像

One more option will be setting background color on the column headers of every subgrid. The results will be like

如果您要使用免费的jqGrid ，则可以使用labelClasses的labelClasses属性c9>.您只需将属性labelClasses: "blue"添加到colModel并定义以下CSS规则:

If you would use free jqGrid, then you can use labelClasses property of colModel. You need just add the property labelClasses: "blue" to colModel and to define the following CSS rule:

.ui-jqgrid-labels .blue {
    background-color: #b3d9ff;
    background-image: none;
}

要将labelClasses: "blue"选项添加到子网格的所有列，可以使用子网格的`cmTemplate``选项:

To add labelClasses: "blue" option to all columns of subgrid you can use `cmTemplate``option of the subgrid:

cmTemplate: { labelClasses: "blue" }

subGridRowExpanded的代码可能如下:

subGridRowExpanded: function (subgridDivId, rowid) {
    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
        subgridData = $(this).jqGrid("getLocalRow", rowid).details,
        $subgridDataDiv = $("#" + subgridDivId),
        $subgridCell = $subgridDataDiv.closest(".subgrid-data").prev(".subgrid-cell");

    $subgridCell.addClass("blue"); // set background color on td.subgrid-cell
    $subgridDataDiv.append($subgrid);
    $subgrid.jqGrid({
        idPrefix: rowid + "_",
        data: subgridData,
        colModel: [
            { name: "c1", label: "Col 1" },
            { name: "c2", label: "Col 2" },
            { name: "c3", label: "Col 3" }
        ],
        cmTemplate: { labelClasses: "blue" }, // set background color on column headers
        iconSet: "fontAwesome",
        autowidth: true,
        autoencode: true,
        sortname: "c1"
    });
}

将需要添加如下所示的CSS规则

One will be need to add CSS rule like the following

.ui-jqgrid .ui-subgrid .subgrid-cell.blue {
    background-color: #b3d9ff;
    background-image: none;
}

请参阅演示 https://jsfiddle.net/OlegKi/q5j6vnLa/.

如果必须使用Guriddo的旧jqGrid，则不能使用labelClasses，但是可以使用setLabel方法，例如，在列标题上分配类.

If you have to use old jqGrid of Guriddo, then you can't use labelClasses, but you can use setLabel method, for example, to assign class on the column header.

这篇关于如何在分层jqgrid中设置每个级别的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！