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

Question

我有一张图表显示 Y-axis 的英里数和 X-axis 的日期。图表类型为堆积柱形图。每个堆栈代表 driver 在该特定日期的行驶里程（以英里为单位）。

在该图表下方，有一个 ui-grid 显示日期、driver 姓名和所有行程详细信息（英里、时间、乘客人数、上车、下车地点等）。现在问题是 driver 可以在特定的一天进行多次旅行，因此 driver 在一个日期可能不止一行。

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

例如假设“Driver A”在 1 月 1 日完成了 5 次旅行。然后会有一堆 Driver图表中的 A 和 ui-grid 中的 5 行。现在，如果用户单击该堆栈，那么我想在 ui-grid.

中突出显示这 5 行

（使用高图，angular-ui-grid）

Answer 1

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

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

该函数必须 return 存在于您的 css 文件中的 css class。更多信息可参考以下linkCustomize UI-Grid with Dynamic Cell Classes

ui-grid highlight some specific rows