Question

我正在尝试根据kogrid单元格中的正数或负数更改文本颜色。如果数字是负数，我需要文本颜色为红色。如果数字是正数，我需要文本颜色为绿色。

我认为使用columndef的cellClass属性可以解决问题，但它似乎没有用。

这是一个jsfiddle to illistrate- http://jsfiddle.net/wood0615/Bug56/10/

以下是viewmodel代码：

 function mainVm(){
var self = this;

this.myData = ko.observableArray([{name: "Moroni", Balance: -50000},
                                  {name: "Tiancum", Balance: 4365},
                                  {name: "Jacob", Balance: -27677},
                                  {name: "Nephi", Balance: 29676},
                                  {name: "Enos", Balance: 3489}]);


this.gridOptions = { 
    data: self.myData, 
    columnDefs: [{ field: 'name', displayName: 'Client Name', width: 140 }, 
                 { field: 'Balance', displayName: 'Balance', width: 100,
                 cellClass: function (data) { return parseFloat(data) < 0 ? "text-negative" : "text-positive" }}
                ]};
 };

查看代码：

  <div class="gridStyle" data-bind="koGrid: gridOptions"></div>

CSS：

 .gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px; 
height: 300px;
}
.text-negative {
 color: #b94a48;
}
.text-positive {
 color: #468847;
}

我对cellClass属性的语法错误吗？

Answer 1

Ko仅将模板作为内联字符串。我喜欢将其包装起来，以便您只指出模板ID。这可以通过创建像

这样的自定义字段来完成

CustomField = function(displayName, templateId) {
    this.displayName = displayName;
    this.cellTemplate = '<div data-bind="template: { name: \'' + templateId  + '\', data: $parent.entity }"></div>';
};

然后只是使用标准的KO模板

http://jsfiddle.net/Bug56/12/

KOGrid中的条件单元格格式

1 个答案: