@thtf/spreadsheet-designer-core

同方报表设计器

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

用法

NPM

npm install @thtf/spreadsheet-designer-core

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

import Spreadsheet from '@thtf/spreadsheet-designer-core';
import '@thtf/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/@thtf/spreadsheet-designer-core@0.0.1/dist/styles/spreadsheet.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@thtf/spreadsheet-designer-core@0.0.1/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