react+ts项目中使用jexcel,单元格合并

作者:神秘网友 发布时间:2020-10-31 18:44:14

react+ts项目中使用jexcel,单元格合并

react+ts项目中使用jexcel,单元格合并

遇到的问题
1.jexcel 的导入出问题
2.初始化jexcel表格dom节点的获取问题
3.jexcel初始化返回jexcel对象没有获取到的
4.在对代码进行更改后,热更新之后页面会出现多个表格
因为公司做的项目用到了jexcel,今天我的师傅叫我看一看jexcel实现一下表格的合并,代码很简单但是晕倒的坑不少
首先下载的时候要下载对应ts版本 npm install @types/jexcel --save
1.再导入jexcel 的时候 我使用 es6 import 导入 结果不行 ,后来看了源码才知道他是用的commonsjs的规范到出的
react+ts项目中使用jexcel,单元格合并
需要使用require 导入
2.导出的jexcel 是一个工厂函数react+ts项目中使用jexcel,单元格合并
对应的参数jexcel(挂载的dom节点,Options{}),我最开始使用的时原生获取dom节点结果报错,后来我看了官网的例子(https://bossanova.uk/jexcel/v3/examples/react)
里面使用的时Class组件的写法,现在公司都要求使用hook的写法,后来我用了ref来后去节点结果还是不行,通过多次实验发现他要这样写react+ts项目中使用jexcel,单元格合并
3.在准备使用他的setMerge方法实现单元格合并的时候发现我得到的jexcel对象是空的
我刚开始想的是用一个普通的变量将他保存起来react+ts项目中使用jexcel,单元格合并
结果不行,后来发现 是由于组件没有更新在后面取值的时候才拿不到,用setState就可以了

react+ts项目中使用jexcel,单元格合并
4.在对代码进行更改后,热更新之后页面会出现多个表格
react+ts项目中使用jexcel,单元格合并
打开开发者工具查看发现,挂载的根节点里面有两个相同的react+ts项目中使用jexcel,单元格合并
查看源码发现它是使用insertiBefore插入react+ts项目中使用jexcel,单元格合并
所以我的解决办法就是在每次组件更新的时候 将jexceDom.innerHTML = ‘’,问题解决了react+ts项目中使用jexcel,单元格合并

完整代码

import React, { useEffect, useRef, useState } from "react";
import ReactDom from "react-dom";
// import "../node_modules/jexcel/dist/jexcel.css";
import "../../../node_modules/jexcel/dist/jexcel.css";
// import jexcel from 'jexcel'
const jexcel = require("jexcel");
const arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];
const FirstJexcel = () => {
  let jexcelDom: any = useRef();
  let [table,setTable] =useState<any>({})
    const [colL,setColL] = useState(0)
    const [rowL,setRowL] = useState(0)
    const [colR,setColR] = useState(0)
    const [rowR,setRowR] = useState(0)
  const onselection = (
    d: HTMLElement,
    colL: number,
    rowL: number,
    colR: number,
    rowR: number
  ) => {
    setColL(colL)
    setColR(colR)
    setRowL(rowL)
    setRowR(rowR)
  };
  const onmoverow = () => {
    console.log("move row");
  };
  let Option = {
    minDimensions: [8, 8],
    onselection: onselection,
  };
  useEffect(() => {
    jexcelDom.innerHTML = ''
    
    setTable (jexcel(jexcelDom, {

        
        data: [
          ["Mazda", 2001, 2000],
          ["Pegeout", 2010, 5000],
          ["Honda Fit", 2009, 3000],
          ["Honda CRV", 2010, 6000],
        ],
        ...Option,
      }))
  });

  const returnTable = () => {
    
  };
  return (
      <div>
        <div
      id="jexcel-root"
      style={{
        height: "500px",
        width: "500px",
      }}
      ref={(dom) => {
        jexcelDom = dom;
      }}
    ></div>
    <button onClick={()=>{
        console.log(rowL,rowR,colL,colR)
        console.log(`${arr[colL]}${rowL + 1}`,Math.abs(rowL-rowR)+1,Math.abs(colL-colR)+1)
        console.log('table',table)
        table&&table.setMerge(`${arr[colL]}${rowL + 1}`,Math.abs(colL-colR)+1,Math.abs(rowL-rowR)+1)
    }}>合并</button>
    </div>
   
  );
};

export default FirstJexcel;



react+ts项目中使用jexcel,单元格合并相关教程

  1. 使用GridsearchCV时The truth value of an array with more than

    使用GridsearchCV时The truth value of an array with more than one element is ambiguous. 我正在尝试在 python 中使用 scikit-learn 进行分类 。我生成了数据,将其拆分以进行训练和测试,并在模型clf使用了它。 我接下来打算做的是使用 sklearn.model_sel

  2. Oracle VM VirtualBox虚拟机使用问题总结

    Oracle VM VirtualBox虚拟机使用问题总结 我本机的配置是Ubuntu 18.04 +OracleVMVirtualBox虚拟机 (6.1.12) + 虚拟win7操作系统,对虚拟机了解甚少,以下仅为一些实践中的经验: 一、升级后屏幕分辨率问题 最近按照提示将virtaulbox升级到6.1.14,完成后装上

  3. 20201030使用jvisualvm排查内存溢出(OOM)过程

    20201030使用jvisualvm排查内存溢出(OOM)过程 内存溢出在开发中或者线上出现的概率很高,造成的直接结果是系统运行缓慢,或者直接宕机。 在这里模拟下内存溢出的情况以防患于线上出现内存溢出要如何排查问题,线上出问题需要生成一个快照(hprof文件),在

  4. MultiValueMap的使用 和一个键多个值的理解

    MultiValueMap的使用 和一个键多个值的理解 源代码 MultiValueMapString, String multiValueMap =new LinkedMultiValueMap(); multiValueMap.add(aa,aa); multiValueMap.add(aa,bb); multiValueMap.add(aa,cc); multiValueMap.add(aa,dd); multiValueMap.add(

  5. Linux中使用GDB调试程序

    Linux中使用GDB调试程序 gdb的简介及在linux中的使用 一、gdb简介及常用命令介绍 二、gdb调试实例 1、什么是gdb GDB : GNU Debugger,是GNU工程为GNU操作系统开发的 调试器,但它的使用不局限于GNU操作系统, GDB可以运行 在UNIX、Linux甚至Microsoft Window

  6. 如何使用 IntelliJ IDEA 构建父/子工程类型的Maven项目

    如何使用 IntelliJ IDEA 构建父/子工程类型的Maven项目 如何使用 IDEA 构建父/子工程类型的Maven项目 在一家公司里开发,很多项目中使用的jar包80%都是重复的,如果每个项目都要把pom.xml文件的这些依赖包复制过来,或是后期出现统一的版本升级,那修改起来是

  7. unity3D 编辑器扩展,GUISkin/GUIStyle的简单使用

    unity3D 编辑器扩展,GUISkin/GUIStyle的简单使用 GUISkin是基本所有样式的集合,可以作为一种配置资源。如果开发者需要自定义大量的GUIStyle,可以通过GUISkin配置资源来定义,并且开发者可以在Inspector面板中直接修改样式。 Unity 中的GUI Skin 在Unity中

  8. 使用Swagger2时启动日志中出现大面积的日志内容:Generating uni

    使用Swagger2时启动日志中出现大面积的日志内容:Generating unique operation named: xxx 在项目中使用Swagger2生成在线文档时,在项目的启动的日志中出现了大面积的 Generating unique operation named: xxx 日志信息,看的很是不爽 出现这种日志的情况是因