如何在角度UI网格中突出显示具有最大单元格值的行

How to highlight row with maximum cell value in Angular UI Grid?

本文关键字：单元格 显示 UI 网格      更新时间：2023-09-26

我有一个 Angular 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，测试控制器是我的控制器的名称。

 <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选择行）。我可以突出显示值不是由我自己选择，而是具有最大值或最小值的行吗？

你可以试试这种方式。

您的行模板： 

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

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

相关文章：