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