基于 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
方法 | 说明 |
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()
|
重做 |
属性 | 值 | 说明 |
---|---|---|
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 |
属性 | 值 | 说明 |
---|---|---|
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