/seniortable

基于 Web 的 JavaScript Canvas 高性能电子表格引擎

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

Seniortable

基于 Web 的 JavaScript Canvas 电子表格，它拥有更好的运行和渲染性能，不依赖任何框架，只实现核心引擎，同时提供丰富便捷的 API 给予开发者快速操控引擎的能力。

本项目不提供工具栏界面，开发者需根据自己的场景结合 API 创造属于自己的电子表格应用。

特性

  • Canvas 高性能渲染
  • 丰富的公有 API
  • 灵活的插件扩展机制
  • 兼容 Excel 功能

安装

npm install seniortable
<div id="seniortable"></div>
import Seniortable from "seniortable";

const ST = new Seniortable(document.querySelector('#seniortable'));
ST.loadData({}); // 加载数据
ST.onChange(data => {
  // 检测到数据变化时可以保存到数据库
});
// 默认配置项
{
  showGrid: true,
  view: {
    height: () => document.documentElement.clientHeight,
    width: () => document.documentElement.clientWidth,
  },
  row: {
    len: 100,
    height: 25,
  },
  col: {
    len: 26,
    width: 100,
    indexWidth: 60,
    minWidth: 60,
  },
  style: {
    bgcolor: '#ffffff',
    align: 'left',
    valign: 'middle',
    textwrap: false,
    strike: false,
    underline: false,
    color: '#0a0a0a',
    font: {
      name: 'Helvetica',
      size: 10,
      bold: false,
      italic: false,
    },
  },
}

开发环境

git clone https://github.com/wanglong6/seniortable.git
cd seniortable
npm install
npm run dev

打开浏览器访问 http://127.0.0.1:8080

API 参考手册

公有方法

方法 说明
loadData(data)
@param json data - 数据
 载入全部数据
getData()
 获取全部数据
render()
 渲染重绘表格
getSelected()
 获取当前选择的单元格坐标数据
getRectByXY(x, y)
 根据坐标获取单元格位置
getText(ri, ci)
@param integer ri - 行索引
@param integer ci - 列索引
 获取单元格文本
setText(ri, ci, text)
@param integer ri - 行索引
@param integer ci - 列索引
@param string text - 文本
 设置单元格文本
getStyle(ri, ci)
@param integer ri - 行索引
@param integer ci - 列索引
 获取单元格样式
setStyle(sri, sci, eri, eci, property, value)
@param integer sri - 起始行索引
@param integer sci - 起始列索引
@param integer eri - 结束行索引
@param integer eci - 结束列索引
@param string property - 属性
@param string value - 值
 设置单元格样式，见`附录2`
insertRows(sri, n)
@param integer sri - 起始行
@param integer n - 插入行数
 从起始行向上插入行
insertColumns(sci, n)
@param integer sci - 起始列
@param integer n - 插入列数
 从起始列向左插入列
deleteRows(sri, eri)
@param integer sri - 起始行索引
@param integer eri - 结束行索引
 删除行
deleteColumns(sci, eci)
@param integer sci - 起始列索引
@param integer eci - 结束列索引
 删除列
merge(sri, sci, eri, eci)
@param integer sri - 起始行索引
@param integer sci - 起始列索引
@param integer eri - 结束行索引
@param integer eci - 结束列索引
 合并单元格
unmerge(sri, sci, eri, eci)
@param integer sri - 起始行索引
@param integer sci - 起始列索引
@param integer eri - 结束行索引
@param integer eci - 结束列索引
 拆分选中的单元格
formulaSelectedCell()
 选中的单元格计算公式
freeze(ri, ci)
@param integer ri - 行索引
@param integer ci - 列索引
 冻结指定行和列，设置(0,0) 可以解除冻结
focusing()
 判断当前表格是否为焦点
undo()
 撤销
redo()
 重做

附录1. 单元格属性列表

属性 值 说明
font-name string 文本字体
font-size 8 ~ 20 文本字号（单位像素）
font-bold true / false 字体是否加粗
font-italic true / false 文本是否斜体
underline true / false 文本是否有下划线
strike true / false 文本是否有删除线
color #FFFFFF 文本颜色十六进制码
bgcolor #FFFFFF 单元格背景颜色十六进制码
align left / center/ right 文本水平对齐方式
valign top / middle/ bottom 文本垂直对齐方式
textwrap true / false 文本是否自动换行
border {...} 边框样式对象 附录2

附录2. 单元格边框样式对象

属性 值 说明
mode all / inside / horizontal / vertical / outside / top / bottom / left / right 边框模式
style thin / medium / thick / dashed / dotted 边框样式
color #FFFFFF 边框颜色十六进制码

公有事件

事件 说明
onChange(cb) 单元格内容改变时触发
onKeyDown(cb) 表格存在焦点时键盘按下时触发
onClick(cb) 点击表格时触发
onSelected(cb) 单元格被选中时触发

浏览器支持

Modern browsers (chrome, firefox, Safari)

开源许可证

GNU General Public License