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