Заголовок Ag-Grid Компонент, добавляющий настраиваемые шаблоны заголовков

Question

Я все еще использую Angular 1.x и ag-Grid (не для предприятий).

Но я пытаюсь добавить всплывающие подсказки из углового ui-бутстрапа. Поэтому мне нужно добавить атрибут ко всем заголовкам: «uib-tooltip = 'headerValue»

Проблема в том, что он хочет, чтобы я реализовал совершенно новый компонент. Но примерный компонент, который они размещают на веб-сайте ag-grid, очень сложный и отличается от функциональности по умолчанию. Почему нет простого способа сделать это?

Зачем отказываться от заголовка?

Так что, даже если я хочу небольшое изменение от заголовков по умолчанию, мне в основном нужно взять на себя ответственность за все. И у меня даже нет исходной версии компонента заголовка в качестве примера кода.

Я просто хочу, чтобы добавить новый HTML в заголовок, который не включает брать на себя ответственность за сортировку, поля, меню и т.д.

Answer 1

Я знаю, что это старое, но ... Я был в этой конкретной ситуации, где мне было интересно, почему это не было предоставлено ... Я пошел вперед и построил свое, что было не очень сложно. Поскольку я думаю, что кто-то может найти полезный компонент заголовка по умолчанию: вот тот, который по существу является значением по умолчанию

Примечание. Вам понадобится шрифт, отличный от значков, и обязательно используйте настраиваемый компонент в настройках столбца.

function customHeaderComponent() { 
    } 

    customHeaderComponent.prototype.init = function (agParams) { 
     this.agParams = agParams; 
     this.eGui = document.createElement('div'); 
     this.eGui.innerHTML = '' + 
      '<span class="customHeaderLabel">' + this.agParams.displayName + '</span> ' + 
      '<span class="customSortDownLabel inactive"><i class="fa fa-caret-down""></i> </span>' + 
      '<span class="customSortUpLabel inactive"><i class="fa fa-caret-up""></i> </span>'+ 
      '<span class="customFilterLabel inactive"><i class="fa fa-filter"></i> </span>'+ 
      '<span class="customHeaderMenuButton"><i class="fa fa-tasks""></i></span>' 
     ; 

     this.eMenuButton = this.eGui.querySelector(".customHeaderMenuButton"); 
     this.eLabel = this.eGui.querySelector(".customHeaderLabel"); 
     this.eSortDownButton = this.eGui.querySelector(".customSortDownLabel"); 
     this.eSortUpButton = this.eGui.querySelector(".customSortUpLabel"); 
     this.eFilterInd = this.eGui.querySelector(".customFilterLabel"); 


     if (this.agParams.enableMenu) { 
      this.onMenuClickListener = this.onMenuClick.bind(this); 
      this.eMenuButton.addEventListener('click', this.onMenuClickListener); 
     } else { 
      this.eGui.removeChild(this.eMenuButton); 
     } 

     if (this.agParams.enableSorting) { 
      this.eLabel.addEventListener('click', this.changeSort.bind(this)); 

      this.onSortChangedListener = this.onSortChanged.bind(this); 
      this.agParams.column.addEventListener('sortChanged', this.onSortChangedListener); 
      this.onSortChanged(); 
     } 
     var self = this; 
     self.eFilterInd.hidden = !self.agParams.column.isFilterActive(); 
     this.agParams.column.addEventListener('filterChanged', function() { 
      self.eFilterInd.hidden = !self.agParams.column.isFilterActive(); 
     }); 

    }; 

    customHeaderComponent.prototype.changeSort = function (event) { 
     this.agParams.progressSort(event); 
    } 


    customHeaderComponent.prototype.onSortChanged = function() { 
     function deactivate(toDeactivateItems) { 
      toDeactivateItems.forEach(function (toDeactivate) { 
       toDeactivate.hidden = true; 
      }); 
     } 

     function activate(toActivate) { 
      toActivate.hidden = false; 
     } 

     if (this.agParams.column.isSortAscending()) { 
      deactivate([this.eSortUpButton]); 
      activate(this.eSortDownButton) 
     } else if (this.agParams.column.isSortDescending()) { 
      deactivate([this.eSortDownButton]); 
      activate(this.eSortUpButton) 
     } else { 
      deactivate([this.eSortUpButton, this.eSortDownButton]); 
     } 
    }; 

    customHeaderComponent.prototype.getGui = function() { 
     return this.eGui; 
    }; 

    customHeaderComponent.prototype.onMenuClick = function() { 
     this.agParams.showColumnMenu(this.eMenuButton); 
    }; 

    customHeaderComponent.prototype.onSortRequested = function (order, event) { 
     this.agParams.setSort(order, event.shiftKey); 
    }; 

    customHeaderComponent.prototype.destroy = function() { 
     if (this.onMenuClickListener) { 
      this.eMenuButton.removeEventListener('click', this.onMenuClickListener) 
     } 
    };