mcautocomplete 在 slickgrid 上消失
mcautocomplete disappearing over slickgrid
我在 slickgrid 中添加了 mcautocomplete。如果我选中某些复选框,则 mcautocomplete table 在 slickgrid 上不再可见。请检查图片。
我如何确保我的自动完成选项在我的 slickgrid 上可见?
$.widget('custom.mcautocomplete', $.ui.autocomplete, {
_create: function () {
this._super();
this.widget().menu("option", "items", "> :not(.ui-widget-header)");
},
_renderMenu: function (ul, items) {
var self = this,
thead;
if (this.options.showHeader) {
table = $('<div class="ui-widget-header" style="width:100%"></div>');
$.each(this.options.columns, function (index, item) {
table.append('<span style="font-weight:bold;background-color:#EEE8AA;padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
});
table.append('<div style="clear: both;"></div>');
ul.append(table);
}
$.each(items, function (index, item) {
self._renderItem(ul, item);
});
},
_renderItem: function (ul, item) {
var t = '',
result = '';
$.each(this.options.columns, function (index, column) {
t += '<span style="background-color:#ADD8E6;padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
});
result = $('<div></div>')
.data('ui-autocomplete-item', item)
.append('<div class="mcacAnchor">' + t + '<div style="clear: both;"></div></div>')
.appendTo(ul);
return result;
}
});
您可以尝试 z-index(这可能很复杂,并且归结为容器元素的优先级),但我发现某些 javascript 控件的结构与 SlickGrid 根本不兼容.
(并不是说 mcautocomplete 不兼容,经过正确的调整,但它可能不兼容)。
例如,我使用 'chosen' 作为下拉菜单,但由于它使用了 table 不能很好地与 slickgrid 基础设施配合使用的元素,我不得不放弃 'select2' . 6pac github 存储库中有一个 'select2' 示例,我认为 select2 具有自动更正模式。可能值得一试。
我在 slickgrid 中添加了 mcautocomplete。如果我选中某些复选框,则 mcautocomplete table 在 slickgrid 上不再可见。请检查图片。 我如何确保我的自动完成选项在我的 slickgrid 上可见?
$.widget('custom.mcautocomplete', $.ui.autocomplete, {
_create: function () {
this._super();
this.widget().menu("option", "items", "> :not(.ui-widget-header)");
},
_renderMenu: function (ul, items) {
var self = this,
thead;
if (this.options.showHeader) {
table = $('<div class="ui-widget-header" style="width:100%"></div>');
$.each(this.options.columns, function (index, item) {
table.append('<span style="font-weight:bold;background-color:#EEE8AA;padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
});
table.append('<div style="clear: both;"></div>');
ul.append(table);
}
$.each(items, function (index, item) {
self._renderItem(ul, item);
});
},
_renderItem: function (ul, item) {
var t = '',
result = '';
$.each(this.options.columns, function (index, column) {
t += '<span style="background-color:#ADD8E6;padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
});
result = $('<div></div>')
.data('ui-autocomplete-item', item)
.append('<div class="mcacAnchor">' + t + '<div style="clear: both;"></div></div>')
.appendTo(ul);
return result;
}
});
您可以尝试 z-index(这可能很复杂,并且归结为容器元素的优先级),但我发现某些 javascript 控件的结构与 SlickGrid 根本不兼容.
(并不是说 mcautocomplete 不兼容,经过正确的调整,但它可能不兼容)。
例如,我使用 'chosen' 作为下拉菜单,但由于它使用了 table 不能很好地与 slickgrid 基础设施配合使用的元素,我不得不放弃 'select2' . 6pac github 存储库中有一个 'select2' 示例,我认为 select2 具有自动更正模式。可能值得一试。