同方报表设计器

本产品目录结构基于 webpack-boilerplate ,功能 fork 于 x-spreadsheet 。

用法

NPM

npm install swx-spreadsheet-designer-core

<div id="test"></div>

import Spreadsheet from 'swx-spreadsheet-designer-core';
import 'swx-spreadsheet-designer-core/dist/styles/spreadsheet.css';

const s = Spreadsheet('#test')
  .loadData({})
  .change((data) => {
    // save data to db
  });

Browser

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/spreadsheet.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/spreadsheet.js"></script>

<div id="test"></div>

<script>Spreadsheet('#test');</script>

sheet 暴露事件

| | | | | | | | | | ------------------ | --------------- | ------------- | ----------- | -------------------- | --------- | ----------- | ----------- | | | cells-seleceted | cell-selected | cell-edited | cell-edited-finished | cell-drop | cell-change | cell-upload | | 文本框（包含数字） | √ | √ | √ | √ | √ | √ | × | | 日期类型 | √ | √ | × | √ | √ | √ | × | | 单选框 | √ | √ | × | × | √ | √ | × | | 多选框 | √ | √ | × | × | √ | √ | × | | 下拉框 | √ | √ | × | √ | √ | √ | × | | 弹窗 | √ | √ | × | √ | √ | √ | × | | 图片 | √ | √ | | | √ | | √ | | 附件 | √ | √ | | | √ | | √ |

模式

edit，设计模式，支持所有功能

fill，填报模式，它与设计模式区别：

1. 隐藏索引行、列

2. 隐藏工具栏

3. 隐藏底部状态栏

4. 隐藏风格线

5. 隐藏右键菜单

6. 普通单元格无法修改，只可选中，需要隐藏右下角自动生成功能

7. 只有扩展的类型单元格：文本输入框、数字输入框、单选、多选、下拉框、弹窗框、日期、上传类型单元格可接受输入值

发布流程

1. 更新版本号与记录文件

npm run release

2. 编译代码

npm run build

3. 登录(登录过可忽略)

npm login

4. 发布

npm publish