[]
表单类单元格一般包含各类输入框,如文本框、选择框、文件上传框等,最主要的目的是通过鼠标键盘交互输入特定类型的值。
这类单元格的最重要功能是与单元格的值双向绑定。
示例代码:
修改 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 方法来实现,流程如下图:
当用户通过单元格类型的用户界面键盘输入或鼠标选择后,希望修改单元格的值,以便触发页面公式值重算、数据绑定值更新等。
当单元格的值被修改时(通过命令、公式或数据绑定等),单元格类型需要根据新值重新渲染。