时间戳

首页 > 解决方案 > 将变量传递给 n.setSelected 方法？

ag-grid - 将变量传递给 n.setSelected 方法？

问题描述

我目前在一个页面上有 2 个 ag-grid 实例，然后通过右表选择行，然后在左表中也选择一行。

我的问题是我需要知道哪个表（左或右）导致左表选择其他状态。

为了帮助理解，事件的顺序如下：

// set state globally and pass into both LeftGridWrapper and RightGridWrapper
// THIS STATE CONTROLS WHAT ROWS ARE SELECTED IN THE LEFT MENU
const [selectedIds, setSelectedIds] = useState([]);

return (
  <div>
    <LeftGridWrapper setSelectedIds={setSelectedIds}  selectedIds={selectedIds/>
    <RightGridWrapper setSelectedIds={setSelectedIds} />
  </div>
)

// In the RightGridWrapper
onRowSelected = (params) => {
  ...
  // causes selection in LeftGridWrapper
  setSelectedIds([...selectedIds, params.data.someId])
}

// In the LeftGridWrapper
useEffect(() => {
  leftGridOptionsApi.forEachNode(n => {
    if (selectedIds.includes(n.id) n.setSelected(true);
    else n.setSelected(false);
  }
}, [selectedIds])

所以本质上，我希望能够做这样的事情：n.setSelected(false, origin = 'LEFT')然后在里面onRowSelected检查origin是“左”还是“右”

标签： ag-gridag-grid-react

解决方案

假设如果从右网格中选择行，您想在左网格上突出显示具有不同颜色的行。

我建议这样做：

右侧网格上的 onRowSelect 事件->更新左侧网格->首先选择->然后将额外参数更新为 true，这将让您识别它是从右侧网格中选择的

    onRowSelected = (params) => {
      ...
      // causes selection in LeftGridWrapper
      leftGridOptionsApi.forEachNode(n => {
        if (selectedIds.includes(n.id){
            n.setSelected(true); // directly set left grid row selected
            n.setDataValue('colKey', value); // update a column data to true that is 
 selectedFromRight
          }
    
      }
    }

现在在左侧网格rowSelection始终将columnkey/parameter更新为 false

当参数为 true highlight red else yellow时，为选择的行添加自定义样式，所有这些都假设您想要区分从哪里选择行并相应地做一些事情。

如果解决方案适合您或者您有不同的要求，请告诉我。

推荐阅读