SpreadJsTable

一个基于葡萄城SpreadJS的表格组件

SpreadJsTable依赖使用的SpreadJS版本是13.0.0

对于非SpreadJS 13.0.0的版本，目前没有做兼容。

!!!完整版文档传送门!!!

安装

npm 安装

npm install spread-js-table -S

script 引入

<script src="http://sunxuedong.gitee.io/spread-js-table/dist/spread-js-table.js"></script>

SpreadJsTable 表格

基础表格

基础的表格展示用法。

带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

带状态表格

可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。

固定列

横向内容过多时，可选择固定列，frozenColumnNum决定固定的列数，frozenTrailingColumnNum决定固定尾列的列数。

多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

单选

选择单行数据时使用 Checkbox。

全选

选择多行数据时使用 Checkbox。

排序 & 筛选（spreadJS 本身具有的功能）

表尾合计行

若表格展示的是各类数字，可以在表尾显示各列的合计，可以通过isNeedGather的bool值来决定是否汇总。

SpreadJsTable Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :---- | :---- | :---- | :---- | :---- | | data | 显示的数据 | array | — | — | | columns | 列头 | array | — | — | | isShowFilteredNumber | 是否显示使用spreadJS过滤后，过滤的数量 | array | — | — | | oddRowBackColor | 奇数行的背景色 | string | — | #dcdcdc | | evenRowBackColor | 偶数行的背景色 | string | — | #ffffff | | frozenColumnNum | 固定表格列的数量，从左边开始 | number | — | 0 | | frozenTrailingColumnNum | 固定表格列的数量，从左边开始 | number | — | 0 |

SpreadJsTable Events

| 事件名 | 说明 | 参数 | | :---- | :---- | :---- | | selection-change | 当选择项发生变化时会触发该事件 | selection | | cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | array | row, column, hitinfo | | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, hitinfo | | header-cell-mouse-center | 当列头单元格 hover 进入时会触发该事件 | column, hitinfo | | header-cell-mouse-leave | 列头 | 当列头单元格 hover 退出时会触发该事件 | column, hitinfo | | cell-db-click | 当某一单元格被双击时会触发该事件 | row, column | | row-db-click | 当某一行被双击时会触发该事件 | row, column | | button-click | 当点击单元格button时会触发该事件 | {row, column, text} | | render-row | 当处理表格的每行数据时会触发该事件（可以通过对style对象的属性赋值，达到更改行样式的目的） | {rowIdx, rowData, style} | | render-cell | 当渲染单元格时会触发该事件（可以通过对style对象的属性赋值，达到更改单元格样式的目的） | {rowIdx, colIdx, column, style} | | render-header | 当渲染列头时会触发该事件（可以通过对style对象的属性赋值，达到更改列头单元格样式的目的） | {style, column, colIdx, rowIdx} |

SpreadJsTable Methods

| 方法名 | 说明 | 参数 | | :---- | :---- | :---- | | refresh | 刷新sheet | — | | clearTableCheckStatus | 清空表格的选中状态 | — | | exporting | 导出 | {name:'', data: []} // name:导出文件的名称 data: 导出的数据，默认当前页数据 |

SpreadTable-column Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :---- | :---- | :---- | :---- | :---- | | type | 对应列的类型 | string | radio/checkbox | — | | name | column 的 key | string | — | — | | displayName | 显示的标题 | string | — | — | | cellType | 单元格的类型 | object | — | — | | isProtect | 该列是否开启表单保护 | boolean | — | true | | isFilterable | 该列是否有过滤功能 | boolean | — | true | | isNeedGather | 该列是否有汇总功能 | boolean | — | false | | isVisible | 该列是否可见 | boolean | — | true | | children | 多表头的key | boolean | — | — | | wordWrap | 是否允许换行，值为true时，可通过‘\r\n’给文字换行 | boolean | — | false |