Question

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

然而，事情是，当在ng-grid内部使用该组件时，任何单击此组件都会导致单元格返回到不可编辑模式。

这样我就无法使用鼠标选择其他值（我可以使用键盘上的箭头）。

当我将下拉列表放在cellTemplate中时，它可以正常工作，但它也适用于* 可编辑的 * CellTemplate。

有些代码可以在这里找到我的意思。

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

有谁知道为什么会发生这种情况，可以采取哪些措施来解决这个问题？

Answer 1

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

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

这个想法是你应该像其他editablCellTemplates那样“与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

Answer 2

datepicker的模板

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

并且angular指令看起来像这样。

 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);

              } 
          };
      });

结合ng-grid和ui-select2：无法选择值

2 个答案: