电子表格

版本升级

v9

  1. 可以放在opitons里作为一个属性设置

v10:

  1. license必须以jspreadsheet.setLicense("参数")形式设置

页面无响应

系统设置/报告自动生成管理,会经过多次无响应弹窗提醒,才能显示页面

电子表格_第1张图片

原因

  1. 单元格太多
  2. 无版本无关

解决办法

给电子表格设置属性tableOverflow: true

电子表格性能链接

解决思路

电子表格_第2张图片

下拉组件新增数据没有显示

问题原因

对电子表格数据做二次处理时,没有使数据的属性一一对应

  1. 红色框的数据应该一一对应
  2. 蓝色框的数据应该一一对应
    电子表格_第3张图片

正确展示的数据

电子表格_第4张图片

电子表格_第5张图片

时间组件选择秒

解决办法

  1. 修改jsutil源码,需要引入自定义的jsutil
  2. feature/jspreadsheet分支中已经引入,在表格自动生成管理页面中可以直接使用

项目修改

因为是自定义了jsutil,避免其它同事知道或者升级等其它风险,所以后续请做以下操作

  1. 删除package.json的中jspreadsheetjsuites,并重新安装依赖
  2. 删除其它页面中引用到的代码

      import jspreadsheet from "jspreadsheet";
      import jSuites from "jsuites";
      import "jspreadsheet/dist/jspreadsheet.css";
      import "jsuites/dist/jsuites.css";
  3. 把原options.license修改为jspreadsheet.setLicense("参数"),v10版本后需要这样设置
  4. public/index.html中的引用版本中准,jspreadsheet:v10,jsuites:v5(以v5的基础上自定义了源码)

电子表格_第6张图片

修改后的效果

选择时分秒

电子表格_第7张图片

不选择时分秒

电子表格_第8张图片

合并表格拖拉复制

已支持操作

电子表格_第9张图片

暂不支持操作

拖动到的格子与原格子不匹配

电子表格_第10张图片

电子表格_第11张图片

超出边界

电子表格_第12张图片

表格拖拉序号自增

已支持操作

电子表格_第13张图片

暂不支持的操作

表格中原本有其它内容,导致数字跳转,如下图中跳转了3

电子表格_第14张图片

应对解决办法

电子表格_第15张图片

单元格合并及序号自增的代码

单元格合并思路

例如: 要实现拖拉时复制多份合并的单元格

电子表格_第16张图片

第一步: 找到拖拉前选中的单元格中拥有合并信息的单元格

电子表格_第17张图片

第二步:找到拖拉后新选中的单元格们

电子表格_第18张图片

第三步: 在拖拉后根据偏移量,在新选中的单元格中,重新设置合并单元格信息
  1. 此例子拖拉前的拥有合并信息的格子是A2,拖拉前选中的单元格为纵向格子数为3
  2. 向下拉,拖拉点是x不变,y变(B3=>B9),所以偏移是6
  3. 所以要根据2(6/3=2)份单元格,即给A5,A8的单元格更新合并信息(2+3=5,5+3=8,...)

序号自增思路

第一步: 找到内容为纯数字字符加数字的单元格
第二步: 拖拉后新的单元格会更新单元格的内容(在jspreadsheet中的onafterchanges事件中能监听到)
第三步: 给纯数字+1,或给字符加数字+1

代码





你可能感兴趣的:(前端)