SpreadJS控件

# 变更记录 | 产品版本 | 更新内容 | 更新日期 | | --- | --- | --- | | V5.0.024 | 新增了Spread 表格参数设置后点击确定可保存表格参数的功能，满足了用户需要记住表格参数设置的需求 | 2023-07-14 | | V5.0.025 | Spread表格支持了设定选中区域指令的位置参数，满足了用户希望将选定区域放置在指定的可视范围的需求 | 2023-07-27 | | V6.0.15 | 完善了Spread多表联动的功能，支持多表同步滚动条、行高、列宽、缩放，提高用户设置报表模板的易用性 | 2024-07-08 | | V7.0.1 | getSpreadJson与setSpreadJson现在支持对单个工作表（sheet）进行操作 | 2024-10-24 | # 1 功能介绍 SpreadJS 是一款基于 HTML5 的纯前端表格控件，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性。SpreadJS 在界面和功能上与 Excel 高度类似，但又不局限于 Excel，而是为企业信息化建设提供表格文档协同编辑、数据填报和类Excel报表设计的功能支持 # 2 控件对象 `kd.bos.form.spread` # 3 视觉展示  # 4 属性说明 ## 4.1 通用属性 >通用属性包含字段和控件的一些公有的属性，如宽高，帮助文本等等。请参考[通用属性](https://vip.kingdee.com/article/215559076720798976) ## 4.2 样式属性 >样式属性是每个控件在设计器右侧样式栏可以设置的属性，请参考[样式属性](https://vip.kingdee.com/article/252017936767406336) ## 4.3 业务属性 | 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | 显示编辑工具栏 | 复选框 | true | 是否显示工具栏 | | 允许多页签 | 复选框 | false | 单页签模式 , 多页签模式 | | 支持导出excel | 复选框 | false | 生成两个Spread实例 | # 5 功能详情 ## 5.1 工具栏 ### 5.1.1工具栏功能介绍 参见：[Spread工具栏新特性](https://vip.kingdee.com/article/390596666833372416) ### 5.1.2表格设置 设置表格配置参数后（功能入口：表格工具栏的配置按钮），点击确定，可将参数保存到单前表格，该参数只对当前表格生效。再次打开该表格或其他用户使用该表格，该参数依旧生效。  # 6 SpreadJS接口介绍 | 接口名称 | 参数 | 说明 | 支持版本 | | --- | --- | --- | --- | | callbackAction | {callback:, invokemethod:} | 回调函数指令，后端告诉前端它还有后续动作 | > v5.0.11 | | setSpreadJson | spreadJS压缩过后的json串 | 加载spreadJS的json串，支持设置sheet的json，前端自动识别 | > v5.0.11 | | appendRows | {count:, si:} | 在指定工作表尾部追加count行/列
count: 行/列数（必填）
si: 指定工作表的索引，默认是当前工作表（可选） | > v5.0.11 | | appendCols | | | > v5.0.11 | | deleteRow | {data:[1, 2], si:0} | | > v5.0.11 | | deleteCol | | | > v5.0.11 | | insertRow | {data:[1, 2], dir: ‘bottom’(列不支持这个dir), copyStyle: false, si:} | | > v5.0.11 | | insertCol | | | > v5.0.11 | | setColumnsWidth | {index:[], num:, si,area} | 设置列宽/行高
index: 指定行（列）的索引（必填）
num: 宽度或高度（以像素为单位，必填）
si: 指定工作表的索引，默认是当前工作表（可选）
area: 指定区域 (可选) area的值有三种 colHeader(列头) rowHeader(行头) viewport(单元格区域) 默认是单元格区域 | > v5.0.11 | | setRowsHeight | | | > v5.0.11 | | getColumnsWidth | {index:[2,3], callback: ‘invokeAction’, invokemethod: ‘invokemethod’, si:} | 获取列宽/行高
index: 指定行（列）的索引（必填）
callback: 回调的请求方法名（必填）
invokemethod: invokemethod（必填）
si: 指定工作表的索引，默认是当前工作表（可选） | > v5.0.11 | | getRowsHeight | | | > v5.0.11 | | setRowsVisible | {rows: [1, 3], value: false, si:} | 设置行可见性
rows: 行的索引，是一个数组（必填）
value: 可见性 true | > v5.0.11 | | setColumnsVisible | {cols: [2, 4], value: true, si:} | 设置列可见性
cols: 列的索引，是一个数组（必填）
value: 可见性 true | > v5.0.11 | | lockCell | [{r:,c:,rc:,cc:}] | | > v5.0.11 | | unlockCell | | | > v5.0.11 | | lockSheet | {si: [] } | 锁定/解锁工作表
si: 指定工作表的索引，默认是当前工作表（可选） | > v5.0.11 | | unlockSheet | | | > v5.0.11 | | updataValue | {si:, area:’’, cells: [{r:, c:, v:}]} | | > v5.0.11 | | setSpan | {range:[{r:, c:, rc:, cc:}], si:} | 合并指定区域的单元格
range: 指定表格区域（必填）
si: 指定工作表的索引，默认是当前工作表（可选） | > v5.0.11 | | setCellStyle | {data:[{range: [{r:2, c:2, rc:2, cc:2}], style:{bl:{bls:[‘dashDot’], blc:[’#00f’]} } }] ,si:} //设置单元格边框样式
{data:[{range: [{r:2, c:2, rc:2, cc:2}], style:{bkc:’#666’, frc:’#000’} }],si:} //设置单元格的前景色和背景色 | 设置单元格样式/格式
range: 指定表格区域（必填）
style: 设置样式信息（必填）
si: 指定工作表的索引，默认是当前工作表（可选）
1. 设置单元格边框中的bls表示边框线的样式，可以设置成：dashDot,dashDotDot,dashed,dotted,double,empty,hair,medium,mediumDashDot,mediumDashDotDot,mediumDashed,slantedDashDot,thick,thin。blc表示边框线的颜色。
2. 设置行头区域,列的索引设置为0;设置列头区域,行的索引设置成0;rc和cc一般设置成1; | > v5.0.11 | | fieldInsertRow | {range:{r:,c:,rc:,cc:,},index: ,count: ,styleIndex:, si: } | 在指定的工作表区域新增行/列，并复制指定行/列的样式
range: 指定表格区域（必填）
index: 指定插入的索引（必填）
count: 插入的行/列数（必填）
styleIndex：复制指定行/列样式的索引（必填）
si: 指定工作表的索引，默认是当前工作表（可选） | > v5.0.11 | | fieldInsertCol | | | > v5.0.11 | | fieldDeleteRow | {range:{r:,c:,rc:,cc:},index:,count:,si:} | 删除指定的工作表区域的行/列
range: 指定表格区域（必填）
index: 指定插入的索引（必填）
count: 插入的行/列数（必填）
si: 指定工作表的索引，默认是当前工作表（可选） | > v5.0.11 | | fieldDeleteCol | | | > v5.0.11 | | setFListCell | {cell:[{r:1,c:1}], selectType:0, dst:1,lockClickable：true}
或
{range: [{r:, c:, rc:, cc}], selectType:0, dst:1,lockClickable:true} | 设置f7类型单元格。
selectType: 0(支持模糊查询)，1(不支持模糊查询)
dst: 0(默认风格)，1(显示风格为下拉)
lockClickable：true(支持锁定状态下的点击) | > v5.0.11 | | setComboCell | [{cell:{r:,c:}, option:[“a”,“b”,“c”]}] | 设置下拉列表类型单元格
cell: 指定单元格（必填）
option: 下拉项（必填） | > v5.0.11 | | setBtnCell | [{cell:{r:,c:},text:}] | 设置按钮类型单元格 | > v5.0.11 | | setCustomBtnCell | 设置自定义按钮类型单元格 | | > v5.0.11 | | setCellTag | [{r:, c:, st:true/false, pos:[0,2]}] | 给单元格设置特殊标识（小红点）
r: 指定行（必填）
c: 指定列（必填）
st：控制是否显示小红点（必填）
pos: 指定小红点的位置，0-3分别代表左上、右上、右下、左下（必填） | > v5.0.11 | | resetCell | {range:[{r:, c:, rc:, cc:}], si:} | 重置指定工作表区域的单元格类型
range: 指定工作表区域（必填）
si: 指定工作表的索引，默认是当前工作表（可选） | > v5.0.11 | | getSpreadJson | {callback:, invokemethod:} | 获得表格bsae64格式文件，回传请求指令和后台触发事件
callback: 回调的请求方法名（必填）
invokemethod: invokemethod（必填）
sheetName: '' （选填）获取某个sheet的json数据 | > v5.0.11 | | setLookupData | {r:,c:,data:} | 获取f7单元格类型的lookup数据 | > v5.0.11 | | setCustomFormulaCell | {cell:[{r:,c:}], si:} | 设置自定义的公式单元格 | > v5.0.11 | | setAllCustomFormulaCell | {si: } | 设置所有单元格都为自定义公式单元格 | > v5.0.11 | | registerCustomFormula | [{formulaName: ,argsNum:,returnType:,descriptionInfo:{description:,parameters:[{name:}]} }] | 注册自定义公式 | > v5.0.11 | | setFormula | [{r:,c:,f:}] | | > v5.0.11 | | setSelections | {r:0, c:0, rc:1, cc:1, si:0, position: { row: nearest, col: nearest }} | 设置指定工作表区域单元格选中(会跳转到指定页签的指定单元格)
r: 行索引,
c: 列索引,
rc: 行选中范围单元格数量,
cc: 列选中范围单元格数量,
si: 工作表索引,
position: 显示的区域相对浏览器的位置（center：中心，left：左边，nearest：最近的边缘，right： 右侧） | > v5.0.11 | | exportExcelFile | {fileName:} | excel文件
fileName: 文件名（必填） | > v5