代码之家 › 专栏 › 技术社区 › eddiewould

如何使用AgGrid自定义重影文本(拖动项目名称)

ag-grid drag-and-drop

eddiewould · 技术社区 · 7 年前

根据标题,是否有一种方法可以通过中的(非托管)行拖动实现自定义“重影文本” AgGrid 通过API ?

3 回复 | 直到 7 年前

Marcin Sachrajda 6 年前

我找到了使用valueGetter属性更改此文本的变通方法。列的配置示例:

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

希望这有帮助

Akshay Pathare 7 年前

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';

Ghost元素仅在拖动过程中添加,一旦拖动结束,它将被Ag网格从dom中删除。

希望这有帮助

Spikolynn Ankit 5 年前

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

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

M27 7 年前

我将类变量“IsRowDraging”设置为在拖动时仅执行一次。

我使用Angular Renderer2类(this.ui)查找并更新重影标签的元素。

所有这些都可以通过vanilla javascript或其他受支持的ag网格框架获得。

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;
}

Rajnikant 6 年前

我使用ag grid和react,并使用ColDef的CellRenderFramework属性使用自定义react组件,我的值getter返回object,所以当我开始拖动时,我得到[object object],我将toString方法添加到返回的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
}

}