Angular UI-Grid中的自定義下拉菜單

我正在玩new Angular UI-Grid，並且在向網格單元中注入自定義下拉菜單時遇到問題。 The built-in dropdown functionality不適用於我的項目，因爲您只能選擇一種SELECT標籤。我想使用this swanky multi-select dropdown，但它看起來像ui-grid的魔法是阻止我的傳播開放下拉事件，或者我的下拉列表無法在運行中初始化。Angular 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網格（如果這實際上是什麼導致問題）？或者讓你們中的任何一個人在ui-grid中實現類似的自定義下拉菜單？

來源

2015-04-23 LHoffbeck

最可能的問題是您需要創建一個指令，而不僅僅是一個模板。請參閱此處的討論：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的指令，我在文件後面添加了一些指令）。

來源

2015-04-23 21:38:12 PaulL

一般來說，在UI-Grid中使用基於html的小部件的常見問題是單個單元格以及網格本身都設置爲防止其中的內容溢出。這樣可以讓所有內容都保持良好和正常的大小，但是當您想要顯示額外的內容（如自定義下拉菜單）時會受阻礙。

你可以用UI-Select來解決這個問題，因爲它具有一個append-to-body屬性，它將絕對地將元素放置在正確的位置，但它會被附加到文檔主體，從而擺脫溢出問題。

我有一個在這裏做的確切方法的文章：http://brianhann.com/ui-grid-and-dropdowns/。可能有辦法與其他小部件做同樣的事情，但它可能需要一些額外的編碼，或者甚至分叉它們。

來源

2015-05-22 19:34:13 c0bra

Angular UI-Grid中的自定義下拉菜單

回答

相關問題