请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

给你点颜色66s

注册会员

2

主题

5

帖子

19

积分

注册会员

积分
19
  • 83

    金币

  • 2

    主题

  • 5

    帖子

最新发帖
给你点颜色66s
注册会员   /  发表于:2025-1-15 10:41  /   查看:86  /  回复:4
1金币



export class DatePickerCellType extends GC.Spread.Sheets.CellTypes.Base {
  constructor(spreadRef: any) {
    super();
    this.spreadRef = spreadRef;
  }
  private _text: any = "";
  private spreadRef: any;
  private isDoubleclick: boolean = false;

  public typeName: string = "DatePickerCellType";
  public createEditorElement(_context: any): HTMLElement {
    let editorContext = document.createElement("div");
    editorContext.setAttribute("gcUIElement", "gcEditingInput");
    editorContext.style.height = "100%";
    let editor = document.createElement("div");
    editorContext.appendChild(editor);
    return editorContext;
  }

  public activateEditor(
    editorContext: HTMLElement,
    _cellStyle: any,
    cellRect: any,
    context?: any
  ): void {
    if (editorContext) {
      const { row, col, sheet } = context;
      const cell = sheet.getCell(row, col);
      const value = cell.value();

      let cellType = this;

      let width = cellRect.width > 180 ? cellRect.width : 180;
      const pickerCom = defineComponent({
        data() {
          return { text: value };
        },
        mounted() {
          nextTick(() => {
            this.setFocus();
          });
        },
        methods: {
          setFocus() {
            (this as any).datePicker.value.focus();
          },
        },
        render() {
          (this as any).datePicker = ref<any>(null);
          const vnode = h(HDatePicker, {
            modelValue: this.text,
            "onUpdate:modelValue": (val: any) => {
              val = val.replace(/\//g, "");
              this.text = val;
              cellType._text = val;
            },
            onErrBlur: (val: any) => {
              if (cellType.spreadRef) {
                cellType.spreadRef.focus(false);
              }
              setTimeout(() => {
                cellType.spreadRef.focus(false);
              }, 20);

              MessageUtil.showErrorMessage("E0008", "日付").then(() => {
                cellType.spreadRef.focus();
                sheet.setSelection(row, col, 1, 1);
                sheet.startEdit(row, col);
                //TODO  select control type  選択された状態
              });
              //    console.log(sheet,"sheet","focus");
            },
            teleported: false,
            isDoubleclick: cellType.isDoubleclick,
            style: { width: width + "px" },
            ref: (this as any).datePicker,
            // locale: ja
          });
          return vnode;
        },
        expose: ["text", "setFocus"],
      });

      const vNode = h(pickerCom);
      //   editorContext.value = this._text;
      //   console.log(editorContext.value,"editorContext activateEditor");
      render(vNode, editorContext.firstChild as HTMLElement);
    }
  }

  public updateEditor(
    editorContext: HTMLElement,
    _cellStyle: any,
    cellRect: any,
    _context?: any
  ): any {
    const rect = new GC.Spread.Sheets.Rect(
      cellRect.x,
      cellRect.y,
      cellRect.width,
      cellRect.height
    );
    (editorContext as any).parentElement.parentElement.style.overflow =
      "visible";
    (editorContext as any).parentElement.style.left = 0;
    (editorContext as any).parentElement.style.width = " 100%";
    (editorContext as any).parentElement.style.height = " 100%";
    (editorContext as any).children[0].style.height = " 100%";

    return rect;
  }

  public getEditorValue(_editorContext: HTMLElement, _context?: any): any {
    return this._text;
  }

  public setEditorValue(
    _editorContext: HTMLElement,
    value: any,
    _context?: any
  ): void {
    this._text = value;
  }

  // public processMouseUp (hitInfo: any) {
  //   console.log(hitInfo, "hitInfo");

  //   return false;
  // }

  public deactivateEditor(editorContext: HTMLElement, _context?: any): void {
    const { row, col, sheet } = _context;
    sheet.setValue(row, col, this._text);
    render(null, editorContext.firstChild as HTMLElement);
  }

  public isEditingValueChanged(
    oldValue: any,
    newValue: any,
    _context?: any
  ): boolean {
    return oldValue !== newValue;
  }

  public paint(
    ctx: CanvasRenderingContext2D,
    value: any,
    x: number,
    y: number,
    w: number,
    h: number,
    style: GC.Spread.Sheets.Style,
    context?: any
  ) {
    let text = value; //  this._text; //

    if (typeof text == "number") {
      text = text.toString();
    }

    if (text && text.length === 8) {
      text = formatDate(text);
    }

    style.hAlign = 1;

    // console.log(value, text);
    new GC.Spread.Sheets.CellTypes.Text().paint(
      ctx,
      text,
      x,
      y,
      w,
      h,
      style,
      context
    );
    // ctx.restore();
  }
}


最佳答案

查看完整内容

您好,双击和回车键都可以实现开始编辑,如果遇到问题,还可以使用单元格双击事件/canvas回车按键的监听,配合startEdit接口来实现开始编辑的效果。 processMouseUp事件需要配合getHitInfo一起使用,您可以尝试在类DatePickerCellType中添加这个方法:

4 个回复

倒序浏览
最佳答案
最佳答案
Matthew.Xue
超级版主   /  发表于:2025-1-15 10:41:33
来自 3#
您好,双击和回车键都可以实现开始编辑,如果遇到问题,还可以使用单元格双击事件/canvas回车按键的监听,配合startEdit接口来实现开始编辑的效果。
processMouseUp事件需要配合getHitInfo一起使用,您可以尝试在类DatePickerCellType中添加这个方法:
  1.   getHitInfo(x, y, cellStyle, cellRect, context) {
  2.         let info = {
  3.             x: x,
  4.             y: y,
  5.             row: context.row,
  6.             col: context.col,
  7.             cellRect: cellRect,
  8.             sheetArea: context.sheetArea,
  9.             isReservedLocation: false,
  10.             reservedLocation: -1
  11.         };
  12.         return info
  13.     }
复制代码
回复 使用道具 举报
给你点颜色66s
注册会员   /  发表于:2025-1-15 10:44:10
2#
processMouseUp  这个方法不触发,不清楚为什么
回复 使用道具 举报
给你点颜色66s
注册会员   /  发表于:2025-1-15 16:10:39
4#
OK可以触发了,感谢
回复 使用道具 举报
Matthew.Xue
超级版主   /  发表于:2025-1-15 17:08:08
5#
感谢您的支持~
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部