基于 Web 的 JavaScript Canvas 高性能
基于 Web 的 JavaScript Canvas 电子表格，它拥有更好的运行和渲染性能，不依赖任何框架，只实现核心引擎，同时提供丰富便捷的 API 给予开发者快速操控引擎的能力。
特性 Canvas 高性能渲染 丰富的公有 API 灵活的插件扩展机制 兼容 Excel 功能 安装本项目不提供工具栏界面，开发者需根据自己的场景结合 API 创造属于自己的电子表格应用。
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() | 重做 |
| 属性 | 值 | 说明 |
|---|---|---|
| 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
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
