Question

我如何在ng-Grid中实现双击事件？更具体地说，我希望双击打开弹出模式（Angular UI Modal）进行编辑。

关于如何做到这一点的任何想法？

Answer 1

在ng-grid 2.0.11中，只需在行模板中调用ng-dblclick指令

$scope.gridOptions = {
    data: 'gdDtA',
    rowTemplate: '<div ng-dblclick="foo(row)" ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex() }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',        
};

$scope.foo = function(r) {
    console.log(r);
}

见：https://github.com/angular-ui/ng-grid/wiki/Templating

Answer 2

来自@ AardVark71 Add Doubleclick Behavior to ng-grid

的问题评论中的链接

将以下Javascript文件添加到可从您的应用访问的某个目录中，并且不要忘记在启动时加载它。

/* 
 DoubleClick row plugin
*/

function ngGridDoubleClick() {
    var self = this;
    self.$scope = null;
    self.myGrid = null;

    // The init method gets called during the ng-grid directive execution.
    self.init = function(scope, grid, services) {
        // The directive passes in the grid scope and the grid object which
        // we will want to save for manipulation later.
        self.$scope = scope;
        self.myGrid = grid;
        // In this example we want to assign grid events.
        self.assignEvents();
    };
    self.assignEvents = function() {
        // Here we set the double-click event handler to the header container.
        self.myGrid.$viewport.on('dblclick', self.onDoubleClick);
    };
    // double-click function
    self.onDoubleClick = function(event) {
        self.myGrid.config.dblClickFn(self.$scope.selectedItems[0]);
        self.$scope.$apply();
    };
}

定义一个函数来处理双击并更新grid-options，如下所示：

$scope.myDblClickHandler = function(rowItem) {
// rowItem is actually the entity of the row ...
}

$scope.gridOptions = {
    // other config here...
    dblClickFn: $scope.myDblClickHandler,
    plugins: [ngGridDoubleClick]
}

此功能不必在$ scope上就可以使用。

ngGrid双击行以打开弹出窗口以编辑行

2 个答案: