javascript - 如何动态更改单元格格式

Question

我已经使用 dojo 实现了一个数据网格，它每 5 秒更新一次。我使用以下代码更新数据网格。

jsonStore.fetch({
         query: {id:'*'},
         onComplete: function(items, result){
         dojo.forEach(items, function(item){
             jsonStore.setValue(item, "time" , data.update[0].netchange);
.....

'data' 是我需要设置到网格的新数据，它是一个 json 对象，如下所示

var data = {"update":[{...}]}

如果 netchage 为负我需要做什么我需要将单元格颜色设置为红色。如果 netchange 是正的，它应该是绿色的。所以我需要一种动态更改单元格格式的方法。有人可以告诉我怎么做吗？提前致谢

grid4 = new dojox.grid.DataGrid({
            query : {
                Title : '*'
            },
            id : "grid",
            jsId : "grid",
            clientSort : true,
            rowSelector : '0px',
            structure : layout4
        }, document.createElement('div'));
        grid4.setStore(jsonStore);
        dojo.byId("gridContainer4").appendChild(grid4.domNode);

var layout4 = [ {
            field : 'time',
            name : 'time',
            width : '40px',
            formatter: geticon()
        }, {
            field : 'netchange',
            name : 'netchange',
            width : '30px'
        } ];

Answer 1

在我回答这个问题之前，当您说“动态更改单元格格式”时，这只是一个微不足道的用词不当。

您没有更改单元格 formatter ，您正在更改单元格的样式。

每次将值加载到单元格中时，都会调用格式化程序。此外，为单元格所在的行调用 onStyleROw 函数。

这意味着您有两个选项来更改单元格的颜色。您可以在单元格范围内执行此操作，或者您可以让您的格式化程序执行一些简单的操作，例如用 <span> 包装值具有不同风格的颜色。我会给你们两个看。

这是第一个解决方案，无需更改任何现有的网格代码，它将使用 onStyleRow 更改整行。

使用 onStyleRow 的解决方案 1

第 1 步。(连接 onStyleRow)

dojo.connect( grid4, "onStyleRow", styleRowGridPayment );

第 2 步。(创建您的 styleRowGridPayment 方法。)

var styleGridPayment = function(inRow) {
        if( null !== grid4.getItem( inRow.index ) ) {
            item = grid4.getItem( inRow.index );
            if( item.netchange < 0 ) {
                inRow.customStyles += "color:red;";
            } else {
                inRow.customStyles += "color:green;";
            }
         }
    }   

对于使用 onStyleRow 应该这样做。

方案二，使用格式化程序

在您的字段声明中，您将拥有

{
    field : 'netchange',
    name : 'netchange',
    width : '30px'
    formatter: formatNetchange
} 

请注意，我添加了 formatNetchange 作为格式化程序。

然后您只需创建您的格式化程序。

formatNetchange = function(value){
     if(value < 0){
        color = "red";
     } else {
        color = "green";
     }
     return "<span style='color:" + color "'>" + value "</span>";
}