Question

我需要更改特定行中表格内容的颜色。

我在表格中有一个列为“工作路径：受保护路径”。此列将数据保存为“channel1：channel2”，“channel3：channel4”等等。

基于哪个是活动路径，我需要以绿色突出显示活动路径。

我传递一些数据来检查哪个是活动路径，如data = 1，但我没有得到如何进行条件检查并将颜色分配给jqgrid中的活动通道。请帮我！[的jqGrid] [10]

正如我在快照中所示，我需要突出显示哪个是活动路径。我的代码为

var grid_data = [{
      working: "EM1:EM2",
    hold: "0.0",
    Command: "Forced Switch to Protection"
},

{
    working: "EM3:EM4",
    hold: "0.0",
    Command: "Forced Switch to Protection"
}, {
    working: "EM5:EM6",
    hold: "0.0",
    Command: "Forced Switch to Protection"
},

{
    working: "EM7:EM8",
    hold: "0.0",
    Command: "Forced Switch to Protection"
},

{
    working: "EM9:EM10",
    hold: "0.0",
    Command: "Forced Switch to Protection"
},

{
    working: "EM11:EM12",
    hold: "0.0",
    Command: "Forced Switch to Protection"
},

{
    working: "EM13:EM14",
    hold: "0.0",
    Command: "clear"
},

{
    working: "EM15:EM16",
    hold: "0.0",
    Command: "Forced Switch to Protection"
},

{
    working: "EM11:EM8",
    hold: "0.0",
    Command: "clear"
},

{
    working: "EM9:EM2",
    hold: "0.0",
    Command: "Forced Switch to Protection"
},

{
    working: "EM1:EM2",
    hold: "0.0",
    Command: "Forced Switch to Protection"
},

{
    working: "EM3:EM4",
    hold: "0.0",
    Command: "Forced Switch to Protection"
},
];

jQuery(function($) {

    var grid_selector = "#grid-table";
    var pager_selector = "#grid-pager";
    jQuery(grid_selector).jqGrid({
        data: grid_data,
        datatype: "local",
        height: 370,
        width: 650,
        colNames: ['', 'Working:Protection', 'Hold Off<br >(in Sec)', 'Local Command Requests'],
        colModel: [{
                name: 'myac',
                index: '',
                width: 80,
                fixed: true,
                sortable: true,
                resize: false,
                formatter: 'actions',
                formatoptions: {
                    keys: true,
                    delbutton: false
                    //delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
                    //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
                }
            },

            {
                name: 'working',
                index: 'working',
                width: 60,
                sortable: true,
                editable: false,
                style: 'color:green'
            },

            {
                name: 'hold',
                index: 'hold',
                width: 30,
                editable: true,
                editoptions: {
                    size: "20",
                    maxlength: "10"
                }
            },

            {
                name: 'Command',
                index: 'Command',
                width: 80,
                editable: true,
                edittype: "select",
                editoptions: {
                    width: 20,
                    value: "Lock:Lockout of Protection;Forced:Forced Switch to Protection;work:Forced Switch to Working;Manu:Manual Switch to Protection;Manwork:Manual Switch to Working;clear:clear"
                }
            }
        ],
        viewrecords: true,
        rowNum: 10,
        rowList: [10, 20],
        pager: pager_selector,
        altRows: true,
        //toppager: true,
        multiselect: true,
        //multikey: "ctrlKey",
        multiboxonly: true,
        loadComplete: function() {
            var table = this;
            setTimeout(function() {
                styleCheckbox(table);
                updateActionIcons(table);
                updatePagerIcons(table);
                enableTooltips(table);
            }, 0);
        },
        editurl: $path_base + "/dummy.html", //nothing is saved
        //caption: "Current Settings",
        autowidth: false
    });

请提供一些解决方案

Answer 1

在loadComplete方法中，您可以执行此操作：

loadComplete : function(data){
    $('tr', grid_selector).find('td').each(function(){
         var str = this.innerHTML.split(':');
         this.innerHTML = '<span style="color: green;">' + str[0] + '</span> : ' + str[1];
    });
}

Answer 2

希望以下示例帮助您找到问题的解决方案。

JqGrid行配置：

 { name: 'NewDeviceAvailWatts', index: 'NewDeviceAvailWatts', width: 42, align: 'center', sortable: true, formatter: NewDeviceformatter },

自定义格式化程序：

function NewDeviceformatter(cellvalue, options, rowObject) {
    var cellHtml;
    if (cellvalue < (0)) {
        cellHtml = "<div style='background-color:red;color:black;" + "' originalValue='" +
        cellvalue + "'>" + Math.round(cellvalue) + "</div>";
        return cellHtml;
    }
    else {
        cellHtml = "<div style='background-color:LightGreen;color:black;" + "' originalValue='" +
        cellvalue + "'>" + Math.round(cellvalue) + "</div>";
        return cellHtml;
    }
}

Answer 3

非常感谢....我根据我的要求拿了两个答案并做了一些修改......我工作了.....

JqGrid行配置：

{name:'ChannelMap',index:'ChannelMap', width:60, sortable:true, editable: false, formatter: NewDeviceformatter },

自定义格式化程序：

function NewDeviceformatter(cellvalue, options, rowObject) {
            var cellHtml;
         if (cellvalue < (0)) {
            var str = cellvalue.split(':');
            cellHtml ='<span style="color: blue;">' + str[0] + ':' + str[1]+'</span>';
                return cellHtml;
         }
        else {
            var str = cellvalue.split(':');
        cellHtml ='<span style="color: green;">' + str[0] + '</span> : ' + str[1];
            return cellHtml;
         }
        }

如何根据jqgrid中的某些条件检查更改文本的颜色

3 个答案: