цвет ячейки dgrid на основе значения ячейки

У меня есть dgrid, и я пытаюсь установить цвет фона ячейки на основе значения ячейки, используя функцию форматирования и css. Dgrid находится внутри div с идентификатором UnMarkedTicketGridDiv.

Функция форматирования:

formatPriority: function (item) {
            return = "<td class='" + item + "'>" + item + "</td>";
        },

CSS:

#UnMarkedTicketGridDiv td.NORM
{
    background-color:Green;
    color:Green;
}

Любая идея, почему клетки не окрашиваются в зеленый цвет? Я проверил, что функция форматирования вызывается, и есть элемент с именем «НОРМ», так что этот класс определяется. Я думаю, что это что-то с правильным селектором css?

Вот определение столбца сетки:

grid = new (declare([OnDemandGrid, DijitRegistry]))({
                store: gridStore,
                columns: {
                    ID: "ID",
                    Ticket: "Ticket",
                    Street: "Address",
                    DateRcvdInt: { label: "Date Rcvd", formatter: this.formatDate },
                    WorkDateInt: { label: "Work Date", formatter: this.formatDate },
                    Priority: { label: "Priority", formatter: this.formatPriority },
                    Type: "Type",
                    Company: "Company"
                }

Спасибо


javascript css dojo dgrid
person pvitt    schedule 26.05.2015    source источник
comment
Вы не должны отображать td из средства форматирования; сама ячейка таблицы является родительским элементом для вывода средства форматирования. Вероятно, есть лучший способ сделать то, что вы пытаетесь сделать, возможно, используя renderCell. Можете ли вы также включить определение столбца в вопрос?   -  person Ken Franqueiro    schedule 27.05.2015
comment
Я поместил определение столбца выше. Я также пытался использовать тег div в моей функции форматирования вместо tds, но получил тот же результат — я посмотрю на renderCell — спасибо!   -  person pvitt    schedule 27.05.2015
comment
Если вы изменили тип тега, вы также изменили селектор в своем CSS? td.NORM больше не будет соответствовать (и, вероятно, в любом случае более уместно просто убрать тег из селектора).   -  person Ken Franqueiro    schedule 28.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

Как правило, самый простой способ сделать это — использовать renderCell, что дает вам прямой доступ к ячейке:

Priority: {
    label: "Priority",
    renderCell: function (object, value, cell) {
        cell.className += " " + value;
        return document.createTextNode(value);
    }
}

Обратите внимание, что renderCell может вернуть узел, который будет помещен в ячейку. Я использую createTextNode, а не просто устанавливаю innerHTML, так как последнее потенциально может быть подвержено внедрению HTML из источника данных.

person Ken Franqueiro    schedule 28.05.2015