Ag-Grid header 添加自定义 header 模板的组件

Question

我仍在使用 Angular 1.x 和 ag-Grid (non-enterprise)。

但我正在尝试添加来自 angular ui-bootstrap 的工具提示。所以我需要为所有 header 添加一个属性： "uib-tooltip='headerValue' "

问题是它要我实现一个全新的组件。但是他们放在 ag-grid 网站上的示例组件非常复杂并且与默认功能不同。为什么没有一种简单的方法来做这些事情？

为什么弃用 header模板？

所以即使我想对默认的 headers 稍作改动，我基本上也需要承担一切责任。而且我什至没有 header 组件的原始版本作为示例代码。

我只想在header中添加一些新的HTML，不涉及负责排序、字段、菜单等

Answer 1

我知道这已经过时了，但是...我确实处于这种情况，我想知道为什么没有提供...我继续构建了自己的，这并不是非常困难。因为我认为有人可能会发现默认的 header 组件很有用：这里的组件本质上是默认的

请注意，您需要为图标提供超棒的字体，并确保在您的列选项中使用自定义组件。

    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 header 添加自定义 header 模板的组件

Ag-Grid header Component adding custom header templates

angularjs

angular-ui-bootstrap

ag-grid