Angular UI-Grid 中的自定义下拉列表

Question

我正在玩弄 new Angular UI-Grid, and am having problems injecting a custom dropdown into a grid cell. The built-in dropdown functionality doesn't work for my project since you can only go so far to style a SELECT tag. I'd like to use this swanky multi-select dropdown，但看起来 ui-grid 的魔力要么阻止我打开的下拉事件传播，要么我的下拉列表无法初始化在飞行中。

这是我的示例代码：

HTML:

<div ng-controller="MainCtrl">
    <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>
<script src="app.js"></script>`

app.js:

var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'angularjs-dropdown-multiselect']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  var grid;

    $scope.msData = [ {id: 1, label: "David"}, {id: 2, label: "John"}, {id: 3, label: "Danny"}];
    $scope.msSettings = {enableSearch: true, smartButtonMaxItems: 3, smartButtonTextConverter: function(itemText, originalItem) {return originalItem.id;}};

  $scope.gridOptions = {
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name'}
      ,{ name: 'friends', displayName: 'Friends', editableCellTemplate: 'temp.html', width: '250', editDropdownValueLabel: 'friends'}
    ],
    onRegisterApi: function( gridApi ) {
      grid = gridApi.grid;
    }
  };

  $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });

}]);

temp.html（编辑单元格模板）：

<div ng-dropdown-multiselect="" options="msData" selected-model="MODEL_COL_FIELD" extra-settings="msSettings" checkboxes="true"></div>

当您双击“好友”单元格时，会出现 select 下拉按钮，但单击它不会展开下拉菜单。

Here is a plunker

我试过其他几种下拉菜单的方法，但都存在基本元素（按钮、link 等）出现但下拉菜单不展开的相同问题.

有没有人对如何阻止 ui-grid 拦截我的点击事件有任何建议（如果这确实是导致问题的原因）？或者你们中有没有好人以前在 ui-grid 中实现过类似的自定义下拉菜单？

Answer 1

最有可能的问题是您需要创建一个指令，而不仅仅是一个模板。请参阅此处的讨论：http://ui-grid.info/docs/#/tutorial/201_editable 关于自定义编辑器。

要了解它的外观，请查看 edit.js 文件和底部指令：https://github.com/angular-ui/ng-grid/blob/master/src/features/edit/js/gridEdit.js

最后一个指令，用于文件选择器，是我最近添加的。您可能需要类似的东西（或者可能更像是 uiGridEditDropdown 的指令，我在文件的后面添加了一段时间）。

Answer 2

一般来说，在 UI-Grid 中使用基于 html 的小部件的常见问题是，各个单元格以及网格本身都设置为防止其内容溢出。这可以让所有内容保持良好和正常的大小，但是当您想要显示额外的内容（如自定义下拉菜单）时会妨碍。

您可以使用 UI-Select 来解决这个问题，因为它有一个 append-to-body 属性，该属性绝对会将元素定位在正确的位置，但它会附加到文档正文中，这会被删除溢出问题。

我在这里写了一篇关于执行此操作的确切方法的文章：http://brianhann.com/ui-grid-and-dropdowns/。可能有一些方法可以用其他小部件做同样的事情，但它可能需要一些额外的编码，甚至可能需要分叉它们。

Angular UI-Grid 中的自定义下拉列表

Custom Dropdown within Angular UI-Grid

html

angularjs

drop-down-menu

angular-ui-grid