Question

ng-grid是否提供了右键单击上下文菜单？

我在http://angular-ui.github.io/ng-grid/

上找不到它

但是我确实记得几个星期前（2014年7月）有一个全面的演示页面，其中显示了行级甚至单元格级别的右键单击上下文菜单。

不幸的是我现在没有这个网址，奇怪的是我再也找不到这个网址了。

提前致谢。

Answer 1

是的，ng-context-menu是要走的路。只是不要将下拉代码与rowTemplate放在一起，因为位置不正确。把它放在ui-grid之外。这种方法的唯一问题是获得当前的ui-grid行。我决定在上下文菜单打开时将其保存到控制器范围。我的rowTemplate：

<script type="text/ng-template" id="member-list.row.html">
        <div ng-click="col.isRowHeader || grid.appScope.selectNode(row.entity)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" class="ui-grid-cell" ng-class="{'ui-grid-row-header-cell': col.isRowHeader, '__selected': row.entity.id===grid.appScope.selectedNodeId }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell style='cursor:pointer' context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="cml_menu"></div>
    </script>

请注意 context-menu =“grid.appScope.contextMenuEntity = row.entity”data-target =“cml_menu”。这样我可以在以后的任何地方使用 contextMenuEntity 。在上下文菜单下拉列表中使用它：

<ul class="menu __context" role="menu" id="cml_menu">
  <li class="menu-item" ng-click='blade.showDetailBlade(contextMenuEntity, contextMenuEntity.displayName)'>
    <i class="menu-ico fa fa-edit"></i> Manage
  </li>
  <li class="menu-item" ng-click='delete(contextMenuEntity)'>
    <i class="menu-ico fa fa-trash-o"></i> Delete
  </li>
</ul>

Answer 2

获取行

html：

<div id="grid1" ui-grid="vm.gridOptions1" ng-right-button="vm.rightClick($event)" ui-grid-pagination  ui-grid-move-columns  ui-grid-selection class="grid"></div>

JS：

    angular.module('Context')
           .controller('ContextM', ContextM)
           .directive('ngRightButton', ngRightButton );

 ContextM.$inject = ['$scope', '$rootScope', '$state', '$timeout'];
 ngRightButton.$inject = ['$parse'];

function FoboItemController ($scope, $rootScope, $timeout){
      $scope.gridOptions = {data: myData};

       $scope.rightClick = function (event) {
                var scope = angular.element(event.toElement).scope()
                console.log('you clicked on row: ', scope.rowRenderIndex);
        };



    }]);

    app.directive('rightClick', function($parse) {
            return function(scope, element, attrs) {
                var fn = $parse(attrs.rightClick);
                element.bind('contextmenu', function(event) {
                    scope.$apply(function() {
                        event.preventDefault();
                        fn(scope, {$event:event});
                    });
                });
            };
        });
    }
})();

ng-grid是否有右键单击上下文菜单？

2 个答案: