Package Exports
- spread-js-table
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (spread-js-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
SpreadJsTable
一个基于葡萄城SpreadJS的表格组件
SpreadJsTable依赖使用的SpreadJS版本是13.0.0
对于非SpreadJS 13.0.0的版本，目前没有做兼容。
安装
npm 安装
npm install spread-js-table -Sscript 引入
<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 |
| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, hitinfo |
| header-cell-mouse-center | 当列头单元格 hover 进入时会触发该事件 | column, hitinfo |
| header-cell-mouse-leave | 列头 | 当列头单元格 hover 退出时会触发该事件 |
| 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 |