javascript - ui-grid 突出显示某些特定行

Question

我有一个图表，其中 Y 轴显示英里，X 轴显示日期。图表类型为堆积柱形图。每个堆栈代表驾驶员在特定日期行驶了多少英里。

在该图表下方，有一个用户界面网格，显示日期、司机姓名和所有行程详细信息(英里、时间、乘客数量、上车、下车地点等)。现在的问题是，一名司机在某一天可以进行多次行程，因此同一日期一名司机可能会有多行。

现在我想做的是，如果有人单击图表中的特定堆栈，则 ui 网格中与该堆栈相关的所有行都将突出显示。

例如，假设“驾驶员 A”在 1 月 1 日完成了 5 次行程。那么图表中将出现一堆驾驶员 A，UI 网格中将有 5 行。现在，如果用户单击该堆栈，那么我想在 ui-grid 中突出显示这 5 行。

(使用 highchart、Angular-ui-grid)

Answer 1

您可以向每个单元添加一个名为 cellClass 的属性，该属性接受一个函数来执行您需要的逻辑:

cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
                    return *your function goes here*;
                }

该函数必须返回 css 文件中存在的 css 类。更多信息请访问以下链接Customize UI-Grid with Dynamic Cell Classes