KOGrid 中的条件单元格格式答案

【问题标题】：Conditional Cell Formatting in KOGridKOGrid 中的条件单元格格式
【发布时间】：2014-09-04 15:13:15
【问题描述】：

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

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

这里有一个 jsfiddle 来说明-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 属性的语法有误？

【问题讨论】：

kogrid 文档没有表明cellClass 可以是字符串以外的任何内容。因此，您的功能可能没有用（即使那将是一个不错的功能）。但是，请查看此页面，了解使用单元格模板执行您感兴趣的基本操作的示例：github.com/ericmbarnard/KoGrid/wiki/Cell-Template-Library
我发现了一些对我预感的确认。如果您检查其中一个 td 元素，您会发现它确实有一个 class 集，但它是您的匿名函数定义的文本。基本上你的函数被转换为一个字符串。在这种情况下，kogrid 在解释字符串、函数和 observable 方面并不聪明，就像您可能习惯于使用 knockout 的常规数据绑定语法一样。

标签： knockout.js single-page-application knockout-2.0 kogrid

【解决方案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/

【讨论】：