umi react 集成 spreadjs
前言:前几天做了一个react集成spreadjs表格操作的功能,奈何我这对react已经忘得差不多营养不良的小菜菜开始了复习react之旅。看来看去选择了umi,原因很简单:该有的都有,不该有的也有,而且最重要的一点是容易上手,懂得都懂~~下面开始正文。。。
不了解umi可以先去umi官网:https://umijs.org/zh-CN/docs,这里重点讲解集成spreadjs
umi
1.首先下载umi脚手架,电脑中要有node!!!(node -v,npm -v),想到大家懒得去官网看,我就直接拿过来贴在这。
推荐使用 yarn 管理 npm 依赖,并使用国内源(阿里用户使用内网源)。
# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v
# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v
2.先找个地方建个空目录。
$ mkdir myapp && cd myapp
3.通过官方工具创建项目,
$ yarn create @umijs/umi-app # 或 npx @umijs/create-umi-app // 然后 yarn yarn start 就能看到页面了
spreadjs
简单使用的话,需要的依赖包不多,但体积都不小,加上spreadjs文档对于我这种小菜菜并不友好,不懂就得问吖
1.下载依赖包
yarn add @grapecity/spread-sheets-react @grapecity/spread-sheets
2.在你的.tsx文件中
import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react' import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css' import GC from '@grapecity/spread-sheets' // 我感觉这个就是jq中的$的意思,自己体会
3.下面return中
return( <div> <SpreadSheets hostStyle={{ width: '100%' }} workbookInitialized={ workbookInitialized }> <Worksheet { ...worksheetConfig }></Worksheet> </SpreadSheets> </div> )
workbookInitialized表格加载完成调用的方法,类似与Vue中的mounted,方法参数是表格本体,使用的时候可以打印出来看看,下面贴出我的代码:
// spreadjs 初始化 function workbookInitialized(workbook) { spread = workbook setTimeout(() => { sheet = spread.getActiveSheet() sheet.setColumnCount(30) // spread双击 spread.bind(GC.Spread.Sheets.Events.CellDoubleClick, (a, b) => { }); // 选择区域 spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) { }) }, 0) }
结语:到此,表格就能出现了,需要什么功能,都可以去官网api查看,虽然不太友好,但是spreadjs程序员哥哥回复速度是一流的,还是那句话,不懂就问。
网址:https://www.grapecity.com.cn/developer/spreadjs
三大框架集成网址:https://demo.grapecity.com.cn/spreadjs/help/latest/content/UsingtheSpreadSheetsElement.html