如何使用 AgGrid 自定义 ghost-text（拖动项名称）

Question

根据标题，是否可以通过 API 在 AgGrid 中使用（非托管）row-dragging 实现自定义 "ghost text" ？

Answer 1

我研究过这个，ag-grid 没有内置任何东西。我通过附加到 onRowDragMove 和 onRowDragMove 事件来完成此操作。

我设置了一个 class 变量 'isRowDragging' 只在拖动时执行一次。

我使用 Angular Renderer2 class (this.ui) 来查找和更新幽灵标签的 Element。

所有这些都可用于 vanilla javascript 或其他受支持的 ag-grid 框架。

this.gridOptions.onRowDragMove = (params: RowDragMoveEvent) => {
    const overNode = params.overNode;
    const movingNode = params.node;

    if (!this.isRowDragging) {
        this.isRowDragging = true;

        if (!movingNode.isSelected()) {
            if (params.event && params.event.ctrlKey) {
                movingNode.setSelected(true);
            }

            if (params.event && !params.event.ctrlKey) {
                movingNode.setSelected(true, true);
            }
        }

        let labelText: string = '';
        const selectedNodes = this.gridOptions.api.getSelectedNodes();

        if (selectedNodes.length === 1) {
            labelText = selectedNodes[0].data.Name;
        }
        else {
            const guids: string[] = [];
            let folderCount: number = 0;
            let docCount: number = 0;

            selectedNodes.forEach((node: RowNode) => {

                guids.push((node.data.FolderGuid || node.data.DocumentGuid).toLowerCase());

                if (node.data.FolderGuid !== undefined) {
                    folderCount++;
                }
                else {
                    docCount++;
                }
            });

            if (folderCount === 1) {
                labelText = '1 folder';
            }
            else if (folderCount > 1) {
                labelText = folderCount + ' folders';
            }

            if (docCount === 1) {
                labelText += (labelText !== '' ? ', ' : '') + '1 document';
            }
            else if (docCount > 1) {
                labelText += (labelText !== '' ? ', ' : '') + docCount + ' documents';
            }
        }

        console.log(this.ui.find(document.body, '.ag-dnd-ghost').outerHTML);

        this.ui.find(document.body, '.ag-dnd-ghost-label').innerHTML = labelText;
    }
}

this.gridOptions.onRowDragEnd = (event: RowDragEndEvent) => {
    this.isRowDragging = false;
}

Answer 2

onRowDragEnter event, 你可以搜索幽灵元素然后将您的自定义 class 添加到它。

document.querySelectorAll('.ag-dnd-ghost')[0] .classlist.add('my-custom-ghost-element');

不要忘记遵循 classes 的层次结构，否则您最终会在自定义 class 中使用 !important :-)

// 用于更新文本

搜索 className ag-dnd-ghost-label

的元素

document.querySelectorAll('.ag-dnd-ghost-label')[0] .innerHTML = 'your_custom_text';

幽灵元素仅在拖动过程中添加，一旦拖动结束，它就会被 Ag-Grid 从 dom 中移除。

希望对您有所帮助

Answer 3

我找到了使用 valueGetter 属性更改此文本的解决方法。列配置示例：

private dragDropColumn= {
    rowDrag: true,
    ...
    valueGetter: (params) => {
      return params.data.myVariableFromRow;
    }
  }

希望对您有所帮助

Answer 4

我正在使用带有反应的 ag-grid 并使用 ColDef 的 cellRendererFramework 属性来使用自定义反应组件，我的值 getter returns 对象，所以当我开始拖动时我获取 [object object]，我将 toString 方法添加到返回对象并完成了技巧，下面是我的示例代码

const col1 = {
rowDrag: true,
...
valueGetter: (params) => {
  const {id, name} = params.data;
  return {id, name, toString: () => name}; // so when dragging it will display name property
}

}

Answer 5

您现在可以使用colDef.rowDragText设置回调函数来设置拖动的文本。

https://www.ag-grid.com/javascript-grid-row-dragging/#custom-row-drag-text

如何使用 AgGrid 自定义 ghost-text（拖动项名称）

How to customise the ghost-text (drag item name) with AgGrid

drag-and-drop

ag-grid