@startdt/spreadsheet

快速使用

npm install @startdt/spreadsheet --save

<div id="container"></div>

import Spreadsheet from "@startdt/spreadsheet";
// If you need to override the default options, you can set the override
// const options = {};
// new Spreadsheet('#container', options);
const s = new Spreadsheet("#container")
  .loadData({}) // load data
  .change(data => {
    // save data to db
  });

// data validation
s.validate()

参数说明

只读/编辑

首次加载时将配置中的 mode 设置为 read 或者 edit

mode: 'read'    // 'edit'

工具栏

工具栏的显示状态 showToolbar: boolean，默认为 true

底部工具栏 showBottomBar: boolean，默认为 true

showToolbar: true     // false
showBottomBar: true   // false

网格

内容区域网格显示状态 showGrid: boolean

showGrid: true    // false

右键菜单

切换右键菜单显示状态 showContextmenu: boolean

showContextmenu: true   // false

表格宽高

这包含工具栏高度，可以调整表格固定的宽高 view 属性的 height 和 width

// 可以是固定值
view: {
    height: () => document.documentElement.clientHeight,
    width: () => document.documentElement.clientWidth
}

行

调整行的高度和默认展示数量，分别通过 height 属性和 len 调整

row: {
    height: 25,
    len: 100
}

列

可以调整默认显示的列数 len，A-Z，默认每个列的宽度 width，左边序列栏默认宽度 indexWidth，以及每个列默认最小宽度 minWidth

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,
    },
}

默认配置

{
    mode: 'edit',
    showToolbar: true,
    showGrid: true,
    showContextmenu: 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,
        },
    },
}

绑定单元格事件

const s = new Spreadsheet("#container")
// event of click on cell
s.on('cell-selected', (cell, ri, ci) => {});
s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
// edited on cell
s.on('cell-edited', (text, ri, ci) => {});

设置单元格内容

const s = new Spreadsheet("#container")
// cellText(ri, ci, text, sheetIndex = 0)
s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();

获取单元格信息

const s = new Spreadsheet("#container")
// cell(ri, ci, sheetIndex = 0)
s.cell(ri, ci);
// cellStyle(ri, ci, sheetIndex = 0)
s.cellStyle(ri, ci);

本地开发

npm install
npm run dev

浏览器打开：http://localhost:8080

基础功能

• 撤销
• 恢复
• 格式刷
• 清除格式
• 字体
• 字号
• 粗体
• 斜体
• 边框
• 下划线
• 删除线
• 字体颜色
• 填充颜色
• 对齐方式
• 自动换行
• 自动填充
• 合并单元格
• 复制/剪切/粘贴
• 行高/列宽
• 冻结行列
• 插入行列
• 删除行列
• 隐藏行列
• 多表支持
• 数据格式
• 格式校验
• 打印
• 公式

浏览器支持

现代浏览器（Chrome、Firefox、Safari）