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