Как отображать значки при наведении строки в углах с помощью таблиц синхронизации - PullRequest
Новая
       15

Как отображать значки при наведении строки в углах с помощью таблиц синхронизации

0 голосов
/ 01 июля 2019

Как отображать значки при наведении строки в таблицах синхронизации.

См. Приведенный ниже скриншот (получен из Gmail) enter image description here

Я работаю с angular7.x и Syncfusion UI Components.

Пожалуйста, дайте мне знать, если есть ответы Заранее спасибо

1 Ответ

1 голос
/ 04 июля 2019

Вы можете просто добавить свой собственный компонент к последнему дочернему элементу строки сетки при наведении на него курсора.Фрагмент кода, 

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 и добавил эту кнопку в каждой строкепоследний дочерний элемент при наведении на него.

Примечание. Я использовал событие загрузки сетки для привязки события наведения мыши к сетке.

...