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 入门体验