0

在 ng-grid 的 editableCellTemplate 中，我想使用更用户友好的下拉菜单，我发现 ui-select2 是一个不错的选择。

然而，在 ng-grid 中使用该组件时，任何单击该组件都会导致单元格跳回不可编辑模式。

这样我就不能使用鼠标选择另一个值（我可以使用键盘上的箭头）。

当我将下拉列表放在 cellTemplate 中时，它可以工作，但它也应该在 *可编辑*CellTemplate 中工作。

可以在这里找到一些代码来了解我的意思。

http://plnkr.co/edit/taPmlwLxZrF10jwwb1FX?p=preview

有谁知道为什么会发生这种情况，以及可以做些什么来解决它？

4

2 回答 2

2

我用解决方案更新了 plunker（显示的最后一个网格）。

http://plnkr.co/edit/taPmlwLxZrF10jwwb1FX?p=preview

这个想法是你应该像其他 editableCellTemplates 一样“与 ng-grid 交谈”。这些“规则”在文档中没有明确定义，但可以通过查看 ng-grid 的 ng-input 指令源代码来推断。

基本上，您自己的组件应该通过聚焦您的编辑器元素来响应ngGridEventStartCellEdit事件，最重要的是：您的组件必须仅在单元格失去焦点时发出ngGridEventEndCellEdit事件（或者当您希望编辑器消失时，例如当按回车或其他东西）。

因此，对于这个特定情况，我创建了自己的指令，将必要的行为添加到 ui-select2 元素，但我想你可以理解你必须为自己的特定情况做些什么。

因此，作为示例，这是我的 ui-select2 特定指令：

app.directive(
            'uiSelect2EditableCellTemplate', 
            [ 
                function() {
                    return {
                        restrict: "A",
                        link: function ( scope, elm, attrs ) {
                            //make sure the id is set, so we can focus the ui-select2 by ID later on (because its ID will be generated from our id if we have one)
                            elm.attr( "id", "input-" + scope.col.index +  "-" + scope.row.rowIndex );

                            elm.on( 'click', function( evt ) {
                                evt.stopPropagation();
                            } ); 

                            elm.on( 'mousedown', function( evt ) {
                                evt.stopPropagation();
                            } ); 

                            //select2 has its own blur event !
                            elm.on( 'select2-blur', 
                                        function ( event ) { 
                                            scope.$emit( 'ngGridEventEndCellEdit' );                                                
                                        } 
                            );

                            scope.$on( 'ngGridEventStartCellEdit', function () {
                                //Event is fired BEFORE the new elements are part of the DOM, so try to set the focus after a timeout
                                setTimeout( function () {
                                                $( "#s2id_" + elm[0].id ).select2( 'open' );
                                            }, 10 );
                            } );


                        }
                    };
                }
            ] 
);

我自己的 editableCellTemplate 必须看起来像这样：

$scope.cellTemplateDropdownUiSelect3 =
'<select ui-select2-editable-cell-template ui-select2 ng-model="COL_FIELD" style="width: 90%" >' +
            '<option ng-repeat="(fkid, fkrow) in fkvalues_country" value="{{fkid}}" ng-selected="COL_FIELD == fkid" >{{fkrow}} ({{fkid}})</option>' +
'</select>' ;

可以在这里找到一些“官方”信息：https ://github.com/angular-ui/ng-grid/blob/master/CHANGELOG.md#editing-cells

于 2013-12-28T10:56:52.580 回答
2

日期选择器的模板

<input type="text" datepicker ng-model="COL_FIELD"/>

角度指令看起来像这样。

 app.directive('datepicker',

      function () {
          return {

              restrict: 'A',
              require: '?ngModel',
              scope: {},
              link: function (scope, element, attrs, ngModel) {

                  if (!ngModel) return;
                  var optionsObj = {};
                  optionsObj.dateFormat = 'dd/mm/yy';
                  optionsObj.onClose = function(){
                    scope.$emit( 'ngGridEventEndCellEdit' ); 
                  }


                  var updateModel = function (date) {
                                            scope.$apply(function () {
                                            ngModel.$setViewValue(date);
                                        });
                                };

                  optionsObj.onSelect = function (date, picker) {
                      updateModel(date);
                  };

                  ngModel.$render = function () {
                      element.datepicker('setDate', ngModel.$viewValue || '');
                  };

                scope.$on('ngGridEventStartCellEdit', function (obj) {
                    element.datepicker( "show" );  
                });

                scope.$on('ngGridEventStartCellEdit', function (obj) {
                    element.datepicker( "show" );  
                });
                element.datepicker(optionsObj);

              } 
          };
      });
于 2014-12-04T04:59:06.993 回答