写点什么

x-sheet 开发教程:初始化配置自定义布局

作者:OpenHacker
  • 2022 年 7 月 27 日
  • 本文字数:4765 字

    阅读完需:约 16 分钟

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 还不稳定,后续有变化小编会及时更新。

参考

用户头像

OpenHacker

关注

软件开发教程,编程入门,资源分享 2022.02.24 加入

lwebapp.com

评论

发布
暂无评论
x-sheet 开发教程:初始化配置自定义布局_Excel_OpenHacker_InfoQ写作社区