ag-grid-angular 行拖拽后rowData顺序跟着变化

ag-Grid-Angular是一个强大的响应式数据表格组件库，它支持Angular框架并允许用户轻松创建交互式的表格。其中行拖拽功能是一项常见的特性，当用户通过鼠标或触摸设备拖动表格中的行时，可以实时改变数据模型（rowData）的顺序。

当你启用ag-Grid的`sortableRows`选项，并配置了相应的列定义（如设置了`enableRowDrag`属性），行头通常会有一个小图标表示可以拖动。当行被拖放到新的位置时，`gridApi`提供的`onRowDragEnd`事件会被触发，这时你可以访问`event.api.sortModel`获取新的排序信息，然后更新对应的rowData数组。

例如，在服务或组件的生命周期钩子里，你可能会这样做：

onRowDragEnd(event) {
    const sortedData = event.api.getRowNode(event.rowIndex).data;
    // 更新后台数据源或双向绑定的数据model
    this.myData.splice(...event.oldPositions, 1);
    this.myData.splice(...event.newPositions, 0, sortedData);
}

这样，每次行拖拽完毕，`myData`中的元素顺序就会跟随表格视图同步更新。

相关问题

ag-grid-angular 拖动行时显示的行号跟着变化

`ag-Grid-Angular` 是一款流行的用于Angular应用的表格组件库，它提供了丰富的功能，包括拖拽行（Row Dragging）。当启用行拖放功能时，通常会在每一行前面显示一个行号，这个行号会动态更新，当你拖动一行到新的位置时，它的顺序数字会随着行的位置改变而自动调整。

具体设置步骤如下：

1. 首先，在你的`agGridModule`中配置列定义，包含一个表示行号的列，例如 `rowNumberColumn`，并开启 `enableRowDnd` 功能：

   const columnDefs = [
     { field: 'id', rowGroup: true },
     { field: 'name', headerName: '姓名' },
     { field: '__rowIndex__', // 行号列
       cellRendererParams: {
         valueGetter: params => params.data.rowIndex + 1,
         suppressCount: true
       }
     },
     ...其他列
   ];

2. 在组件的`gridOptions`中，添加以上列定义和行拖放选项：

   const gridOptions = {
     columnDefs,
     enableRowDrag: true, // 启用行拖放
   };

当你在实际应用中拖动行时，行号列会实时更新显示当前行的新位置，方便用户跟踪数据排列。

ag-grid-angular Columns禁止拖拽

在Angular中使用ag-Grid-Angular时，如果你想要禁止单元格列的拖拽，你可以通过配置列定义来控制这个功能。ag-Grid允许你为每一列设置属性，包括`sortable`、`resizable`等，来指定它们是否可以排序或调整大小。

以下是阻止列拖拽的步骤：

1. 在你的列定义数组（通常在`gridOptions.columns`中）中，找到你想限制的列，并为它添加一个`sortable`属性并将其值设为`false`。例如：

const gridOptions = {
  columns: [
    { field: 'name', headerName: '姓名', sortable: false },
    { field: 'age', headerName: '年龄', sortable: true },
  ]
};

2. 如果你还想阻止整个行的拖动，可以将`enableColResize`和`enableSorting`都设置为`false`：

gridOptions = {
  enableColResize: false,
  enableSorting: false,
  columns: [...]
};