4

ngGridを使用してデータを表示します。特定の列に対して cellFilter と cellTemplate を一緒に使用したいのですが、一緒に動作しないようです。cellFilter または cellTemplate を別々に使用すると、完璧に機能します。基本的に、セルの値をこのようにフォーマットしたいと思います (例: 500000 --> 500,000; 1000000 --> 1,000,000) また、赤色で負の値を作成したいと思います。どうすればこれを解決できますか? ありがとう！

$scope.gridOptions = {
        data: 'data',
        columnDefs: [
            {
                field: 'Settled',
                cellFilter: 'number',
                cellTemplate: '<div ng-class="{red: row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'
            }]
        }
4

3 に答える 3

2

ng-grid は現在 UI-Grid v3.x であるため、ui-grid/uiGridCell のデフォルト テンプレートを参照しています。

$templateCache.put('ui-grid/uiGridCell',
  "<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"
);

更新された UI-Grid の cellTemplate は次のようになります。

$scope.gridOptions = {
        data: 'data',
        columnDefs: [
            {
                field: 'Settled',
                cellFilter: 'number',
                cellTemplate: '<div class="ui-grid-cell-contents" ng-class="{red: COL_FIELD < 0}">{{COL_FIELD CUSTOM_FILTERS}}</div>'
            }]
        }

cellClass代わりにプロパティを使用して、セル テンプレートを既定のままにすることもできます。ただし、これによりクラスが に適用されます.ui-grid-cell。セル テンプレートは、.ui-grid-cell上記の例ではの子にクラスを適用します.ui-grid-cell-contents。どちらがあなたの状況に合っていると思います。

$scope.gridOptions = {
    data: 'data',
    columnDefs: [
        {
            field: 'Settled',
            cellFilter: 'number',
            cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                var cellVal = grid.getCellValue(row, col);
                return (cellVal < 0) ? 'red' : '';
            }
        }]
}
于 2016-07-01T17:47:40.190 に答える
0

Mammadj の回答に基づいて、 cellFilter と組み合わせた独自のcellTemplateを作成できました。これが参考のための私の解決策です。ここで、 executionStatus は以前に として使用されていたセルの値です。ここで、executionStatus はセル テンプレートの emJobStateLabel にパイプされます。cellFilter: 'emJobStateLabel'

cellTemplate: '<div class="em-row">{{row.entity.executionStatus | emJobStateLabel}} {{row.entity["previewStatus"]==\'New\'?\'\':\'(\'+row.entity.previewStatus+\')\'}}</div>'

プロパティ cellFilter を削除することを忘れないでください。

于 2016-07-01T13:08:09.640 に答える