x-sheet 开发系列教程：初始化配置
介绍
x-sheet 是一款高性能 Web JavaScript Canvas 电子表格，之前小编写过一篇 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 开发系列教程：初始化配置的更多相关文章
- C#微信公众号开发系列教程二（新手接入指南）
http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...
- 微信公众号开发系列教程一（调试环境部署续：vs远程调试）
http://www.cnblogs.com/zskbll/p/4080328.html 目录 C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试 ...
- HTML5游戏开发系列教程7(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-7/ 今天我们将完成我们第一个完整的游戏--打砖块.这次教程中,将 ...
- HTML5游戏开发系列教程5(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用can ...
- HTML5游戏开发系列教程4(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-4/ 这篇文章是我们继续使用canvas来进行HTML5游戏开发系 ...
- 微信程序开发系列教程（二）使用JavaScript给微信用户发送消息
我之前的文章 微信程序开发系列教程(一)开发环境搭建 介绍了微信开发环境的搭建,这篇文章我们就来一步步开发一些具体的功能. 功能需求:当有微信用户关注了您的公众号之后,您用JavaScript发送一个 ...
- Android 开发系列教程之（一）Android基础知识
什么是Android Android一词最早是出现在法国作家维里耶德利尔·亚当1986年发表的<未来夏娃>这部科幻小说中,作者利尔·亚当将外表像人类的机器起名为Android,这就是And ...
- SpringBoot 系列教程自动配置选择生效
191214-SpringBoot 系列教程自动配置选择生效 写了这么久的 Spring 系列博文,发现了一个问题,之前所有的文章都是围绕的让一个东西生效:那么有没有反其道而行之的呢? 我们知道可以通 ...
- C#微信公众号开发系列教程三（消息体签名及加解密）
http://www.cnblogs.com/zskbll/p/4139039.html C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C ...
- C#微信公众号开发系列教程六（被动回复与上传下载多媒体文件）
微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...
随机推荐
- [python]《Python编程快速上手:让繁琐工作自动化》学习笔记2
1. 读写文件笔记(第8章)(代码下载) 1.1 文件与文件路径 通过import os调用os模块操作目录,常用函数如下: 函数 用途 os.getcwd() 取得当前工作路径 os.chdir() ...
- [python] python-pinyin库
python-pinyin库是一个汉字拼音转换工具,其主要功能有: 根据词组智能匹配最正确的拼音. 支持多音字. 简单的繁体支持, 注音支持. 支持多种不同拼音风格. 安装命令为:pip instal ...
- dotnet 代码优化 聊聊逻辑圈复杂度
本文属于 dotnet 代码优化系列博客.相信大家都对圈复杂度这个概念很是熟悉,本文来和大家聊聊逻辑的圈复杂度.代码优化里面,一个关注的重点在于代码的逻辑复杂度.一段代码的逻辑复杂度越高,那么维护起来 ...
- P8881 懂事时理解原神
简要题意 \(T\) 组数据,每组数据给出一个 \(n\) 个顶点,\(m\) 条边的无向无权图.求出使用下面的伪代码求 \(1\) 为源点的单源最短路答案正确的概率.保留 \(3\) 位小数. in ...
- 这可能是Matplotlib和Seaborn最全的入门文档
matplotlib是python第一个数据可视化库,在数据分析,可视化领域的地位和贡献是无法磨灭的.但也正是因为有了这位老大哥的出现给后续基于matplotlib实现的绘图库实现了可能. 而对于绘图 ...
- 如何进行动态ip的域名解析设置？
如何进行动态ip的域名解析设置?目前,有一部分域名客户出于节省成本.技术验证等因素,会把自己家里或是部门的电脑用来当做Web服务器.mail服务器或是ftp服务器.如果想提供给其他人长期浏览,一般都要 ...
- C語言成績分析系統
C語言成績分析系統,可以實現七個功能.(使用的編譯器是 code::blocks) 主要實現對於學生信息的輸入 顯示輸入學生的信息 根據期末成績來進行排名. 查找某個學生的信息 刪除某個學生的信息 修 ...
- 模板层语法、模板层之标签、模板的继承与导入、模型层之ORM常见关键字
模板层语法.模板层之标签.模板的继承与导入.模型层之ORM常见关键字 一.模板层语法 1.模板语法的传值 urls代码: path('modal/', views.modal) views代码: de ...
- 手把手教大家写书写一个Mqtt网关
摘要:物联网是现在比较热门的软件领域,众多物联网厂商都有自己的物联网平台,而物联网平台其中一个核心的模块就是Mqtt网关. 本文分享自华为云社区<一文带你掌握物联网mqtt网关搭建背后的技术原理 ...
- （一）Abp入门
ABP 是用于创建现代Web应用程序的完整体系结构和强大的基础架构,遵循最佳实践和约定,为 您提供 SOLID 开发经验. 目前 ABP 的版本 ASP.NET Boilerplate ASP.N ...