结合 ng-grid 和 ui-select2:无法选择值 [英] Combining ng-grid and ui-select2: unable to select a value

问题描述

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

In the editableCellTemplate of an ng-grid, I wanted to use a more user-friendly dropdown, and I found ui-select2 to be a good one.

然而，当在 ng-grid 中使用该组件时，对该组件的任何点击都会导致单元格返回到不可编辑模式.

The thing is however, that any click on this component, when it is used inside the ng-grid, results in the cell juming back to non-editable mode.

这样我就无法使用鼠标选择另一个值(我可以使用键盘上的箭头).

This way I can't select another value using the mouse (I can using the arrows on my keyboard).

当我把下拉菜单放在 cellTemplate 中时，它可以工作，但它也应该在 *editable*CellTemplate 中工作.

When I put the dropdown in the cellTemplate, it works, but it should also work in the *editable*CellTemplate.

可以在此处找到一些代码以了解我的意思.

Some code to see what I mean can be found here.

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

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

Does anyone know why that happens, and what could be done to work around it?

推荐答案

我用解决方案更新了 plunker(显示了最后一个网格).

I updated the plunker with the solution (last grid shown).

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

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

The idea is that you should 'talk to ng-grid' exactly like the other editablCellTemplates do. These 'rules' aren't well defined in the documentation, but they could be deduced by looking at ng-grid's source code for the ng-input directive.

基本上，您自己的组件应该通过聚焦编辑器元素来响应 ngGridEventStartCellEdit 事件，最重要的是:您的组件必须发出 ngGridEventEndCellEdit仅当单元格失去焦点时才发生事件(或者当您希望编辑器消失时，例如按下 Enter 或其他键时).

Basically, your own component should respond to the ngGridEventStartCellEdit event by focusing your editor element, and the most important thing is: your component MUST emit the ngGridEventEndCellEdit event only when the cell loses focus (or when you want the editor to disappear, like maybe when pressing enter or something).

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

So for this specific case I created my own directive that adds the necessary behaviour to a ui-select2 element, but I imagine you could understand what you'd have to do for your own specific case.

所以，作为一个例子，这是我的 ui-select2 特定指令:

So, as an example, here is my ui-select2 specific directive:

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 必须看起来像这样:

and my own editableCellTemplate would have to look something like this:

$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

A little bit of 'official' information can be found here: https://github.com/angular-ui/ng-grid/blob/master/CHANGELOG.md#editing-cells

这篇关于结合 ng-grid 和 ui-select2:无法选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！