Выпадающий список в пределах скользящей сетки скрыт за границей скользкой сетки.Как я могу сделать это, чтобы подняться на вершину? - PullRequest
Новая
       10

Выпадающий список в пределах скользящей сетки скрыт за границей скользкой сетки.Как я могу сделать это, чтобы подняться на вершину?

0 голосов
/ 29 октября 2018

Я использую selectize , чтобы обеспечить редактирование встроенных ячеек в slickgrid. Я могу загрузить этот компонент в ячейку. Но когда выпадающий контейнер опций появляется и выходит за пределы окна просмотра slickgrid, выпадающий контейнер опций усекается по границе slickgrid. Это должно прийти через сетку. Как я могу вывести выпадающий контейнер опций наверх. 

var grid;
var columns = [
  { id: 'title', name: 'Title', field: 'title' },
  { id: 'duration', name: 'Duration', field: 'duration' },
  { id: '%', name: '% Complete', field: 'percentComplete' },
  { id: 'start', name: 'Start', field: 'start' },
  { id: 'finish', name: 'Finish', field: 'finish' },
  {
    id: 'effort-driven',
    name: 'Effort Driven',
    field: 'effortDriven',
    editor: IEditor
  },
];

var options = {
  enableCellNavigation: true,
  enableColumnReorder: false,
  editable: true,
  autoHeight: true
};

function IEditor(args) {
  var selectElement = $('<input type="text"/>');
  args.container.append(selectElement[0]);
  selectElement.selectize({
    create: false,
    maxElements: 1,
    options: [
      {
        name: 'A',
        value: 'a'
      },
      {
        name: 'B',
        value: 'b'
      },
      {
        name: 'C',
        value: 'c'
      },
      {
        name: 'D',
        value: 'd'
      },
      {
        name: 'E',
        value: 'e'
      },
      {
        name: 'F',
        value: 'f'
      },
    ],
    labelField: 'name',
    valueField: 'value'
  });

  /*********** REQUIRED METHODS ***********/

  this.destroy = function() {
    // remove all data, events & dom elements created in the constructor
  };

  this.focus = function() {
    // set the focus on the main input control (if any)
  };

  this.isValueChanged = function() {
    // return true if the value(s) being edited by the user has/have been changed
    return false;
  };

  this.serializeValue = function() {
    return '';
  };

  this.loadValue = function(item) {
  };

  this.applyValue = function(item, state) {
  };

  this.validate = function() {
    return { valid: false, msg: 'This field is required' };
  };
}

$(function() {
  var data = [];
  for (var i = 0; i < 3; i++) {
    data[i] = {
      title: 'Task ' + i,
      duration: '5 days',
      percentComplete: Math.round(Math.random() * 100),
      start: '01/01/2009',
      finish: '01/05/2009',
      effortDriven: i % 5 == 0,
    };
  }

  grid = new Slick.Grid('#myGrid', data, columns, options);
  grid.init();
});

Я добавил выпадающий список в колонке Effort Driven в этом плунжере

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Убедитесь, что ваш z-индекс больше, чем тот, который использует SlickGrid.Если я правильно помню, SlickGrid был самым высоким 11 или 12, поэтому с 13 у вас все будет хорошо.Также проверьте переполнение классов CSS ячеек;может случиться так, что ваше контекстное меню просто отключено.

0 голосов
/ 30 октября 2018

Раньше я использовал chosen в качестве расширенного выбора, но столкнулся именно с этой проблемой, и она не была решаема из-за используемого HTML-кода. Мне пришлось прыгнуть с корабля на Select2 . Есть примеры для этого здесь - посмотрите «Редактор раскрывающегося списка JavaScript Select2» и «Редактор раскрывающегося списка JavaScript Select2 Multiselect».

...