- let taxReconTagList = [
- 'ActionScript',
- 'AppleScript',
- 'Asp',
- 'BASIC',
- 'C',
- 'C++',
- 'Clojure',
- 'COBOL',
- 'ColdFusion',
- 'Erlang',
- 'Fortran',
- 'Groovy',
- 'Haskell',
- 'Java',
- 'JavaScript',
- 'Lisp',
- 'Perl',
- 'PHP',
- 'Python',
- 'Ruby',
- 'Scala',
- 'Scheme'
- ];
复制代码
class AutocompleteCellType extends GC.Spread.Sheets.CellTypes.Base {
value;
allTag;
constructor(tl) {
super();
this.value = '';
this.allTag = [...tl];
}
createEditorElement(context, cellWrapperElement) {
cellWrapperElement.style.overflow = 'visible';
let editorContext = document.createElement('div');
editorContext.setAttribute('gcUIElement', 'gcEditingInput');
let editor = document.createElement('div');
// 自定义单元格中editorContext作为容器,需要在创建一个child用于挂载,不能直接挂载到editorContext上
editorContext.appendChild(editor);
return editorContext;
}
activateEditor(editorContext, cellStyle, cellRect, context) {
super.activateEditor.call(
this,
editorContext,
cellStyle,
cellRect,
context
);
// let editor = document.ge
console.log('editor context', editorContext);
console.log('activateEditor');
reactDom.render(
<AutoNode AllTag={this.allTag} context={context} />,
editorContext
);
}
deactivateEditor(editorContext, context) {
console.log('deactivateEditor');
super.deactivateEditor.call(this, editorContext, context);
return;
}
setEditorValue(editorContext, value, context) {
return;
}
getEditorValue(editorContext, context) {
// context.sheet.endEdit(false)
console.log('aaa', editorContext);
return 111;
}
updateEditor(editorContext, cellStyle, cellRect, context) {
cellRect.y += 47;
cellRect.x -= 2;
cellRect.height = 0;
if (editorContext) {
editorContext.style.width = `${cellRect.width}px`;
editorContext.style.height = '100px'; // `${cellRect.height}px`;
}
return cellRect;
}
isReservedKey(event, context) {
if (context.isEditing && (event.keyCode === 40 || event.keyCode === 38)) {
return true;
}
return false;
}
} - const AutoNode = ({ AllTag, context }) => {
- const [tagList, setTagList] = useState(AllTag);
- const [value, setValue] = useState('');
- const [options, setOptions] = useState([]);
- // const handleAutoCompleteChange = (st) => {
- // const newTagList = AllTag.filter((t) => t.indexOf(st) > -1);
- // setTagList([...newTagList]);
- // setValue(st);
- // };
- const onSearch = (searchText) => {
- setOptions(
- !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
- );
- };
- const onSelect = (s) => {
- console.log('onSelect---', value);
- // setValue(s);
- console.log('ttttttt', value);
- };
- const onChange = (data) => {
- // 无法触发
- setValue(data);
- };
- const onBlur = () => {
- console.log('onBlur---', value);
- console.log('context', context);
- context.sheet.startEdit(true);
- };
- return (
- <AutoComplete
- value={value}
- style={{ height: 100, width: '100%' }}
- options= {options}
- onSearch={(searchText) => onSearch(searchText)}
- onSelect={(selectText) => onSelect(selectText)}
- onChange={(changeText) => onChange (changeText)}
- onBlur={onBlur}
- placeholder="input here"
- />
-
- );
- };
复制代码- sheet
- .getRange(-1, 4, -1, 1)
- .cellType(new AutocompleteCellType(taxReconTagList));
复制代码
|