React引入Luckysheet以及一些简单应用
首先说明一下搭建环境
使用的框架为 Ant Design Pro ,最一开始的想法是直接用框架自带的可编辑表格实现功能,但是发现字段变多之后非常卡,无法解决。
在一个偶然的机会下了解到了Luckysheet,Luckysheet是一个纯前端且轻量化的表格组件,发现比较适合业务需要,所以开始尝试引入。
第一步、引入
引入的一开始,在官网查看的时候,发现写的,就是在项目的index.html里面直接引入Luckysheet的css、js即可。自己刚开始接触React,并不太了解框架,然后我发现, Ant Design Pro 框架中并没有发现对应的index.html。
在 Ant Design Pro 查看文档的时候发现 Ant Design Pro 使用 Umi 作为开发工具,官方建议先查看 Umi 的常见问题,然后找到了HTML模板。新建 src/pages/document.ejs
,umi 约定如果这个文件存在,会作为默认模板。
到这里开始引入,引入分为两种方式CDN和本地引入。
CDN
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
本地引入
npm run build
后dist
文件夹下的所有文件复制到项目目录,然后通过相对路径引入
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>
我这里选择了本地引入,因为项目涉及到一些内网使用的环境,并且后期我们根据需求对源码进行了部分修改。
后来发现好像还可以以插件的方式安装,这个后面再去看吧。
第二步、指定表格容器,创建表格
import React from 'react'
class Luckysheet extends React.Component {
componentDidMount() {
const luckysheet = window.luckysheet
luckysheet.create({
container: "luckysheet",
});
}
render() {
const luckyCss = {
margin: '0px',
padding: '0px',
position: 'absolute',
width: '100%',
height: '100%',
left: '0px',
top: '0px'
}
return (
<div id="luckysheet" style={luckyCss} ></div>
)
}
}
export default Luckysheet
第三步、引用组件
import React from 'react'
import './App.css'
import Luckysheet from './component/Luckysheet'
function App() {
return (
<div className="App">
<header className="App-header">
<Luckysheet/>
</header>
</div>
);
}
export default App
后面这两步也是官方给示例。
开始使用
一些配置项
关于luckysheet.create(options)
中的一些属性意义:
const options = {
container: "luckysheet",
// allowCopy: false, // 是否允许拷贝
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
// showsheetbar: false, // 是否显示底部sheet页按钮
// showstatisticBar: false, // 是否显示底部计数栏
// sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
// allowEdit: false, // 是否允许前台编辑
enableAddRow: false, // 允许增加行
enableAddCol: false, // 允许增加列
// userInfo: false, // 右上角的用户信息展示样式
// showRowBar: false, // 是否显示行号区域
// showColumnBar: false, // 是否显示列号区域
// sheetFormulaBar: false, // 是否显示公式栏
enableAddBackTop: false, // 返回头部按钮
// rowHeaderWidth: 0, // 纵坐标
// columnHeaderHeight: 0, // 横坐标
// showstatisticBarConfig: {
// count:false,
// view:false,
// zoom:false,
// },
// showsheetbarConfig: {
// add: false, // 新增sheet
// menu: false, // sheet管理菜单
// sheet: false, // sheet页显示
// },
lang: "zh", // 设定表格语言 国际化设置,允许设置表格的语言,支持中文("zh")和英文("en")
data: [sheet0, sheet1, sheet2], // data里面放的是每一个sheet页的数据 js 或者 json
hook:{
// 钩子函数有很多,具体可以自己去查看,简单放一个举例
// 单元格点击事件
cellMousedownBefore:function(cell,postion,sheetFile,ctx){
// console.log(postion);
},
}
}
文件中的一个sheet
的数据luckysheetfile[0]
的结构如下:
{
"name": "Cell", //工作表名称
"color": "", //工作表颜色
"index": "0", //工作表索引
"status": "1", //激活状态
"order": "0", //工作表的顺序
"hide": 0,//是否隐藏
"row": 100, //行数
"column": 100, //列数
"config": {
"merge":{}, //合并单元格
"rowlen":{}, //表格行高
"columnlen":{}, //表格列宽
"rowhidden":{}, //隐藏行
"colhidden":{}, //隐藏列
"borderInfo":{}, //边框
},
"celldata": [], //初始化使用的单元格数据
"data": [], //更新和存储使用的单元格数据
"scrollLeft": 0, //左右滚动条位置
"scrollTop": 315, //上下滚动条位置
"luckysheet_select_save": [], //选中的区域
"luckysheet_conditionformat_save": {},//条件格式
"calcChain": [],//公式链
"isPivotTable":false,//是否数据透视表
"pivotTable":{},//数据透视表设置
"filter_select": {},//筛选范围
"filter": null,//筛选配置
"luckysheet_alternateformat_save": [], //交替颜色
"luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
"freezen": {}, //冻结行列
"chart": [], //图表配置
"visibledatarow": [], //所有行的位置
"visibledatacolumn": [], //所有列的位置
"ch_width": 2322, //工作表区域的宽度
"rh_height": 949, //工作表区域的高度
"load": "1", //已加载过此sheet的标识
}
具体可以去查看官网,这里只是复制一份。
ps:这里要注意的是属性很多,在你上面自定义修改的时候,相同属性会覆盖上面的内容,建议从在下面加
数据回显
- loadUrl ,我没用过,当时感觉不太适合我们的要求。
作用:配置loadUrl接口地址,加载所有工作表的配置,并包含当前页单元格数据,与loadSheetUrl配合使用。参数为gridKey(表格主键)。
$.post(loadurl, {"gridKey" : server.gridKey}, function (d) {})
- setCellValue 在前端把数据遍历放入到表格中,可以用而且蛮好用的,但是数据多了比较慢。
- 后台处理数据,直接生成 cellData,前台
sheet.cellData.push(...list)
,这个用起来速度快了一些,现在用的这个,暂时没有找到更好的办法。
数据保存
没啥好说的,得根据真实业务场景去处理,这里直接获取sheet页数据,然后遍历获取值v(或者m)
原始值 v
和显示值m
区别:
假如原始值 v
为1,设置成百分比格式m
就是100%
,设置成两位小数数字m
就是1.00
window.luckysheet.getSheet(index).data
导出与导入
这个根据官网常见问题中给的参考链接搞就可以。当时应该参考的这个。
使用exceljs导出luckysheet表格
从这开始想到啥说啥吧,虽然本来写的就不多。
关于数据定位
有个api,scroll([setting])
scroll([setting])
参数:
{PlainObject} [setting]: 可选参数
{Number} [scrollLeft]:横向滚动值。默认为当前横向滚动位置。
{Number} [scrollTop]:纵向滚动值。默认为当前纵向滚动位置。
{Number} [targetRow]:纵向滚动到指定的行号。默认为当前纵向滚动位置。
{Number} [targetColumn]:横向滚动到指定的列号。默认为当前横向滚动位置。
{Function} [success]: 表格刷新成功后的回调函数
说明:
滚动当前工作表位置
示例:
把数据显示在靠近屏幕中间的位置,直接写 i 会在第一行,同样的也可以设置其他属性。
luckysheet.scroll({ targetRow: i - 6 })
有个bug,如果为了突出换背景色,会去不掉,暂时还没解决。