встроенное меню ng-grid скрыто

В настоящее время мы используем 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');
        });
     }
  };
})

javascript css angularjs ng-grid
person Simon    schedule 30.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать шаблон ячейки следующим образом:

    $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>'
      }
    ]
    };

Посмотрите на этот упрощенный планкер.

ОБНОВЛЕНИЕ: Я забыл: если вы хотите, чтобы это отображалось при наведении курсора на строку, вам также нужно определить шаблон строки, поместить туда переключатель и применить значение к $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>'
    }]
    };

Обновлен плункер здесь

person mainguy    schedule 30.04.2014
comment
не совсем то, что мы после. По сути, мы хотели бы, чтобы меню отображалось для каждой строки. то есть у нас есть кнопка в каждой строке, когда пользователь щелкает, ему предоставляются дополнительные параметры, такие как просмотр дополнительных сведений, редактирование сведений, удаление сведений и т. д. и т. д. - person Simon; 01.05.2014