Как я могу изменить цвет фона ячейки в пользовательском форматере jqgrid? - PullRequest
Новая
       30

Как я могу изменить цвет фона ячейки в пользовательском форматере jqgrid?

9 голосов
/ 14 июля 2010

Я могу изменить цвет текста, выполнив это в пользовательском форматере jqgrid: 

function YNFormatter(cellvalue, options, rowObject)
{
    var color = (cellvalue == "Y") ? "green" : "red";
    var cellHtml = "<span style='color:" + color + "' originalValue='" +
                                cellvalue + "'>" + cellvalue + "</span>";

    return cellHtml;
 }

но теперь я хочу изменить цвет фона всей ячейки (вместо цвета текста).

Возможно ли это?

Ответы [ 3 ]

20 голосов
/ 13 февраля 2011

Если вы хотите использовать элемент <span> внутри пользовательского форматера ячеек, вы можете вернуться из пользовательского форматера 

return '<span class="cellWithoutBackground" style="background-color:' +
       color + ';">' + cellvalue + '</span>';

, где стиль span.cellWithoutBackground вы можете определить, например, как следующий 

span.cellWithoutBackground
{
    display:block;
    background-image:none;
    margin-right:-2px;
    margin-left:-2px;
    height:14px;
    padding:4px;
}

Как это работает, вы можете увидеть вживую здесь : enter image description here

ОБНОВЛЕНО: Ответ старый.Лучше всего использовать cellattr callback в colModel вместо использования пользовательских форматеров.Для изменения цвета фона ячейки обычно просто присваивается атрибут style или class ячейкам столбца (<td> элементов).Обратный вызов cellattr, определенный в столбце colModel, позволяет именно это сделать.Можно по-прежнему использовать предопределенные форматеры , например formatter: "checkbox", formatter: "currency", formatter: "date" и т. Д., Но при этом изменить цвет фона в столбце.Точно так же обратный вызов rowattr, который можно определить как опцию jqGrid (вне определенного столбца colModel), позволяет назначить стиль / класс всей строки (<tr> элементов).

Более подробную информацию о cellattr можно найти, например, здесь и здесь . Другой ответ объясняет rowattr.

1 голос
/ 01 января 2011

Вот что я сделал: 

jQuery("#grid_id").jqGrid({
    ...
       colModel: [
          ...
          {name:'price', index:'price', width:60, align:"center", editable: true, formatter:myFmatter},
          ...
       ],
        afterInsertRow: function(rowId, data)
        {
            $("#grid_id").setCell(rowId, 'price', '', {'background-color':'#' + data.colorHEX});
        }
...
});
0 голосов
/ 14 июля 2010

Здесь 

$("#cell").setCell(Row , Column, Value, { background: '#888888'});

На самом деле вам даже не понадобится пользовательский форматировщик, если вы просто собираетесь сделать это для настройки цветов. Вы даже можете установить значение цвета здесь, как, 

var color = (Value == "Y") ? "green" : "red";
$("#cell").setCell(Row , Column, Value, { background: '#888888', color: color});

Счастливое кодирование.

...