如何禁用 AG 表中特定行的可拖动功能?
我正在使用托管拖动
并希望禁用特定行(如果它符合条件)。
在Docs
中,我找不到足够的信息来了解如何做到这一点。正如此处所述,可以有条件地添加draggable
功能,就像这样
rowDrag: params => !params.node.group
在params
对象中,我找不到行数据
来实现我的条件。
在下面描述的代码示例中,如果 name==='John
,我想禁用该行可拖动。
另外,如果整行都可以拖动:rowDragEntireRow={true}
,该怎么办?
沙盒演示和代码
import React from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
function App() {
const [gridApi, setGridApi] = React.useState(null);
const [gridColumnApi, setGridColumnApi] = React.useState(null);
const onGridReady = (params) => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
};
const defaultColDef = {
flex: 1,
editable: true
};
const columnDefs = [
{
headerName: "Name",
field: "name",
rowDrag: (params) => {
console.log("params", params);
return !params.node.group;
}
},
{ headerName: "stop", field: "stop" },
{
headerName: "duration",
field: "duration"
}
];
const rowData = React.useMemo(
() => [
{
name: "John",
stop: 10,
duration: 5
},
{
name: "David",
stop: 15,
duration: 8
},
{
name: "Dan",
stop: 20,
duration: 6
}
],
[]
);
return (
<div>
<h1 align="center">React-App</h1>
<div>
<div className="ag-theme-alpine" style={{ height: "700px" }}>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
defaultColDef={defaultColDef}
onGridReady={onGridReady}
rowDragManaged={true}
//rowDragEntireRow={true}
></AgGridReact>
</div>
</div>
</div>
);
}
export default App;
任何帮助将不胜感激
I am using the Managed Dragging
of AG Grid React table and want to disable a specific row, if it matches the condition.
In Docs
I couldn't find enough information how to do that. As it describes here, it is possible to add the draggable
feature conditionally, like this
rowDrag: params => !params.node.group
In params
object, I couldn't find the row data
to implement my condition.
In the code example described below, I want to disable the row to be draggable if the name==='John
.
Also, how to that if you have row draggable for entire row: rowDragEntireRow={true}
?
Sandbox demo and code
import React from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
function App() {
const [gridApi, setGridApi] = React.useState(null);
const [gridColumnApi, setGridColumnApi] = React.useState(null);
const onGridReady = (params) => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
};
const defaultColDef = {
flex: 1,
editable: true
};
const columnDefs = [
{
headerName: "Name",
field: "name",
rowDrag: (params) => {
console.log("params", params);
return !params.node.group;
}
},
{ headerName: "stop", field: "stop" },
{
headerName: "duration",
field: "duration"
}
];
const rowData = React.useMemo(
() => [
{
name: "John",
stop: 10,
duration: 5
},
{
name: "David",
stop: 15,
duration: 8
},
{
name: "Dan",
stop: 20,
duration: 6
}
],
[]
);
return (
<div>
<h1 align="center">React-App</h1>
<div>
<div className="ag-theme-alpine" style={{ height: "700px" }}>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
defaultColDef={defaultColDef}
onGridReady={onGridReady}
rowDragManaged={true}
//rowDragEntireRow={true}
></AgGridReact>
</div>
</div>
</div>
);
}
export default App;
Any help will be appreciated
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
将
name
列定义中的rowDrag
定义更新为以下内容:演示。
Update your
rowDrag
definition in thename
column definition to the following:Demo.