slickgrid中的Selectize下拉列表隐藏在光滑网格边界之外.我怎样才能登顶

Question

我使用selectize在slickgrid中提供内联单元格编辑。我可以在单元格中加载此组件。但是，当下拉选项容器弹出并超出slickgrid视口时，下拉选项容器会被slickrid边界截断。它应该越过网格。如何将下拉选项容器置于顶部。

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();
});

我在这个plunker 的Effort Driven列中添加了选择性下拉菜单

Answer 1

我曾经使用chosen作为我的增强选择，但我遇到了这个问题，由于它使用的HTML，它无法解决。我不得不擅自离船；跳槽去选2。这里有一些例子-查看"Select2 javascript下拉编辑器"one_answers"Select2 Multiselect javascript下拉编辑"。

Answer 2

确保z索引大于SlickGrid使用的索引。如果我没记错的话，SlickGrid的最高成绩是11分或12分，所以有了13分，你应该很好。还要检查单元格的css类是否溢出；你的上下文菜单可能会被切断。