x-report
基于xspreadsheet二次开发的web版报表插件
very thanks https://github.com/myliang/x-spreadsheet.git
<div id="x-report-demo"></div>
import Xreport from "x-report"; (目前没有发布到npm上,可自行打包到本地)
const s = new Xreport("#x-report-demo")
.loadData([]) // load data
.change(data => {
// save data to db
});
// default options
{
mode: 'edit', // edit | read
view: {
height: () => document.documentElement.clientHeight,
width: () => document.documentElement.clientWidth,
},
showGrid: true,
showToolbar: true,
showContextmenu: true,
showBottomBar: false,
evalPaused: true,//不进行cell里面=号的计算
row: {
len: 100,
height: 25,
},
col: {
len: 26,
width: 100,
indexWidth: 60,
minWidth: 60,
},
style: {
bgcolor: '#ffffff',
align: 'left',
valign: 'middle',
textwrap: false,
strike: false,
underline: false,
color: '#0a0a0a',
font: {
name: 'Arial',
size: 10,
bold: false,
italic: false,
},
format: 'normal',
},
merges: [],//合并单元格
groups: [],//分组
dataFilter: [],//过滤数据条件
dataDb: [],//[{table:'表名',codes:[{label:'年龄',value:'age',...}]}]
dataSource: {}//与dataDb对应
}
Bind events
const s = new Xreport("#x-report-demo")
// event of click on cell
s.on('cell-selected', (cell, ri, ci) => {});
s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
// edited on cell
s.on('cell-edited', (text, ri, ci) => {});
//toolbar 拦截器
s.on('toolbar-click-before',(type,value)=>{
//头部按钮拦截;执行reject就不会触发更改操作
if(type != 'save')return true;
return new Promise((resolve)=>{
setTimeout(()=>{
let nowData = xs.getData();
window.localStorage.setItem('sheetDemo',JSON.stringify(nowData))
resolve()
},10)
})
});
update cell-text
const s = new Xreport("#x-report-demo")
// cellText(ri, ci, text, sheetIndex = 0)
s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();
get cell and cell-style
const s = new Xreport("#x-report-demo")
// cell(ri, ci, sheetIndex = 0)
s.cell(ri, ci);
// cellStyle(ri, ci, sheetIndex = 0)
s.cellStyle(ri, ci);
Development
git clone https://gitee.com/hugeman/x-report.git
cd x-report
npm install
npm run dev
Open your browser and visit http://127.0.0.1:8080.
Browser Support
Modern browsers(chrome, firefox, Safari).
LICENSE
MIT