Question

我正在使用new Angular UI-Grid，并且在向网格单元格中注入自定义下拉列表时遇到问题。 The built-in dropdown functionality对我的项目不起作用，因为你只能到目前为止设置SELECT标签的样式。我想使用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>

双击“好友”单元格时，会出现“选择”下拉按钮，但单击该按钮不会展开下拉列表。

Here is a plunker

我已经玩过其他一些做下拉列表的方法了，但是所有这些都有相同的问题，其中基本元素（按钮，链接等）出现但下拉列表没有扩展。

有没有人对如何阻止ui-grid拦截我的点击事件有任何建议（如果这实际上是造成问题的原因）？或者你们中的任何一个人以前在ui-grid中实现了类似的自定义下拉列表吗？

Answer 1

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

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

我在这里写了一个确切的方法：http://brianhann.com/ui-grid-and-dropdowns/。可能有办法与其他小部件做同样的事情，但它可能需要一些额外的编码，甚至可能需要它们。

Answer 2

最可能的问题是你需要创建一个指令，而不仅仅是一个模板。请参阅此处的讨论：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的指令，我在文件的后面添加了一段时间）。

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

2 个答案: