有个问题，vue3里面自定义的下拉框不行。始终不认识自定义的autocomplete控件。在vue2就可以。
import $ from 'jquery';
import 'jquery-ui'
cell.cellType(new AutocompleteCellType())
function AutocompleteCellType(noteIndex, typeKey, typeName, data) {
this.usedForImport = null
if (typeName) {
this.typeName = typeName
} else {
this.typeName = 'AutocompleteCellType'
}
this.typeKey = typeKey
this.noteIndex = noteIndex
this.sourceData = data
}
AutocompleteCellType.prototype = new GC.Spread.Sheets.CellTypes.Base()
AutocompleteCellType.prototype.createEditorElement = function (context) {
return document.createElement('input')
}
AutocompleteCellType.prototype.activateEditor = function (
editorContext,
cellStyle,
cellRect,
context
) {
var $editor = $(editorContext)
console.log($editor)
GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.call(
this,
editorContext,
cellStyle,
cellRect,
context
)
$editor.css('position', 'absolute')
$editor.css('font', cellStyle.font)
$editor.css('color', cellStyle.foreColor)
//$editor.css("border-bottom", "none");
//$editor.css("border-left", "1px solid white");
//$editor.css("border-top", "1px solid white");
$editor.css('border', 'none')
$editor.attr('gcUIElement', 'gcEditingInput')
let tagData = null
if (this.sourceData && this.sourceData.length > 0) {
tagData = this.sourceData
} else {
tagData =["test","test1"]
}
let activeRow = context.sheet.getActiveRowIndex()
let activeCol = context.sheet.getActiveColumnIndex()
let cell = context.sheet.getCell(activeRow, activeCol)
let that = this
$editor
.autocomplete({
minLength: 0,
source: tagData,
matchContains: true,
select: function (event, ui) {
if (!that.typeKey && that.typeName === 'AutocompleteCellType') {
let cellInfo = { cell: cell, taxonamyId: ui.item.id }
if (that.noteIndex != undefined) {
onBreakdownAutocompleteValueChanged(context.sheet, [cellInfo])
} else {
// setCellReturnTag(ui.item.id,activeRow);
// cell.value(ui.item.label)
onShowTagCellValueChanged(context.sheet, [cellInfo])
}
}
},
})
.focus(function () {
if ($(this).val()) {
$(this).autocomplete('search', $(this).val().trim())
} else {
$(this).autocomplete('search', $(this).val())
}
})
.change()
$editor.data('ui-autocomplete')._renderItem = function (ul, item) {
return $('<li>')
.append("<div title='" + item.desc + "'>" + item.label + '</div>')
.appendTo(ul)
}
let autocompleteStyle =
'max-height: 300px;overflow-y:scroll;overflow-x:hidden;'
if (this.usedForImport) {
autocompleteStyle = 'max-height: 300px;overflow-y:scroll;overflow-x:hidden;'
}
$editor.autocomplete('widget').attr('style', autocompleteStyle)
$editor.autocomplete('widget').attr('gcUIElement', 'gcEditingInput') // keep focus when mouse down on dropdown
if ($editor.val() == '') {
$editor.autocomplete('search', '')
}
return $editor
}
AutocompleteCellType.prototype.deactivateEditor = function (
editorContext,
context
) {
if (editorContext) {
var $editor = $(editorContext)
// $editor.autocomplete("hide");
$editor.autocomplete('destroy')
}
GC.Spread.Sheets.CellTypes.Base.prototype.deactivateEditor.call(
this,
editorContext,
context
)
}
AutocompleteCellType.prototype.setEditorValue = function (
editorContext,
value,
context
) {
$(editorContext).val(value)
}
AutocompleteCellType.prototype.getEditorValue = function (
editorContext,
context
) {
return $(editorContext).val()
}
AutocompleteCellType.prototype.updateEditor = function (
editorContext,
cellStyle,
cellRect,
context
) {
if (editorContext) {
var $editor = $(editorContext)
$editor.css('width', cellRect.width)
$editor.css('height', cellRect.height)
}
}
AutocompleteCellType.prototype.isReservedKey = function (event, context) {
if (context.isEditing && (event.keyCode == 40 || event.keyCode == 38)) {
return true
}
return false
} |
陕公网安备：61019002000258 |
隐私政策 |
网站地图
