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

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

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

1 个答案: