Question

根据标题，有没有办法通过API 在AgGrid 中使用（非托管）行拖动实现自定义“鬼文本”？

Answer 1

onRowDragEnter event，你可以搜索幽灵元素然后将您的自定义类添加到其中。

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

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

//用于更新文本

使用className ag-dnd-ghost-label

搜索元素

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

仅在拖动期间添加了幽灵元素，拖动结束后，Ag-Grid将其从dom中移除。

希望这会有所帮助

Answer 2

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

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

希望这会有所帮助

Answer 3

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

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

Answer 4

我已经对此进行了研究，但ag-grid没有内置任何内容。我通过附加onRowDragMove和onRowDragMove事件来实现这一点。

我将类变量'isRowDragging'设置为仅在拖动时执行一次。

我使用Angular Renderer2类（this.ui）查找和更新幽灵标签的元素。

所有这些都可通过香草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 5

我正在使用带有react的ag-grid和ColDef的cellRendererFramework属性来使用自定义的react组件，我的值getter返回了object，所以当我开始拖动时，我得到了[object object]，我将toString方法添加到了return object和做到了，下面是我的示例代码

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

}

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

5 个答案: