将颜色应用于Jqgrid行

时间:2018-03-12 07:41:15

标签: javascript jquery jqgrid

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

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;
}
  

所以在检查条件时是否(rd.isBaseCompany ==“true”)       即使该属性变为真,但没有进入设置类的if条件。可能是什么问题?

2 个答案:

答案 0 :(得分:0)

您可以在.js文件中制作并调用函数作为SetGridColors()。 使用jqGridAfterGridComplete,您可以将网格与函数绑定,以便在完成网格时执行该函数。

因此,使用下面的代码,您可以读取所有行,如果您有一个名为' isBaseCompany'它将相应地绘制行。 (如果您希望为行添加一个类而不是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");

    })
}

希望有所帮助

答案 1 :(得分:0)

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

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

或更严格

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

isBaseCompany 是布尔值而不是字符串