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 依赖,并使用国内源(阿里用户使用内网源)。
1 2 3 4 5 6 7 8 | # 国内源 $ npm i yarn tyarn -g # 后面文档里的 yarn 换成 tyarn $ tyarn -v # 阿里内网源 $ tnpm i yarn @ali/yarn -g # 后面文档里的 yarn 换成 ayarn $ ayarn -v |
2.先找个地方建个空目录。
1 | $ mkdir myapp && cd myapp |
3.通过官方工具创建项目,
1 2 3 4 5 6 7 8 9 | $ yarn create @umijs/umi-app # 或 npx @umijs/create-umi-app // 然后 yarn yarn start 就能看到页面了 |
spreadjs
简单使用的话,需要的依赖包不多,但体积都不小,加上spreadjs文档对于我这种小菜菜并不友好,不懂就得问吖
1.下载依赖包
1 | yarn add @grapecity/spread-sheets-react @grapecity/spread-sheets |
2.在你的.tsx文件中
1 2 3 | 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中
1 2 3 4 5 6 7 | return ( <div> <SpreadSheets hostStyle={{ width: '100%' }} workbookInitialized={ workbookInitialized }> <Worksheet { ...worksheetConfig }></Worksheet> </SpreadSheets> </div> ) |
1 | workbookInitialized表格加载完成调用的方法,类似与Vue中的mounted,方法参数是表格本体,使用的时候可以打印出来看看,下面贴出我的代码: |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 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
1 | <br><br> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步