javascript - ag-grid 防止 rowDrop
问题描述
我有一个启用行拖动的 ag-grid。我需要用户能够拖放除第一行之外的所有行。第一行必须保留在索引 0 处。我看到的问题是,虽然我下面的代码可以很好地禁用在索引 0 处拖动行,但用户仍然可以将其他行放到索引 0 中。我想防止这种情况.
这是我的组件的简化版本:
import React, { useState } from 'react'
import { AgGridReact } from 'ag-grid-react';
const AgGrid = () => {
const [gridApi, setGridApi] = useState(null)
const [rowData, setRowData] = useState([
{Name: "name1", Type: "type1", Draggable: false},
{Name: "name2", Type: "type2", Draggable: true},
{Name: "name3", Type: "type", Draggable: true}
]}
const columnDefs= [
{
field: 'Name',
rowDrag: ({data}) => data.Draggable
},{
field: 'Type'
}
]
return (
<div className="ag-theme-alpine">
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
onGridReady{(params) => setGridApi(params.api)}
rowDragManaged={true}
/>
</div>
)
})
我希望会有一个 rowDrop 道具或某种机制来保持一行,但如果存在类似的东西,我似乎找不到它。
笔记
我尝试了无管理的拖动,但发现自己编写了大量的逻辑只是为了保持那一行。如果有一个简单的onRowDragStarted
和onRowDragEnded
事件,那实现起来肯定会更简单。由于他们网站上描述的行为,我遇到了很多问题,并在下面引用:
“如果拖动在网格之外完成,那么rowDragLeave
是最后一个触发的事件并且没有rowDragEnd
触发”。
任何帮助将不胜感激!
解决方案
使用rowDragMove
事件,不要让索引 0 处的行移动,也不要让任何行移动到索引 0。
使用非托管行拖动时,将rowDragMove
事件设置为:
onRowDragMove = (event) => {
if (event.node.id === 0)
{
return;
}
var movingNode = event.node;
var overNode = event.overNode;
var rowNeedsToMove = movingNode !== overNode;
if (rowNeedsToMove) {
var movingData = movingNode.data;
var overData = overNode.data;
var fromIndex = immutableStore.indexOf(movingData);
var toIndex = immutableStore.indexOf(overData);
var newStore = immutableStore.slice();
moveInArray(newStore, fromIndex, toIndex);
immutableStore = newStore;
this.gridApi.setRowData(newStore);
this.gridApi.clearFocusedCell();
}
function moveInArray(arr, fromIndex, toIndex) {
if (toIndex === 0)
{
toIndex = 1;
}
var element = arr[fromIndex];
arr.splice(fromIndex, 1);
arr.splice(toIndex, 0, element);
}
};
演示。
推荐阅读
- javascript - 将状态定义为类中的变量(或属性)是否正确?
- c# - 使用客户端 ID 和密钥读取 Sharepoint 在线列表项
- python - Python - 如何突出显示字符串中的单词?
- pie-chart - amPieChart 中组合负标签和值的分离
- python - 为什么 Python 的 Numpy zeros 和空函数之间的速度差异会因更大的数组大小而消失?
- python - 尝试不同的方法来做一个条件和输出不是预期的(PYTHON)
- javascript - 将 WooCommerce Mailpoet optin 的结帐设置为 true(也在订单审核刷新后)
- simulation - 生产周期的产品进展
- matplotlib - .plt .plt.got 有什么不同?
- scala - 使用带有损坏地图的 spark ORC 文件读取