Как изменить цвет текста на основе проверки некоторых условий в jqgrid

Question

Как изменить цвет текста на основе проверки некоторых условий в jqgrid

0

Мне нужно изменить цвет содержимого внутри таблицы в определенной строке.

У меня есть столбец внутри таблицы как "Рабочий путь: защищенный путь". эти столбцы содержат данные как "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
    });

Пожалуйста, предоставьте некоторое решение

user2955338 13 май 2014, в 17:38

Источник

0

В табличных данных «EM1: EM2» мне нужно выделить «EM1» зеленым цветом и «EM2» без изменений.
user2955338 13 май 2014, в 14:46

Теги:

javascript

jquery

jqgrid

jqgrid-asp.net

jqgrid-formatter

3 ответа

Ещё вопросы

В табличных данных «EM1: EM2» мне нужно выделить «EM1» зеленым цветом и «EM2» без изменений.

user2955338 · Answer 1 · 2014-05-14T10-45-00.000Z

Большое спасибо.... Я взял оба ответа и сделал некоторые изменения в соответствии с моим требованием... Я работал.....

Конфигурация JqGrid Row:

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

aamir sajjad · Answer 2 · 2014-05-13T13-34-00.000Z

Надеюсь, следующий пример поможет найти решение вашей проблемы.

Конфигурация JqGrid Row:

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

Jai · Answer 3 · 2014-05-13T12-12-00.000Z

В методе 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];
    });
}