基于单元格值的彩色dgrid单元格 [英] color dgrid cell based on cell value

问题描述

我有一个dgrid，我试图使用格式化函数和css基于单元格的值设置单元格的背景颜色。 dgrid位于ID为UnMarkedTicketGridDiv的div中

格式化函数：

  formatPriority：function（item）{
 return =< td class ='+ item +'> + item +< / td>; 
}，
  

css：

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

任何想法为什么单元格不会变成绿色？我已经验证了格式化程序函数正在被调用，并且有一个名为NORM的项目，因此正在定义此类。

以下是网格列定义：

  grid = new（declare（[OnDemandGrid，DijitRegistry]））（{
 store：gridStore，
列：{
 ID：ID，
 Ticket：Ticket，
 Street：Address，
 DateRcvdInt：{label：Date Rcvd，formatter：this.formatDate}，
 WorkDateInt：{label： ，formatter：this.formatDate}，
优先级：{label：Priority，formatter：this.formatPriority}，
类型：Type，
公司： b} 
  

感谢

解决方案

通常，最简单的方法是使用 renderCell ，它可以直接访问单元格：

 优先级：{
 label：Priority，
 renderCell：function（object，value，cell）{
 cell .className + =+ value; 
 return document.createTextNode（value）; 
} 
} 
  

注意 renderCell 可以返回要放置在单元格中的节点。我使用 createTextNode ，而不是设置 innerHTML ，因为后者可能容易从数据源注入HTML。 / p>


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

解决方案

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.

这篇关于基于单元格值的彩色dgrid单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！