外部ui-grid-menu按钮? [英] External ui-grid-menu-button?

问题描述

以下网址中还有另一个堆栈溢出问题，但是恰好是一岁，答案为零:

There is another stack overflow question at the following url however it happens to be a year old with zero answers:

外部ui-grid-menu-button

基本上，我需要找到一种方法来将ui-grid-menu-button与表格的右上角分开，并将其放置在其他位置.我似乎找不到任何相关文档，我正在寻找任何解决方法或可靠的解决方案.

Basically I need to find a way to separate ui-grid-menu-button from the top right of the table and position it somewhere else. I can't seem to find any documentation on this, i'm looking for any work arounds or a hackish solution.

推荐答案

这就是我解决此问题的方式.

This is how i solved this problem.

我在注释中写了每一行的目的.我必须隐藏原始按钮，并且因为菜单是在该按钮正下方自动打开的，并且我希望菜单在右上角，所以我必须重置按钮的高度(请参阅我的最终结果).如果您不希望将打开的网格菜单的位置放在表格的左上角或右上角，则可能会出现问题.

I wrote the purpose of every line in the comments. I have to hide the original button and, because the menu is automagically opened right under that button and I want the menu in the top-right corner, I have to reset the height of the button (see my final result). The position of the opened grid menu could be a problem if you don't want it in the top-left or top-right corner of the table.

.ui-grid-menu-button {
    border: none;               // hide button
    background: transparent;    // hide button
}
.ui-grid-menu-button .ui-grid-icon-container {
    visibility: hidden;         // hide button
    height: 0;                  // menu in top-right corner
    margin-top: 0;              // menu in top-right corner
}

我的自定义按钮的HTML

<div
    ng-if="myUiGridOptions.enableGridMenu"
    ng-click="gridApi.grid.gridMenuScope.toggleMenu()">
    <!-- menu icon -->
</div>

gridApi对象是ui-grid的api，可以通过这种方式获取

The gridApi object is the api of ui-grid, obtainable in this way

myUiGridOptions.onRegisterApi = function (gridApi) => {
    $scope.gridApi = gridApi;
};

---

这篇关于外部ui-grid-menu按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！