Spread-js-table NPM

SpreadJsTable

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

SpreadJsTable依赖使用的SpreadJS版本是13.0.0

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

npm install spread-js-table -S

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

基础的表格展示用法。

基础表格

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

带斑马纹表格

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

带状态表格

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

固定列

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

多级表头

选择单行数据时使用 Checkbox。

选择多行数据时使用 Checkbox。

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

表尾合计行

事件名	说明	参数
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}

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

3 years ago

3 years ago