共计 3006 个字符,预计需要花费 8 分钟才能阅读完成。
x-sheet 开发教程:外围 API 的应用
x-sheet 开发教程:如何二次开发
介绍
x-sheet 是一款高性能 Web JavaScript Canvas 电子表格,之前小编写过一篇 x-sheet 入门体验,简略介绍了一下如何应用 x-sheet。这次咱们持续深刻一下,理解下 x-sheet 还反对哪些配置,通过批改配置能够自定义咱们的表格布局和个性。
最新原文 X-Sheet 开发教程:初始化配置自定义布局
配置
小编在应用 x-sheet 过程中,总结出了一份绝对比拟全的配置清单,能够参考下。
const settings = { | |
// 工作簿配置 | |
workConfig: { | |
// 创立工夫 | |
created: "", | |
// 批改工夫 | |
modified: "", | |
// 作者信息 | |
creator: "", | |
// 最初批改作者 | |
lastModifiedBy: "", | |
// 工作簿名称 | |
name: "x-sheet", | |
// 顶部配置 | |
top: { | |
// 顶部选项栏配置 | |
option: { | |
// 是否显示选项栏 | |
show: true, | |
}, | |
// 顶部菜单栏配置 | |
menu: { | |
// 是否显示菜单栏 | |
show: true, | |
}, | |
}, | |
// 主体配置 | |
body: { | |
// 工作表菜单配置 | |
sheetConfig: { | |
// 是否显示右击菜单 | |
showMenu: true, | |
}, | |
// 工作表主体配置 | |
sheets: [ | |
{ | |
// 工作表名称 | |
name: "sheet1", | |
// 表格配置 | |
tableConfig: { | |
// 题目行列配置 | |
index: { | |
// 题目行高度 | |
height: 30, | |
// 题目列宽度 | |
width: 50, | |
// 题目行列边框色彩 | |
gridColor: "rgb(193,193,193)", | |
// 题目行列字体大小 | |
size: 12, | |
// 题目行列字体色彩 | |
color: "rgb(0,0,0)", | |
}, | |
// 表格整体配置 | |
table: { | |
// 是否显示网格线 | |
showGrid: true, | |
// 表格区域背景色彩 | |
background: "rgb(255,255,255)", | |
// 网格线色彩 | |
gridColor: "rgb(225,225,225)", | |
}, | |
// 行配置 | |
rows: { | |
// 自定义最大行数 | |
len: 100, | |
// 默认行高 | |
height: 30, | |
// 行配置数据 | |
data: [ | |
{ | |
// 自定义行高,未设置的会取默认行高 | |
height: 100 | |
}, | |
], | |
}, | |
// 列配置 | |
cols: { | |
// 自定义最大列数 | |
len: 25, | |
// 默认列宽 | |
width: 110, | |
// 行配置数据 | |
data: [{ | |
// 自定义列宽,未设置的会取默认列宽 | |
width: 200 | |
}], | |
}, | |
// 解冻范畴 | |
xFixedView: { | |
// 解冻列索引,- 1 为不解冻 | |
fxLeft: -1, | |
// 解冻行索引,- 1 为不解冻 | |
fxTop: -1, | |
}, | |
// 解冻分割线款式 | |
xFixedBar: { | |
// 解冻行分割线高度 | |
height: 16, | |
// 解冻列分割线宽度 | |
width: 26, | |
// 解冻分割线背景色 | |
background: "rgb(234,234,234)", | |
// 解冻分割线按钮背景色 | |
buttonColor: "rgb(193,193,193)", | |
}, | |
// 表格数据,二维数组 | |
data: [ | |
[ | |
// A1 单元格数据 | |
{ | |
// 单元格类型 | |
contentType: 2, | |
// 字体属性 | |
fontAttr: { | |
// 换行 | |
textWrap: 2, | |
// 方向 | |
direction: "vertical", | |
}, | |
// 富文本配置 | |
richText: { | |
// 富文本具体字段信息 | |
rich: [ | |
// 第一个段富文本 | |
{ | |
// 字体 | |
name: "Arial", | |
// 字体大小 | |
size: 14, | |
// 文本内容 | |
text: "我是", | |
// 字体色彩 | |
color: "rgb(255,0,2)", | |
// 是否加粗 | |
bold: false, | |
// 是否斜体 | |
italic: false, | |
// 是否有删除线 | |
strikethrough: false, | |
// 是否有下划线 | |
underline: false, | |
}, | |
{ | |
// 第二段富文本蕴含的字符 | |
// 如果没有配置款式,就取单元格的款式,单元格也没有设置款式,就取默认的款式 | |
text: "富文本", | |
}, | |
], | |
}, | |
}, | |
{ | |
// 背景色彩 | |
background: "rgb(255,255,0)", | |
// 单元格图标 | |
icons: [], | |
// 自定义属性 | |
custom: {}, | |
// 字体测量尺子 | |
ruler: undefined, | |
// 格式化类型 | |
format: "default", | |
// 单元格公式 | |
formula: undefined, | |
// 文本内容 | |
text: "Text", | |
// 格式化后的内容 | |
formatText: "Text", | |
// 内容的宽度 | |
contentWidth: 100, | |
// 内容的高度 | |
contentHeight: 100, | |
// 字体属性 | |
fontAttr: { | |
// 字体 | |
name: "Arial", | |
// 字体大小 | |
size: 14, | |
// 字体色彩 | |
color: "rgb(0,0,0)", | |
// 是否加粗 | |
bold: false, | |
// 是否斜体 | |
italic: false, | |
// 是否有删除线 | |
strikethrough: false, | |
// 是否有下划线 | |
underline: false, | |
// 内边距 | |
padding: 5, | |
// 文本角度 | |
angle: 0, | |
// 文本方向 | |
direction: "horizontal", // 'horizontal' 'vertical' 'angle' 'bar' | |
// 程度对齐形式 | |
align: "left", // 'left' 'center' 'right' | |
// 垂直对齐形式 | |
verticalAlign: "middle", // 'top' 'middle' 'bottom' | |
// 主动换行 | |
textWrap: 1, // 1 溢出 2 换行 3 截断 | |
}, | |
// 边框属性 | |
borderAttr: { | |
// 左边框 | |
left: { | |
// 层级 | |
zIndex: 0, | |
// 是否显示 | |
display: true, | |
// 宽度类型 | |
widthType: "low", // 'low' 'medium' 'high' | |
// 色彩 | |
color: "rgb(0,0,0)", | |
// 线条类型 | |
type: 0, // 0 solid 1 dotted 2 point 3 double | |
}, | |
// 左边框 | |
right: { | |
zIndex: 0, | |
display: true, | |
widthType: "medium", | |
color: "rgb(0,255,0)", | |
type: 0, | |
}, | |
// 上边框 | |
top: { | |
zIndex: 0, | |
display: false, | |
widthType: "high", | |
color: "rgb(0,0,255)", | |
type: 0, | |
}, | |
// 下边框 | |
bottom: { | |
zIndex: 0, | |
display: true, | |
widthType: "high", | |
color: "rgb(0,255,255)", | |
type: 3, | |
}, | |
}, | |
}, | |
], | |
], | |
// 爱护配置 | |
protection: {protections: [], | |
}, | |
// 是否爱护 | |
sheetProtection: true, | |
// 合并单元格 | |
merge: {merges: ["A2:B3", "D5:H9"] }, | |
}, | |
}, | |
], | |
// 工作表选项卡配置 | |
tabConfig: { | |
// 是否显示选项卡右击菜单 | |
showMenu: true, | |
}, | |
}, | |
// 底部状态栏配置 | |
bottom: { | |
// 是否显示状态栏 | |
show: true, | |
}, | |
}, | |
}; | |
// 初始化 x -sheet | |
new XSheet("#demo1", settings); |
总结
x-sheet 目前还在开发中,局部 API 还不稳固,后续有变动小编会及时更新。
参考
- X-Sheet 开发教程:初始化配置自定义布局
- 高性能 web javaScript 电子表格
- 收费开源的高性能 JavaScript 电子表格:X-Sheet 入门体验
正文完