NG-格藏匿引导样式下拉菜单 [英] ng-grid hiding bootstrap styled dropdowns

问题描述

我升级表的形式。表中的每一行有几个元素，包括为每个行特定的列两滴起伏。我已经升级了表NG-电网和升级从普通中选择小部件下拉菜单，风格的自举的下拉的元素相匹配的其他网站上。我有根本的问题是，NG-网格的CSS布局会导致细胞的背后下方放的实际下拉菜单，所以不可见。检查元素表明，他们实际上是被渲染，有适当的高度，宽度和内容，但在其他细胞后面的内容仅仅显示。我曾尝试禁用CSS溢出：隐藏所需的细胞，但似乎这个属性也设置为整个电网和关闭它在这一水平完全打破了网格布局。我有一个工作的解决方法，但它让我想洗个澡，我相信有一个更优雅的方式来做到这一点：

I am upgrading a table form. Each row in the table has several elements, including two drop downs in specific columns for each row. I have upgraded the table to ng-grid and upgraded the drop-downs from plain select widgets to styled bootstrap drop-down elements to match the others on the site. The essential problem I am having is that the CSS layout of ng-grid causes the actual drop down menu to be put behind the cell below, and so not visible. Examining the elements shows that they are actually being rendered, have proper height, width and content, but are merely displayed behind the content in the other cell. I have tried disabling the CSS overflow: hidden on the desired cells, but it seems this property is also set for the entire grid and turning it off at that level totally breaks the grid layout. I have a working workaround, but it makes me want to take a shower and I am sure there is a more elegant way to do this:

1）把电池模板只是可见光部分，包括NG-点击呼叫传递柱（CoffeeScript的）：

1) put a cell template in for just the visible part, including an ng-click call passing the column (Coffeescript):

    {field: "type", 
    displayName: "Type",  
    width: 155, 
    original_width: 155, 
    pinned: false, 
    cellClass: "type_col", 
    headerClass: "type_col", 
    cellTemplate: """<div ng-click="editor.activeCol(col)" class="btn-group">
    <button ng-show="row.entity[col.field]" style="width: 125px" 
    class="btn dropdown-toggle blk-txt" href="#">
    {{row.entity[col.field]}}</button><button class="btn">
    <span class="caret"></span></button></div>"""
    },

2）把一个选择行回调不同的方法：

2) Put a select row callback to a different method:

    multiSelect: false,
    enableRowSelection: true,
    afterSelectionChange: angular.bind(@, selectFunc),

3）有被归类为始终显示打开引导的下拉选项一个完全独立的角模板，但同时有NG-节目和NG风格的元素，让我的code改变其可视性和精确的位置：

3) Have a totally separate angular template of the drop-down options that is classed to always be shown open for bootstrap, but has both a ng-show and ng-style elements to allow my code to change its visibility and exact location:

<div ng-show="editor.utilization" ng-style="editor.dropdown_style">
<div class="btn-group editor-widget open">
<ul class="dropdown-menu">
<li ng-click="editor.selectUtil('heavy')"><a href="#">Heavy</a></li>
<li ng-click="editor.selectUtil('medium')"><a href="#">Medium</a></li>
<li ng-click="editor.selectUtil('light')"><a href="#">Light</a></li>
</ul>
</div>
</div>

当用户点击了（视）下拉菜单中，会发生以下情况：

When a user clicks on the (apparent) drop down, the following happens:

1）NG-click事件提供了列类，这是存储

1) ng-click event delivers the column to the class, this is stored

2）行选择（afterSelectionChange）回​​调与行触发器，并且能够得到从previous呼叫的柱，用行和列都我们现在知道实际的细胞

2) row select (afterSelectionChange) callback triggers with the row and is able to get the column from the previous call, with both the row and column we now know the actual cell

3）所涉及的细胞的确切屏幕位置抓住并下拉选项模板被直接下方的点击的细胞可见，使得正常的下拉操作的错觉。

3) The exact screen position of the cell in question is grabbed and the drop-down selections template is made visible directly below the clicked cell, making the illusion of a normal drop-down operation.

这是一个漫长的解释，但想给什么我都试过的背景下，以表明我正在寻找一个更简单（希望更简单）的方式来只包括风格在NG-网格单元引导下拉小部件。该项目的整个方向是风格和美化工作已经形成，因​​此只有通过削减风格的纯功能性的解决方案工作，没有真正达到目的。

This is a long explanation, but wanted to give the background of what I have tried, to show that I am looking for a simpler (hopefully MUCH simpler) way to just include styled bootstrap drop-down widgets in ng-grid cells. The entire thrust of this project is to style and beautify already working forms so solutions that work only by cutting style for pure functionality don't really serve the purpose.

推荐答案

这是我如何解决它。我有一个单元格中的NG-格并在单元格我有一个glyphicon向下箭头。当我点击它，我想要的下拉切换显示。用CSS我得到了我想要的东西。不过，我有很多细胞的箭头，因此我不得不改变CSS样式左的动态。我这样做我的JavaScript。

This is how I solved it. I have a cell in the ng-grid and in the cell i have a glyphicon arrow down. When I click it I want the dropdown toggle to show. With the CSS I got what I wanted. However, I have many cells with arrows and thus I had to change the css-style "left" dynamically. I do this with my javascript.

希望它帮助！

电池模板：

<div class="ngCellText" ng-class="col.colIndex()" class="dropdown">
  <span ng-cell-text>{{row.getProperty(col.field)}}</span>
  <a class="dropdown-toggle" ng-click="setXchords($event)">
    <i class="glyphicon glyphicon-chevron-down"></i>
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="choice in editableItems">
      <a>{{choice}}</a>
    </li>
  </ul>
</div>

CSS：

.dropdown-menu {
    position: fixed;
    top: inherit;
    left: 85px;
}

JavaScript的：

$scope.setXchords = function(e) {
    var elem = angular.element(e.currentTarget);
    $(elem).next().css('left', e.clientX).css('top', e.clientY);
};

这篇关于NG-格藏匿引导样式下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！