将颜色应用于 Jqgrid 行

Question

我想根据公司属性的值将背景颜色应用于 jqGrid 行的行，但是基本的 rowattr 没有将 class 应用于行。下面是代码，针对条件添加了***。

function drawGrid() {
                $("#grid").jqGrid("GridUnload");
                var grid = $("#grid"),lastSel;
                jQuery("#grid").jqGrid({
                    sortable: true,
                    datatype: "local",
                    data: $scope.jqGridData,
                    colNames: $scope.jqgridColHeader, 
                    colModel: $scope.colModelValue,
                    viewrecords: true,
                    caption: "Peer Analysis",
                    rowNum:10,
                    rowList:[10,20,30],
                    recordpos: 'left',
                    footerrow : true,
                    userDataOnFooter : true,
                    restoreAfterSelect: false,
                    saveAfterSelect: true,
                    altRows : true,
                    multiselect: true,
                    cellEdit:   true,
                    autowidth:true,
                    treeGrid: true,
                    grouping: true,
                    shrinkToFit: true,
                    pager: '#pager',
                    gridview: true,
                    'cellEdit': true,
                    'cellsubmit' : 'clientArray',
                    editurl: 'clientArray',
                    onSelectRow: function(id){ 
                    },
                    ***rowattr: function (rd) {
                    console.log("rddetails"+rd.isBaseCompany);
                    if (rd.isBaseCompany=="true") { 
                    return {"class": "baseCompanyClass"};
                    //alert("hi");
                    } }***,
                    gridComplete: function() {
                    },afterSaveCell:function (rowid, cellname, value, iRow, iCol){
                        var rowData = $('#grid').jqGrid('getRowData', rowid);
                        $('#grid').jqGrid('saveRow', rowData);
                        var price = rowData.price;
                        var tarPrice = rowData.tagetPrice
                        var formula0= rowData.formula0;
                        var formula1= rowData.formula1;
                        var formula2= rowData.formula2;
                        var formula3= rowData.formula3;
                        var formula4= rowData.formula4; 



                        }else if(cellname=='tagetPrice'){
                            rowData.upside = Number(tarPrice/price)-1;
                            $('#grid').jqGrid('setRowData', rowid, rowData);
                        }else{
                            if(cellname=='formula0'){
                                rowData.formula0 = formula0;
                            }if(cellname=='formula1'){
                                rowData.formula1 = formula1;
                            }
                            if(cellname=='formula2'){
                                rowData.formula2 = formula2;
                            }if(cellname=='formula3'){
                                rowData.formula3 = formula3;
                            }if(cellname=='formula4'){
                                rowData.formula4 = formula4;
                            }
                            $('#grid').jqGrid('setRowData', rowid, rowData);
                        }   
                    },ondblClickRow: function(rowid) {
                            $scope.newBaseComp = jQuery('#grid').jqGrid ('getRowData', rowid);
                            $scope.showChangeBase(rowid-1);
                        },
                        beforeSaveCell : function(rowid,celname,value,iRow,iCol) {
                          if(rowid) {
                              return value;
                          }
                        },
                        loadComplete:function()
                        {

                        }});


                    }





Here is the css class for the same.

 .ui-widget-content .baseCompanyClass{
    background-color: #DCFFFF; 
    background-image: none;
}

So while checking the condition if(rd.isBaseCompany=="true") even though the the attribute comes to be true but doesn't enter into the if condition for setting the class.what could be the issue??

Answer 1

您可以在您的 .js 文件中创建和调用函数，如 SetGridColors() 波纹管。使用 jqGridAfterGridComplete，您可以将网格与函数绑定，以便在网格完成时执行该函数。

因此，使用下面的代码，您可以读取所有行，如果您有一个名为 'isBaseCompany' 的字段，它将相应地绘制该行。（如果您希望在行中添加 class 而不是 css 句柄，请使用注释中的代码）

function SetGridColors() {
    $("#your_grid_id").bind("jqGridAfterGridComplete", function () {
        var rows = $("#your_grid_id").getDataIDs();
        for (var i = 0; i < rows.length; i++) {
            var status = $("#your_grid_id").getCell(rows[i], "isBaseCompany");
            if (isBaseCompany== "1") {
                $("#your_grid_id").jqGrid('setRowData', rows[i], false, { color: 'black', weightfont: 'bold', background: 'lightgreen' });
                //$("#your_grid_id").find('#' + rows[i]).addClass("isBaseCompany-1");

            }
            else if (isBaseCompany= "0")
                $("#your_grid_id").jqGrid('setRowData', rows[i], false, { color: 'black', weightfont: 'bold', background: 'salmon' });
              //  $("#your_grid_id").find('#' + rows[i]).addClass("isBaseCompany-0");

    })
}

希望对您有所帮助

Answer 2

您的数据类型是本地的。这里的重要部分是如何定义您的数据字段 isBaseCompany 。如果数据字段是字符串，如果它是 json 定义，则应该完成条件，那么您只需要比较

if (rd.isBaseCompany) { 
    // do something
}

或更严格地说

if (rd.isBaseCompany === true ) { 
    // do something
}

即 isBaseCompany 是一个布尔值而不是字符串

将颜色应用于 Jqgrid 行

Applying color to Jqgrid row

javascript

jquery

jqgrid