找回密码
 立即注册

QQ登录

只需一步,快速开始

小鱼

注册会员

4

主题

11

帖子

33

积分

注册会员

积分
33
小鱼
注册会员   /  发表于:2021-10-11 16:42  /   查看:2170  /  回复:1
1金币
  1. let taxReconTagList = [
  2.   'ActionScript',
  3.   'AppleScript',
  4.   'Asp',
  5.   'BASIC',
  6.   'C',
  7.   'C++',
  8.   'Clojure',
  9.   'COBOL',
  10.   'ColdFusion',
  11.   'Erlang',
  12.   'Fortran',
  13.   'Groovy',
  14.   'Haskell',
  15.   'Java',
  16.   'JavaScript',
  17.   'Lisp',
  18.   'Perl',
  19.   'PHP',
  20.   'Python',
  21.   'Ruby',
  22.   'Scala',
  23.   'Scheme'
  24. ];
复制代码

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;
  }
}
  1. const AutoNode = ({ AllTag, context }) => {
  2.   const [tagList, setTagList] = useState(AllTag);
  3.   const [value, setValue] = useState('');
  4.   const [options, setOptions] = useState([]);
  5.   // const handleAutoCompleteChange = (st) => {
  6.   //   const newTagList = AllTag.filter((t) => t.indexOf(st) > -1);
  7.   //   setTagList([...newTagList]);
  8.   //   setValue(st);
  9.   // };
  10.   const onSearch = (searchText) => {
  11.     setOptions(
  12.       !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
  13.     );
  14.   };
  15.   const onSelect = (s) => {
  16.     console.log('onSelect---', value);
  17.     // setValue(s);
  18.     console.log('ttttttt', value);
  19.   };
  20.   const onChange  = (data) => {
  21.     // 无法触发
  22.     setValue(data);
  23.   };
  24.   const onBlur = () => {
  25.     console.log('onBlur---', value);
  26.     console.log('context', context);
  27.     context.sheet.startEdit(true);
  28.   };

  29.   return (
  30.     <AutoComplete
  31.       value={value}
  32.       style={{ height: 100, width: '100%' }}
  33.       options= {options}
  34.       onSearch={(searchText) => onSearch(searchText)}
  35.       onSelect={(selectText) => onSelect(selectText)}
  36.       onChange={(changeText) => onChange (changeText)}
  37.       onBlur={onBlur}
  38.       placeholder="input here"
  39.     />
  40.    
  41.   );
  42. };
复制代码
  1. sheet
  2.       .getRange(-1, 4, -1, 1)
  3.       .cellType(new AutocompleteCellType(taxReconTagList));
复制代码


最佳答案

查看完整内容

出现这个问题有可能是框架的生命周期与我们SpreadJS的声明周期冲突,建议你提供一个完整可运行的demo,这边调研一下。

1 个回复

倒序浏览
最佳答案
最佳答案
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-10-11 16:42:18
来自 2#
出现这个问题有可能是框架的生命周期与我们SpreadJS的声明周期冲突,建议你提供一个完整可运行的demo,这边调研一下。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部