SpreadJS在线表格编辑器自定义功能 -- 自定制图片属性侧边栏（SidePanel）
本帖最后由 Derrick.Jiao 于 2022-8-12 11:28 编辑本文主要讲述怎样在组件版设计器 (Component Designer) 中自定制图片的边栏, 如图:
SpreadJS V14 新推出的组件版设计器, 解决了框架兼容, 加载性能等一系列问题. 针对自定义特性的定制, 它采用了目前流行的"声明式" 开发模型, 支持利用JSON的方式定义功能UI的template, 并且能够声明相关的交互事件(命令式command声明), 以下代码以设置背景色为例说明:
{
"type": "ColumnSet",
"margin": "5px 0px",
"children": [
{
"type": "Column",
"children": [
{
"type": "Radio",
"bindingPath": "pictureFill",
"items": [
{
"text": "无填充",
"value": 0
},
{
"text": "纯色填充",
"value": 1
}
]
}
]
}
]
},在这段JSON声明中, type是布局声明, 这里是列组ColumnSet的方式, 列组中可以包含多列元素, 在children中声明.
需要说明的是pictureFill, 这是一个数据声明的key, 在下边的命令中可以获取到元素的状态.
var sidePanelsPictureCommands = {pictureOptionPanel: {
commandName: "pictureOptionPanel",
enableContext: "AllowEditObject",
visibleContext: "pictureSelected && !pictureAltTextPanel_Visible",
execute: function(context, propertyName, newValue){
if(!propertyName){
return;
}
let sheet = context.Spread.getActiveSheet();
let activePicture = getSelectedPicture(sheet);
switch(propertyName){
case "pictureFill":
if(newValue === 0){
activePicture.backColor(null)
}
else{
activePicture.backColor("white")
}
break;
case "pictureLine":
if(newValue === 0){
activePicture.borderStyle("none")
}
else{
activePicture.borderStyle("double")
}
break;
default:
Reflect.apply(activePicture, activePicture, )
break;
}
},
getState: function(context){
let sheet = context.Spread.getActiveSheet();
let activePicture = getSelectedPicture(sheet);
const pictureStatus = {
pictureFill: 0,
backColor: "",
pictureLine: 0,
borderWidth: 0,
borderColor: ""
};
if (activePicture) {
for(let key in pictureStatus) {
switch(key){
case "backColor":
let backColor = activePicture.backColor();
if(backColor){
pictureStatus.backColor = backColor;
pictureStatus.pictureFill = 1;
}else {
pictureStatus.backColor = "#000000";
pictureStatus.pictureFill = 0;
}
break;
case "borderWidth":
pictureStatus.borderWidth = activePicture.borderWidth();
break;
case "borderColor":
pictureStatus.borderColor = activePicture.borderColor();
break;
}
}
let borderStyle = activePicture.borderStyle();
if(borderStyle && borderStyle !== "none"){
pictureStatus.pictureLine = 1
}else {
pictureStatus.pictureLine = 0
}
}
return pictureStatus;
},
}
}这段代码声明了元素对应的行为命令, 可以看到命令的主体有两个关键函数: execute 和 getState,
getState可以用来获取UI元素的状态, 这里与bindingPath相关
execute用来执行修改, 本例中可以用来修改picture的状态.
完整示例请参考附件 本帖最后由 紫缘 于 2022-2-21 16:04 编辑
KevinChen 发表于 2021-2-2 10:25
完整示例请参考附件
这里构造的时候 Type有哪些分别是什么
紫缘 发表于 2022-2-21 15:48
这里构造的时候 Type有哪些分别是什么
可以下载上面的demo的sidePanels.picture.js看一下，包含了一些常用的type。
如果是文本输入框就是，TextEdtor
Derrick.Jiao 发表于 2022-2-21 16:40
可以下载上面的demo的sidePanels.picture.js看一下，包含了一些常用的type。
TextEditor文本框能否禁止输入禁止输入的添加什么参数 紫缘 发表于 2022-2-21 16:44
TextEditor文本框能否禁止输入禁止输入的添加什么参数
目前暂不支持禁止输入 Derrick.Jiao 发表于 2022-2-21 16:57
目前暂不支持禁止输入
好的谢谢 紫缘 发表于 2022-2-22 08:59
好的谢谢
不用客气，有新问题建议在求助中心发一个新帖，这样也方便后续的跟踪和处理。
页:
[1]