AgGrid 在具有最大限制的网格之间拖动行

Question

我正在我的 React 应用程序中尝试以下链接中的示例（在网格之间拖动多个记录）https://www.ag-grid.com/react-data-grid/row-dragging-to-grid/

下面是我的AgGrid

<MyAgGrid
  style={{ height: '100%' }}
  defaultColDef={defaultColDef}
  getRowId={getRowId}
  rowDragManaged={true}
  animateRows={true}
  //rowSelection={id === 0 ? 'multiple' : undefined}
  rowSelection={'multiple'}
  rowDragMultiRow={id === 0}
  suppressRowClickSelection={id === 0}
  suppressMoveWhenRowDragging={id === 0}
  rowData={id === 0 ? leftRowData : rightRowData}
  columnDefs={id === 0 ? leftColumns : rightColumns}
  onGridReady={(params) => onGridReady2(params, id)}
  frameworkComponents={{DeleteRenderer: DeleteRenderer}}
/>

下面是其他代码；

const [leftApi, setLeftApi] = useState(null);
const [leftColumnApi, setLeftColumnApi] = useState(null);
const [rightApi, setRightApi] = useState(null);
const [rawData, setRawData] = useState([]);
const [leftRowData, setLeftRowData] = useState(null);
const [rightRowData, setRightRowData] = useState([]);
const [radioChecked, setRadioChecked] = useState(0);
const [checkBoxSelected, setCheckBoxSelected] = useState(true);

const DeleteRenderer = (props) => {
    console.log("DeleteRenderer ::::::::::::::: " + props);
    const handleDeleteRow = () => {
        // remove right grid data
        var rrd = [...props.rightRowData];
        rrd = rrd.filter((d) => d.personId !== props.node.data.personId);
        props.setRightRowData(rrd);
        props.api.applyTransaction({ remove: [props.node.data] });
    }
    return (
        <Icon onClick={handleDeleteRow} name="delete" size={15} />
    );
};

const leftColumns = [{
    rowDrag: true,
    maxWidth: 50,
    suppressMenu: true,
    rowDragText: (params, dragItemCount) => {
        if (dragItemCount > 1) {
            return dragItemCount + ' persons';
        }
        return params.rowNode.data.myName;
    },
}, {
    colId: 'checkbox',
    maxWidth: 50,
    checkboxSelection: true,
    suppressMenu: true,
    headerCheckboxSelection: true,
}, {
    field: 'myName'
}, {
    field: 'myEmail'
}, ];

const defaultColDef = {
  flex: 1,
  minWidth: 100,
  sortable: true,
  filter: true,
  resizable: true,
};

const rightColumns = useMemo(
    () => [{
        rowDrag: true,
        maxWidth: 50,
        suppressMenu: true,
        rowDragText: (params, dragItemCount) => {
            if (dragItemCount > 1) {
                return dragItemCount + ' persons';
            }
            return params.rowNode.data.myName;
        },
    }, {
        field: 'myName'
    }, {
        field: 'myEmail'
    }, {
        suppressMenu: true,
        maxWidth: 50,
        cellRenderer: 'DeleteRenderer', // Passing as string fixes the 'appendChild' error on dragging for the 1st time
        // pass rightRowData and setRightRowData as cellRendererParams
        cellRendererParams: {
            rightRowData: rightRowData,
            setRightRowData: setRightRowData,
        }
    }],
    [rightRowData, setRightRowData]
);

const loadGrids = useCallback(() => {
        setLeftRowData([...rawData]);
        setRightRowData([]);
        leftApi.deselectAll();
    }, [leftApi, rawData]);

useEffect(() => {
    if (rawData.length) {
      loadGrids();
    }
}, [rawData, loadGrids]);

useEffect(() => {
    if (leftColumnApi && leftApi) {
      leftColumnApi.setColumnVisible('checkbox', checkBoxSelected);
      leftApi.setSuppressRowClickSelection(checkBoxSelected);
    }
}, [leftColumnApi, leftApi, checkBoxSelected]);


const frameworkComponents = () => {
        return {DeleteRenderer: DeleteRenderer}
    }

    const getRowId = (params) => {
        return params.data.personId;
    }

    const onDragStop = useCallback(
        (params) => {
            var data = [...rightRowData];
            var nodes = params.nodes;

            // allow only if we have 3 rows or less in the right grid
            if (data.length < 4) {
                if (radioChecked === 0) {
                    var allowed = 4 - data.length;

                    leftApi.applyTransaction({
                        remove: nodes.slice(0, allowed).map(function(node) {
                            return node.data;
                        }),
                    });
                } else if (radioChecked === 1) {
                    leftApi.setNodesSelected({
                        nodes,
                        newValue: false
                    });
                }

                nodes.map(function(node) {
                    if (data.length < 4) {
                        data.push(node.data);
                    }
                });
            }

            console.log("::::::::::::::DATA::::::::::::::::" + data); // LOGS 4 rows max even after dragging more rows, though right grid displays additional rows (i.e. > 4)
            setRightRowData(data);
        },
        [leftApi, rightRowData, radioChecked]
    );

useEffect(() => {
    if (!leftApi || !rightApi) {
      return;
    }
    const dropZoneParams = rightApi.getRowDropZoneParams({ onDragStop });

    leftApi.removeRowDropZone(dropZoneParams);
    leftApi.addRowDropZone(dropZoneParams);
}, [leftApi, rightApi, onDragStop]);

const onGridReady2 = (params, side) => {
    if (side === 0) {
      setLeftApi(params.api);
      setLeftColumnApi(params.columnApi);
    }

    if (side === 1) {
      setRightApi(params.api);
    }
};

我希望最多只允许将 3 行拖动到右侧网格。 所以在我的“onDragStop”中，我正在检查 data.length < 4.

但是问题是网格似乎不遵守条件（data.length < 4) and I can see more than 3 rows getting added to the right grid.

但奇怪的是，当我点击任意行右侧的“删除”时（比如显示 7 行时），它会自动更正并显示 (4-1) = 3 行

不确定是否与“applyTransaction”有任何关系

Answer 1

所以你想保留左边的行，请修改 onDragStop 方法

  const onDragStop = useCallback(
    (params) => {
      var data = [...rightRowData];

      var nodes = params.nodes;
      if (data.length < 4) {
        if (radioChecked === 1) {
          leftApi.setNodesSelected({ nodes, newValue: false });
        }

        nodes.map(function (node) {
          console.log('node', node);
          console.log('data', data);
          if (data.length < 4) {
            if (!data.some((d) => d.athlete === node.data.athlete))
              data.push(node.data);
          }
        });
      }

      setRightRowData(data);
    },
    [leftApi, rightRowData, radioChecked]
  );

https://plnkr.co/edit/7EIkWpRMYa04SAOU