2

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 属性の構文が間違っていますか?

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 に答える