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>

  

  

 

posted @   玛卡巴鉲  阅读(477)  评论(1编辑  收藏  举报
点击右上角即可分享
微信分享提示