[]
        
(Showing Draft Content)

支持单元格值

表单类单元格一般包含各类输入框,如文本框、选择框、文件上传框等,最主要的目的是通过鼠标键盘交互输入特定类型的值。

这类单元格的最重要功能是与单元格的值双向绑定。

示例代码:

修改 MyPluginCellType.js 文件实现一个简单的输入框。

class MyPluginCellType extends Forguncy.Plugin.CellTypeBase {
    createContent() {
        this.input = $("<input style='width:100%;height:100%'>");
        this.input.change(() => {
            this.commitValue();
        })
        return this.input;
    }
    setValueToElement(_, value) {
        this.input.val(value?.toString());
    }
    getValueFromElement() {
        return this.input.val();
    }
}
Forguncy.Plugin.CellTypeHelper.registerCellType("MyPlugin.MyPluginCellType, MyPlugin", MyPluginCellType);

这个双向绑定主要依赖 setValueToElement, getValueFromElement, commit 方法来实现,流程如下图:

  1. 当用户通过单元格类型的用户界面键盘输入或鼠标选择后,希望修改单元格的值,以便触发页面公式值重算、数据绑定值更新等。


  2. 当单元格的值被修改时(通过命令、公式或数据绑定等),单元格类型需要根据新值重新渲染。