如何使用 syncfusion 表在 angular 中的行悬停上显示图标

Question

如何在 syncfusion 表中悬停行时显示图标。

请参阅下面提供的屏幕截图（从 gmail 中截取）

我正在使用 angular7.x 和 Syncfusion UI 组件。

如果有任何答案，请告诉我提前致谢

Answer 1

您只需将鼠标悬停在 Grid 行的最后一个子项上，就可以附加您自己的组件。代码片段，

export class AppComponent {
public data: Object[];
public initialPage: Object;
public button: HTMLElement;

@ViewChild('grid')
public gridInstance : GridComponent ;  

ngOnInit(): void {
    this.data = data;
    this.initialPage = { pageSizes: true, pageCount: 4 };
    let btn = document.createElement("input");
    btn.type = "button";
    btn.id = "btn";
    btn.classList.add("e-btn");
    btn.value = "button";
    btn.style.marginLeft = "10px";
    btn.onclick = function(e) {
      console.log("Button clicked");
    };
    this.button = btn;
}

load(args) {
  this.gridInstance.element.addEventListener("mouseover", function(e){
    if((e.target as HTMLElement).classList.contains("e-rowcell")) {
        let ele: Element = e.target as Element;
        let row = parentsUntil(ele, "e-row");

        let previousButton = document.getElementById("btn");
        if(!isNullOrUndefined(previousButton)) {
          previousButton.remove();
        }

        row.lastChild.appendChild(this.button);
    }
  }.bind(this))
}

}

示例供您参考：https://stackblitz.com/edit/angular-hjfcyi?file=main.ts

在这里，我在 ngOnInit 中创建了一个新按钮，并将该按钮悬停在最后一个子元素的每一行中。

注意：我已经使用Grid load事件将鼠标悬停事件绑定到Grid。

如何使用 syncfusion 表在 angular 中的行悬停上显示图标

How to show icons on row hover in angular using syncfusion tables

syncfusion

angular