Angular组件库ag-Grid数据移动显示高亮

在Angular组件库ag-Grid中，要实现数据上移和下移以及数据高亮显示的功能，通常需要结合以下几个步骤：

1. 数据移动：

   • 使用getRowNode获取选中的行节点。
   • 在用户点击上下移动按钮时，通过API交换行数据在数据源中的位置。
   • 调用rowNode.setData(newData)更新行数据。
   • 如果有后端数据库，确保同步更新数据库中的相应记录顺序。

   示例代码片段：

   Typescript

   1onRowMoveUp(rowNode: RowNode) {
   2  const previousRowNode = this.gridApi.getRowNode(rowNode.rowIndex - 1);
   3  if (previousRowNode) {
   4    // 交换数据源中的数据
   5    const tempData = rowNode.data;
   6    rowNode.setData(previousRowNode.data);
   7    previousRowNode.setData(tempData);
   8
   9    // 如果有必要，同步更新数据库
   10    this.updateOrderInDatabase(rowNode.data.id, previousRowNode.data.id);
   11    
   12    // 刷新网格以反映更改
   13    this.gridApi.applyTransaction({ update: [rowNode.data, previousRowNode.data] });
   14  }
   15}
   16
   17onRowMoveDown(rowNode: RowNode) {
   18  // 类似逻辑，但与下一行交换
   19}

2. 数据高亮显示：

   • 可以通过CSS类来控制行高亮。
   • 在行移动之前或之后，添加一个临时CSS类到目标行的rowClass属性中。
   • ag-Grid允许你通过getRowClass回调函数动态设置行样式。

   示例：

   Typescript

   1rowClassRules: {
   2  'highlight-row': 'params.node.highlight',
   3},
   4
   5onRowMoved(rowNode: RowNode, direction: 'up' | 'down') {
   6  // 移动行后，高亮显示目标行
   7  rowNode.highlight = true;
   8  setTimeout(() => {
   9    rowNode.highlight = false;
   10  }, 1000); // 高亮显示一秒后自动取消
   11}
   12
   13getRowClass(params: RowClassParams) {
   14  return params.node.highlight ? 'highlight-row' : '';
   15}

   其中.highlight-row是你定义的用于高亮显示行的CSS类。