Ag-Grid 标头组件添加自定义标头模板 [英] Ag-Grid header Component adding custom header templates
问题描述
我仍在使用 Angular 1.x 和 ag-Grid(非企业).
I'm still using Angular 1.x and ag-Grid (non-enterprise).
但我正在尝试从 angular ui-bootstrap 添加工具提示.所以我需要为所有标题添加一个属性:uib-tooltip='headerValue'"
But I'm trying to add tooltips from angular ui-bootstrap. So I need to add an attribute to all headers: "uib-tooltip='headerValue' "
问题是它想让我实现一个全新的组件.但是他们放在 ag-grid 网站上的示例组件超级复杂,并且与默认功能不同.为什么没有一种简单的方法来做这些事情?
The issue is that it wants me to implement a whole new component. But the example component they put on the ag-grid website is super complicated and different from the default functionality. Why isn't there an easy way of doing these things?
为什么要弃用 headerTemplate?
Why deprecate headerTemplate?
因此,即使我想对默认标头稍作更改,我基本上也需要承担所有责任.而且我什至没有原始版本的标头组件作为示例代码.
So even if I want a slight change from the default headers, I basically need to take over responsibility for everything. And I don't even have the original version of header component as example code.
我只想在不涉及排序、字段、菜单等的标题中添加一些新的 HTML.
I just want to add some new HTML to the header that doesn't involve taking responsibility for sorting, field, menu etc.
推荐答案
我知道这已经过时了,但是......我正是在这种情况下,我想知道为什么没有提供它......我继续建立我自己的,这不是非常困难.因为我认为有人可能会发现一个默认的标头组件很有用:这里有一个本质上是默认的
I know this is old but...I was in this exact situation, where I was wondering why it wasn't provided... I went ahead and built my own which wasn't extremely hard. Since I think someone might find a default header component useful: here's one that is essentially the default
请注意,图标需要字体很棒,并确保在列选项中使用自定义组件.
Note you'll need font awesome for the icons and make sure to use the custom component in your column options.
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)
}
};
这篇关于Ag-Grid 标头组件添加自定义标头模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!