SpreadJS在线表格编辑器自定义功能 -- 自定制图片属性侧边栏（SidePanel）

本文主要讲述怎样在组件版设计器 (Component Designer) 中自定制图片的边栏, 如图:



SpreadJS V14 新推出的组件版设计器, 解决了框架兼容, 加载性能等一系列问题. 针对自定义特性的定制, 它采用了目前流行的"声明式" 开发模型, 支持利用JSON的方式定义功能UI的template, 并且能够声明相关的交互事件(命令式command声明), 以下代码以设置背景色为例说明:

1. {
   
2.     "type": "ColumnSet",
   
3.     "margin": "5px 0px",
   
4.     "children": [
   
5.         {
   
6.             "type": "Column",
   
7.             "children": [
   
8.                 {
   
9.                     "type": "Radio",
   
10.                     "bindingPath": "pictureFill",
    
11.                     "items": [
    
12.                         {
    
13.                             "text": "无填充",
    
14.                             "value": 0
    
15.                         },
    
16.                         {
    
17.                             "text": "纯色填充",
    
18.                             "value": 1
    
19.                         }
    
20.                     ]
    
21.                 }
    
22.             ]
    
23.         }
    
24.     ]
    
25. },

复制代码

在这段JSON声明中, type是布局声明, 这里是列组ColumnSet的方式, 列组中可以包含多列元素, 在children中声明.
需要说明的是pictureFill, 这是一个数据声明的key, 在下边的命令中可以获取到元素的状态.

1. var sidePanelsPictureCommands = {pictureOptionPanel: {
   
2.     commandName: "pictureOptionPanel",
   
3.     enableContext: "AllowEditObject",
   
4.     visibleContext: "pictureSelected && !pictureAltTextPanel_Visible",
   
5.     execute: function(context, propertyName, newValue){
   
6.         if(!propertyName){
   
7.             return;
   
8.         }
   
9.         let sheet = context.Spread.getActiveSheet();
   
10.         let activePicture = getSelectedPicture(sheet);
    
11.         switch(propertyName){
    
12.             case "pictureFill":
    
13.                 if(newValue === 0){
    
14.                     activePicture.backColor(null)
    
15.                 }
    
16.                 else{
    
17.                     activePicture.backColor("white")
    
18.                 }
    
19.                 break;
    
20.             case "pictureLine":
    
21.                 if(newValue === 0){
    
22.                     activePicture.borderStyle("none")
    
23.                 }
    
24.                 else{
    
25.                     activePicture.borderStyle("double")
    
26.                 }
    
27.                 break;
    
28.             default:
    
29.                 Reflect.apply(activePicture[propertyName], activePicture, [newValue])
    
30.                 break;
    
31.         }
    
32.     },
    
33.     getState: function(context){
    
34.         let sheet = context.Spread.getActiveSheet();
    
35.         let activePicture = getSelectedPicture(sheet);
    
36.         const pictureStatus = {
    
37.             pictureFill: 0,
    
38.             backColor: "",
    
39.             pictureLine: 0,
    
40.             borderWidth: 0,
    
41.             borderColor: ""
    
42.         };
    
43.         if (activePicture) {
    
44. 
    
45.             for(let key in pictureStatus) {
    
46.                 switch(key){
    
47.                     case "backColor":
    
48.                         let backColor = activePicture.backColor();
    
49.                         if(backColor){
    
50.                             pictureStatus.backColor = backColor;
    
51.                             pictureStatus.pictureFill = 1;
    
52.                         }else {
    
53.                             pictureStatus.backColor = "#000000";
    
54.                             pictureStatus.pictureFill = 0;
    
55.                         }
    
56.                         break;
    
57.                     case "borderWidth":
    
58.                         pictureStatus.borderWidth = activePicture.borderWidth();
    
59.                         break;
    
60.                     case "borderColor":
    
61.                         pictureStatus.borderColor = activePicture.borderColor();
    
62.                         break;
    
63.                 }
    
64.             }
    
65. 
    
66.             let borderStyle = activePicture.borderStyle();
    
67.             if(borderStyle && borderStyle !== "none"){
    
68.                 pictureStatus.pictureLine = 1
    
69.             }else {
    
70.                 pictureStatus.pictureLine = 0
    
71.             }
    
72.         }
    
73.         return pictureStatus;
    
74.     },
    
75. }
    
76. }

复制代码

这段代码声明了元素对应的行为命令, 可以看到命令的主体有两个关键函数: execute 和 getState,
getState可以用来获取UI元素的状态, 这里与bindingPath相关
execute用来执行修改, 本例中可以用来修改picture的状态.

完整示例请参考附件

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
好的  谢谢

不用客气，有新问题建议在求助中心发一个新帖，这样也方便后续的跟踪和处理。