[英]ag-grid prevent rowDrop
I have an ag-grid with row dragging enabled.我有一个启用行拖动的 ag-grid。 I need the user to be able to drag and drop all rows except for the first row.
我需要用户能够拖放除第一行之外的所有行。 The first row must remain in place at index 0. The issue I am seeing is that, while my code below works just fine to disable dragging the row at index 0, users can still drop other rows into index 0. I want to prevent this.
第一行必须保留在索引 0 处。我看到的问题是,虽然我下面的代码可以很好地禁用在索引 0 处拖动行,但用户仍然可以将其他行放到索引 0 中。我想防止这种情况.
Here is a simplified version of my component:这是我的组件的简化版本:
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>
)
})
I hoped there would be a rowDrop prop or some mechanism by which to keep a row in place, but I can not seem to find it if something like that exists.我希望会有一个 rowDrop 道具或某种机制来保持一行,但如果存在类似的东西,我似乎找不到它。
Note笔记
I tried unmanaged dragging, but found myself writing a ton of logic just to keep that single row in place.我尝试了无管理的拖动,但发现自己编写了大量的逻辑只是为了保持那一行。 If there was a simple
onRowDragStarted
and onRowDragEnded
event, it would certainly be simpler to implement.如果有一个简单的
onRowDragStarted
和onRowDragEnded
事件,实现起来肯定会更简单。 I ran into a lot of issues because of the behavior described on their website , and quoted below:由于他们网站上描述的行为,我遇到了很多问题,并在下面引用:
"If the drag is finished outside of the grid, then the rowDragLeave
is the last event fired and no rowDragEnd
is fired". “如果在网格之外完成拖动,则
rowDragLeave
是最后一个触发的事件,并且不会rowDragEnd
”。
Any help would be tremendously appreciated!任何帮助将不胜感激!
Use the rowDragMove
event and don't let the row at index 0 move at all, and don't allow any row to move to index 0.使用
rowDragMove
事件,不要让索引 0 处的行移动,也不要让任何行移动到索引 0。
While using unmanaged row dragging, set the rowDragMove
event to:使用非托管行拖动时,将
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);
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.