如何在Angular UI Grid中突出显示最大单元值的行？

Question

我有一个角UI电网，其被定义像

var rowtpl='<div ng-class="{\'extremum\':row.entity.threads==150 }"><div 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 = { 
     enableHorizontalScrollbar: 0, 
     enableSorting: true, 
     enableFiltering: true, 
     enableColumnResizing: false, 
     enableRowSelection: true, 
     enableRowHeaderSelection: false, 
     multiSelect: false, 
     noUnselect: true, 
     onRegisterApi: function (gridApi) { 
      $scope.gridApi = gridApi; 
      gridApi.selection.on.rowSelectionChanged($scope, function (row) { 
       if (row.isSelected) { 
        var importedData = row.entity; 
        DataService.selectedImportedDataId = importedData.id; 
        $scope.selectedData = importedData; 
       } 
      }); 
     }, 
     columnDefs: [ 
      { name: "Run", field: "run" }, 
      { name: "Time of Day", field: "tod" }, 
      { name: "Rate", field: "rate" }, 
      { name: "MB/sec", field: "mbps" }, 
      { name: "Response", field: "resp" }, 
      { name: "xfersize", field: "xfersize" }, 
      { name: "Threads", field: "threads" }, 
      { name: "queue_depth", field: "queue_depth" }, 
      { name: "Read %", field: "read_percentage" }, 
      { name: "Read response", field: "read_resp" }, 
      { name: "Write response", field: "write_resp" }, 
      { name: "lunsize", field: "lunsize" } 
     ], 
     data: [], 
     rowTemplate: rowtpl 
    }; 

（数据加载的这个代码之外）。 这是我的HTML，Testcontroller是我的控制器的名称。

<div ng-controller="TestController" class="row"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div ui-grid="gridOptions" 
       ui-grid-edit 
       ui-grid-auto-resize 
       ui-grid-selection 
       ui-grid-save-state> 
      </div> 
     </div> 
    </div> 
</div> 

这段代码创建一个行的表高亮（排在我的行模板，选择与row.entity.threads==150）。我是否可以突出显示未由我自己选择的值，但具有最大值或最小值的行？

Answer 1

你可以这样试试。

你行模板：

var rowtpl='<div ng-class="{\'extremum\':row.entity.threads==150, \'highlight\':row.entity.isMaximum }"><div 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>'; 

您需要highlight类添加到你的CSS。 当您获取数据时，您可以通过循环来检查最大值并设置标记entity.isMaximum = true。

要计算数据数组中的最大值，可以使用javascript中的任何最大查找函数。一个这样的功能可在UnderscoreJS 示例实现如下。

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}]; 
_.max(stooges, function(stooge){ return stooge.age; }); 
=> {name: 'curly', age: 60}; 

如果您仍然对此解决方案有任何疑问，请发布您的数据对象。