Question

我们目前正在使用ng-grid在网格中显示我们的数据。但是，我们现在要做的是为每一行创建一个菜单。

如果它在普通表中，则是一项简单的任务。但是，使用ng-grid时，由于未显示实际菜单，因此存在问题。

换句话说，它将菜单放在单元格中，所以当它显示时，由于溢出隐藏在单元格上，我们只能看到菜单的一部分（希望有意义）

我们正在努力实现这样的目标：http://jsfiddle.net/akA6H/39/

var myApp = angular.module('myApp', ['ui.bootstrap']);

function MyCtrl($scope) {
     $scope.name = 'Superhero';
}

myApp.directive('showOnRowHover',

function () {
   return {
      link: function (scope, element, attrs) {
        element.closest('tr').bind('mouseenter', function () {
            element.show();
        });
        element.closest('tr').bind('mouseleave', function () {
            element.hide();

            var contextmenu = element.find('#contextmenu');
            contextmenu.click();

            element.parent().removeClass('open');
        });
     }
  };
})

Answer 1

您可以使用这样的单元格模板：

    $scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
        field: 'name',
        displayName: 'Name'
      },
      {
        field: 'age',
        displayName: 'Age',
        cellTemplate: '<div ng-mouseover="showmenu=true" ng-mouseleave="showmenu=false" class="ngCellText">{{row.getProperty(col.field)}}' +
          '<span class="hmenu" ng-show="showmenu" ng-click=sayHello(row.entity.name)><button>click me</button></span>' +
          '</div>'
      }
    ]
    };

看看这个简化的Plunker

<强>更新呃，我忘记了：如果你想在行上悬停，你需要定义一个行模板并将开关放在那里并将值应用到$ parent。

    $scope.gridOptions = {
    data: 'myData',
    rowTemplate: '<div  ng-mouseover="$parent.showmenu=true" ng-mouseleave="$parent.showmenu=false" 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>',
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      field: 'age',
      displayName: 'Age',
      cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field)}}' +
        '<span class="hmenu" ng-show="showmenu" ng-click=sayHello(row.entity.name)><button>click me</button></span>' +
        '</div>'
    }]
    };

Updated Plunker here

正在隐藏ng-grid嵌入式菜单

1 个答案: