ng-grid 隐藏引导样式的下拉菜单答案

【问题标题】：ng-grid hiding bootstrap styled dropdownsng-grid 隐藏引导样式的下拉菜单
【发布时间】：2013-12-03 02:52:41
【问题描述】：

我正在升级表格。表中的每一行都有几个元素，包括每行特定列中的两个下拉菜单。我已将表格升级为 ng-grid，并将下拉列表从普通选择小部件升级为样式引导 drop-down elements 以匹配网站上的其他小部件。我遇到的基本问题是 ng-grid 的 CSS 布局导致实际的下拉菜单放在下面的单元格后面，因此不可见。检查元素表明它们实际上正在被渲染，具有适当的高度、宽度和内容，但仅显示在另一个单元格中的内容后面。我已经尝试禁用 CSS 溢出：隐藏在所需的单元格上，但似乎这个属性也是为整个网格设置的，并且在该级别将其关闭完全破坏了网格布局。我有一个可行的解决方法，但它让我想洗个澡，我相信有一种更优雅的方法可以做到这一点：

1) 为可见部分放置一个单元格模板，包括传递列的 ng-click 调用（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) 将选择行回调放到不同的方法中：

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

3) 有一个完全独立的下拉选项角模板，该模板被归类为始终显示为引导打开，但同时具有 ng-show 和 ng-style 元素，以允许我的代码更改其可见性和精确性地点：

<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>

当用户点击（明显的）下拉菜单时，会发生以下情况：

1) ng-click 事件将列传递给类，这是存储的

2）行选择（afterSelectionChange）回调随行触发，并能够从上一次调用中获取列，行和列我们现在都知道实际的单元格

3) 抓取相关单元格的确切屏幕位置，下拉选择模板直接在单击的单元格下方可见，从而产生正常下拉操作的错觉。

这是一个很长的解释，但想给出我尝试过的背景，以表明我正在寻找一种更简单（希望更简单）的方法，只在 ng-grid 单元格中包含样式引导下拉小部件.该项目的整个主旨是对已经工作的表单进行样式化和美化，因此仅通过切割样式来实现纯功能的解决方案并不能真正达到目的。

【问题讨论】：

不要认为你能在 ng-grid 中做到这一点，因为它使用绝对位置 DIv 用于固定高度和隐藏溢出的单元格。可以尝试更改单元格/行的溢出。替代方法是创建指令，根据单元格的偏移位置将下拉列表置于网格顶部，或使用不同的网格

标签： angularjs twitter-bootstrap coffeescript ng-grid

【解决方案1】：

我就是这样解决的。我在 ng-grid 中有一个单元格，在单元格中我有一个向下的字形箭头。当我单击它时，我希望显示下拉切换。有了 CSS，我得到了我想要的。但是，我有许多带有箭头的单元格，因此我必须动态更改 css 样式的“左”。我用我的 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);
};

【讨论】：

【解决方案2】：

为了显示常规的下拉菜单，我添加了这个 css：

.ngCell { overflow: visible; }

为了让多选出现，我需要将一个类（我使用“field-multiselect”）添加到editableCellTemplate，然后将以下css添加到类中：

.field-multiselect {
position: relative;
overflow: visible;
z-index: 888; }

这对我有用！（最后，经过相当多的反复试验！）

【讨论】：