Question

我正在升级表格。表中的每一行都有几个元素，包括每行特定列中的两个下拉列表。我已将表升级为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单元格中包含样式化的bootstrap下拉窗口小部件。这个项目的全部目标是设计和美化已经工作的形式，因此只有通过切割风格才能实现纯粹功能的解决方案并不能真正达到目的。

Answer 1

这就是我解决它的方式。我在ng-grid中有一个单元格，在单元格中我有一个glyphicon箭头向下。当我点击它时，我想要显示下拉切换。通过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);
};

Answer 2

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

.ngCell { overflow: visible; }

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

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

这对我有用！（最后，经过相当多的试验和错误！）

ng-grid隐藏bootstrap样式下拉列表

2 个答案: