color dgrid cell based on cell value

问题

I've got a dgrid and I'm trying to set the cell background color based on the value of the cell using a formatter function and css. The dgrid is located within a div with ID UnMarkedTicketGridDiv

formatter function:

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

css:

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

Any idea why the cells arent getting colored green? I've verified the formatter function is being called, and there is an item named 'NORM' so that this class is being defined. I think its something with getting the css selector right?

Here's the grid column definition:

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

Thanks

回答1:

Generally, the simplest way to do this would be to use renderCell, which gives you direct access to the cell:

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

Note that renderCell can return a node to be placed within the cell. I use createTextNode rather than just setting innerHTML since the latter would be potentially susceptible to HTML injection from the data source.

来源：https://stackoverflow.com/questions/30470289/color-dgrid-cell-based-on-cell-value

标签

javascript

css

dojo

dgrid