2

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

我认为使用 columndefs 的 cellClass 属性可以解决问题，但它似乎不起作用。

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

这是视图模型代码：

 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 属性上的语法错误？

4

1 回答 1

0

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/

于 2014-07-14T23:48:53.740 回答