角UI电网双击行以打开弹出编辑一行 [英] Angular ui-grid double click row to open pop-up for editing a row

查看：434
本文介绍了角UI电网双击行以打开弹出编辑一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

版本：

我采用了棱角分明的UI网版本3.0.0-RC.18（ http://ui-grid.info / ）。

问题

我要实现在UI的网格表双击事件。我特别想开在行时双击模式弹出。

我试图用rowTemplate定义范围内的NG-DBLCLICK指令，因为建议在的 https://github.com/angular-ui/ng-grid/issues/2228 ，但DBLCLICK事件从来没有发射。

不过，我发现了一个解决方案，但利用自己创建的指令。我可以做的更好，而无需创建一个指令？

任何意见将是AP preciated。

code：

在我的控制器code是如下：

  $ scope.onDblClick =功能（行）{
    VAR URL ='//google.com';
    $ window.open（URL，_blank，HEIGHT = 600，宽度= 800，工具栏=没有，位置=没有，菜单=没有，标题栏=无）;
}//定义新的矛盾模拟网格行为
$ scope.myGridOptions = {
    showFooter：假的，
    enableSorting：真实，
    多选：假的，
    enableFiltering：真实，
    enableRowSelection：真实，
    enableSelectAll：假的，
    enableRowHeaderSelection：假的，
    enableGridMenu：真实，
    noUnselect：真实，
    onRegisterApi：功能（gridApi）{
        $ scope.gridApi = gridApi;
    }，
    rowTemplate：＆LT; D​​IV NG-DBLCLICK = \\onfocus此（行）\\NG重复= \\（colRenderIndex，COL）的colContainer.renderedColumns轨道由col.colDef.name \\类= \\用户界面，并网电池\\纳克级= \\{UI网排头细胞：col.isRowHeader} \\UI网格细胞DBL单击行＆GT;＆LT; / DIV＆gt;中}

（凡DBL单击行指示​​我现在用的是dblClickRow指令）

在查看我的code是如下：

 ＆LT; D​​IV ID =myGridUI格=myGridOptionsUI格选择UI并网调整柱类=gridTable＆GT;＆LT; / DIV＆GT ;

在该指令我的code是如下：

  VAR angularStartDirectives = angular.module（'angularStart.directives'，[]）;angularStartDirectives.directive（'dblClickRow'，['$编译，$解析'，函数（$编译，$解析）{
  返回{
    优先级：-190，//默认uiGridCell指令后运行
    限制：'A'，
    适用范围：假的，    编译：函数（$元素，属性）{        //获取在NG-DBLCLICK的UI网格功能
        变种FN = $解析（ATTR ['ngDblclick'] / * * interceptorFn / null的，/ * * expensiveChecks / TRUE）;        返回功能ngEventHandler（范围，元素）{            element.on（'DBLCLICK'，函数（事件）{              VAR回调函数=（）{                如果（$ scope.gridApi.grid.selection.lastSelectedRow）
                {
                    FN（$范围，{$事件：事件，排：$ scope.gridApi.grid.selection.lastSelectedRow.entity}）;
                }
              };              。$ $范围适用（回调）;            }
        ）};    }    };
}]）;


解决方案

好吧，我的问题得到回答在Github上：

https://github.com/angular-ui/ NG-网/问题/ 2228＃issuecomment-71912850

我的错误是不使用外部范围，并尝试解决，只有NG-DBLCLICK的问题。

在code应该是这样的：

在控制器：

  $ scope.gridHandlers = {    onfocus此：函数（行）{
        VAR URL ='//google.com';
        $ window.open（URL，_blank，HEIGHT = 600，宽度= 800，工具栏=没有，位置=没有，菜单=没有，标题栏=无）;
   }
}$ scope.myGridOptions = {
    showFooter：假的，
    enableSorting：真实，
    多选：假的，
    enableFiltering：真实，
    enableRowSelection：真实，
    enableSelectAll：假的，
    enableRowHeaderSelection：假的，
    enableGridMenu：真实，
    noUnselect：真实，
    onRegisterApi：功能（gridApi）{
        $ scope.gridApi = gridApi;
    }，
    rowTemplate：＆LT; D​​IV NG-DBLCLICK = \\getExternalScopes（）onfocus此在colContainer.renderedColumns轨道（行）\\NG重复= \\（colRenderIndex，列）由col.colDef.name \\类= \\ UI的网格单元\\纳克级= \\{UI网排头细胞：col.isRowHeader} \\UI-格电池＆gt;＆LT; / DIV＆gt;中}

在查看：

 ＆LT; D​​IV ID =myGridUI格=myGridOptionsUI格选择UI并网调整柱类=gridTable外部范围=gridHandlers ＆GT;＆LT; / DIV＆GT;

更新UI电网V3.0.0-rc.21：

考虑到externalScopes不再支持，现在appScopeProvider规则。

在该视图：

 ＆LT; D​​IV ID =myGridUI格=myGridOptionsUI格选择UI并网调整柱类=gridTable＆GT;＆LT; / DIV＆GT ;

在控制器：

  $ scope.myGridOptions = {
    showFooter：假的，
    enableSorting：真实，
    多选：假的，
    enableFiltering：真实，
    enableRowSelection：真实，
    enableSelectAll：假的，
    enableRowHeaderSelection：假的，
    enableGridMenu：真实，
    noUnselect：真实，
    onRegisterApi：功能（gridApi）{
       $ scope.gridApi = gridApi;
    }，
    appScopeProvider：{
        onfocus此：函数（行）{
           VAR URL ='//google.com';
           $ window.open（URL，_blank，HEIGHT = 600，宽度= 800，工具栏=没有，位置=没有，菜单=没有，标题栏=无）;
         }
    }，
    rowTemplate：＆LT; D​​IV NG-DBLCLICK = \\grid.appScope.onDblClick（行）\\NG重复= \\（colRenderIndex，COL）的colContainer.renderedColumns轨道由col.colDef.name \\类= \\ UI的网格单元\\纳克级= \\{UI网排头细胞：col.isRowHeader} \\UI-格电池＆gt;＆LT; / DIV＆gt;中
}

下面是使用模式弹出我在Plnkr例子（与角UI的引导完成）：

http://plnkr.co/edit/cq7s9lKn90xTVgNxIC6b?p=$p$ PVIEW

请注意，如果您使用的UI引导的新版本，则需要在上面plunkr至$ uibModal重命名$模式。

VERSION:

I am using Angular ui-grid version 3.0.0-RC.18 (http://ui-grid.info/).

PROBLEM

I want to implement a double-click event in an ui-grid table. In particular, I want to open a modal pop-up when double-clicking at a row.

I tried to use a ng-dblclick directive inside the rowTemplate definition as is suggested at https://github.com/angular-ui/ng-grid/issues/2228 , but 'dblclick' event is never fired.

Nevertheless, I found a solution, but using a directive created by my own. Can I do it better, without creating a directive?

Any comment would be appreciated.

CODE:

My code at the Controller is as follows: 

$scope.onDblClick = function(row) {
    var url = '//google.com';
    $window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no");
}

// Define the New Conflicts Simulation GRID behavior
$scope.myGridOptions = {
    showFooter: false,
    enableSorting: true,
    multiSelect: false,
    enableFiltering: true,     
    enableRowSelection: true, 
    enableSelectAll: false,
    enableRowHeaderSelection: false,  
    enableGridMenu: true,
    noUnselect: true,
    onRegisterApi: function (gridApi){
        $scope.gridApi = gridApi;
    },
    rowTemplate: "<div ng-dblclick=\"onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell dbl-click-row></div>"            

}

(Where dbl-click-row indicates I am using the dblClickRow directive)

My code at the View is as follows:

<div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" ></div>

My code at the Directive is as follows:

var angularStartDirectives = angular.module('angularStart.directives', []);     

angularStartDirectives.directive('dblClickRow', ['$compile', '$parse',  function($compile, $parse) {
  return {
    priority : -190, // run after default uiGridCell directive
    restrict : 'A',
    scope : false,

    compile: function($element, attr) {

        // Get the function at ng-dblclick for ui-grid
        var fn = $parse(attr['ngDblclick'], /* interceptorFn */ null, /* expensiveChecks */ true);

        return function ngEventHandler(scope, element) {

            element.on('dblclick', function(event) {

              var callback = function() {

                if ($scope.gridApi.grid.selection.lastSelectedRow)
                {
                    fn($scope, {$event:event, row: $scope.gridApi.grid.selection.lastSelectedRow.entity });
                }
              };

              $scope.$apply(callback);

            }
        )};

    }

    };
} ]);

解决方案

Well, my question was answered at Github:

https://github.com/angular-ui/ng-grid/issues/2228#issuecomment-71912850

My mistake was not to use external-scopes, and try to solve the problem with ng-dblclick only.

The code should be like this:

At the Controller:

$scope.gridHandlers = { 

    onDblClick : function(row) {
        var url = '//google.com';
        $window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no");
   }
}

$scope.myGridOptions = {
    showFooter: false,
    enableSorting: true,
    multiSelect: false,
    enableFiltering: true,     
    enableRowSelection: true, 
    enableSelectAll: false,
    enableRowHeaderSelection: false,  
    enableGridMenu: true,
    noUnselect: true,
    onRegisterApi: function (gridApi){
        $scope.gridApi = gridApi;
    },
    rowTemplate: "<div ng-dblclick=\"getExternalScopes().onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell ></div>"            

}

At the View:

<div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" external-scopes="gridHandlers"></div>

Update for ui-grid v3.0.0-rc.21:

Considering that externalScopes is no longer supported, and now appScopeProvider rules.

In the view:

<div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" ></div>

In the controller:

$scope.myGridOptions = {
    showFooter: false,
    enableSorting: true,
    multiSelect: false,
    enableFiltering: true,     
    enableRowSelection: true, 
    enableSelectAll: false,
    enableRowHeaderSelection: false,  
    enableGridMenu: true,
    noUnselect: true,
    onRegisterApi: function (gridApi){
       $scope.gridApi = gridApi;
    },
    appScopeProvider: { 
        onDblClick : function(row) {
           var url = '//google.com';
           $window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no");
         }
    },
    rowTemplate: "<div ng-dblclick=\"grid.appScope.onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell ></div>"
}

Here is my example at Plnkr using a modal popup (done with angular-ui-bootstrap):

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

Note that if you use a newer version of ui-bootstrap, you will need to rename $modal in the above plunkr to $uibModal.

这篇关于角UI电网双击行以打开弹出编辑一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆