0

私はそれを動作させることができないplunkerにこのコードを持っています: plunker

var app = angular.module('app', ['ngAnimate', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {

  $scope.myData = [{sv_name: "Moroni", sv_code: 50,count:0},
                 {sv_name: "Tiancum", sv_code: 43,count:1},
                 {sv_name: "Jacob", sv_code: 27,count:0},
                 {sv_name: "Nephi", sv_code: 29,count:7},
                 {sv_name: "Enos", sv_code: 34,count:0}];

   $scope.getBkgColorTable = function (saveStatus) {
                switch (saveStatus) {
                    case -1:
                        return "";
                        break;
                    case 0:
                        return "#dff0d8";
                        break;
                    default:// anything but 0 and -1, alerts
                        return "#f2dede";
                }
            };

  //ng-class="{\'green\':true, \'red\':row.entity.count==0 }"
  var rowtpl='<div><div style="{\'background-color\': getBkgColorTable(myData[row.rowIndex].count)}" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';

  $scope.gridOptions = {
    enableSorting: true,
    data:'myData',

    rowTemplate:rowtpl,
    columnDefs: [
      { field: 'sv_name', displayName: 'Nombre',},
      { field: 'sv_code', displayName: 'Placa'},
      { field: 'count'}
    ]
  };


}]);

アイデアは、グリッドのステータス フィールドを確認し、グリッドの背景色を変更することです。

よろしく

カルロス

4

1 に答える 1

1

テンプレートを次のように変更してみてください。

 var rowtpl='<div><div style="height: 100%; {\'background-color\': getBkgColorTable(myData[row.rowIndex].count)}" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';

div が空 (テキストがない) の場合、サイズはゼロになるため、レンダリングされません。

于 2015-01-25T11:45:44.873 に答える