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

Question

我有一个 Angular UI Grid，它的定义类似于

 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};

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