luckysheet的使用

官网文档：Luckysheet文档

目录

一、引入

二、关于创建

三、创建以及保存

四、一些"小技巧"

---

一、引入

注意：luckysheet与layui的样式会冲突，所以引入一定要放在项目的最前面。

方法一：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 th:src="@{${uiPath} + ${appName}+'/js/plugins/luckysheet/plugins/js/plugin.js'}" src="../js/plugins/luckysheet/plugins/js/plugin.js"></script>
	<script th:src="@{${uiPath} + ${appName}+'/js/plugins/luckysheet/luckysheet.umd.js'}" src="../js/plugins/luckysheet/luckysheet.umd.js"></script>

方法二：本地引入方法（项目下载到本地后，找到dist文件，拖进自己项目里）

<link th:href="@{${uiPath} + ${appName}+'/js/plugins/luckysheet/plugins/css/pluginsCss.css'}" href="../js/plugins/luckysheet/plugins/css/pluginsCss.css" rel="stylesheet" type="text/css"></link>
	<link th:href="@{${uiPath} + ${appName}+'/js/plugins/luckysheet/plugins/plugins.css'}" href="../js/plugins/luckysheet/plugins/plugins.css" rel="stylesheet" type="text/css"></link>
	<link th:href="@{${uiPath} + ${appName}+'/js/plugins/luckysheet/css/luckysheet.css'}" href="../js/plugins/luckysheet/css/luckysheet.css" rel="stylesheet" type="text/css"></link>
	<link th:href="@{${uiPath} + ${appName}+'/js/plugins/luckysheet/assets/iconfont/iconfont.css'}" href="../js/plugins/luckysheet/assets/iconfont/iconfont.css" rel="stylesheet" type="text/css"></link>

// 以下地址是按照项目里写的，可以跟我不一样
<script th:src="@{${uiPath} + ${appName}+'/js/plugins/luckysheet/plugins/js/plugin.js'}" src="../js/plugins/luckysheet/plugins/js/plugin.js"></script>
	<script th:src="@{${uiPath} + ${appName}+'/js/plugins/luckysheet/luckysheet.umd.js'}" src="../js/plugins/luckysheet/luckysheet.umd.js"></script>

二、关于创建

1. 先在页面写一个容器，这个容器的id名需要跟luckysheet所需要的option的container完全一致

 // 被注释的是官网给的样式
	<!-- <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div> -->
<div id="luckysheet" style="margin:20px 0 0 0;padding:0px;position:absolute;width:100%;height:95%;top: 20px;left: 0;"></div>

2.写配置option

var options = {
  container: 'luckysheet', // luckysheet为容器id
  lang: 'zh', // 中文
  hook:{ // 用于存放钩子函数
       cellMousedownBefore: function (cell, postion, sheetFile, ctx) {
		// 这里我想实现如果拿到的是保管期限、密级的那一列都要下拉框
    		if((postion.c == retentionIndex || postion.c == securityclassIndex)&&postion.r !=0){ // 只有当前的单元格的列等于这两个时才走这个逻辑（并且要排除表头）
			sheetFile.dataVerification[postion.r+'_'+postion.c] = {
				checked: false,
				hintShow:false,
				hintText:"",
                type: 'dropdown',
                type2: null,
                value1: postion.c == retentionIndex? "10年,30年,永久":"秘密,公开,绝密,机密,限制",
				value2:"",
                prohibitInput: false
							}
							}
						}
				}
				
			};

以上代码涉及：

1. hook生命周期，luckysheet所有生命周期函数都要写在这个地方。

2. 如果想要有下拉选择，需要用到数据校验dataVerification，其中value1是下拉的选项

3. postion是单元格的索引，包含了行、列位置

3.创建工作表

const luckysheetData1 =[{
				name: "sheet1", //工作表名称
				color: "", //工作表颜色
				index: "0", //工作表索引
				status: "1", //激活状态
				order: "0", //工作表的顺序
				hide: 0,//是否隐藏
				celldata: headArray, //初始化使用的单元格数据
				data: [], //更新和存储使用的单元格数据
				scrollLeft: 0, //左右滚动条位置
				// scrollTop: 315, //上下滚动条位置
				luckysheet_select_save: [], //选中的区域
				luckysheet_conditionformat_save: {},//条件格式
				calcChain: [],//公式链
				isPivotTable:false,//是否数据透视表
				pivotTable:{},//数据透视表设置
				filter_select: {},//筛选范围
				config:{
					colhidden:{},
					columnlen:columnlen,
					customWidth:customWidth
				},
				// freezen: {
				// 	freezenrow: 0 // 冻结第一行
				// }, //冻结行列
				chart: [], //图表配置
				visibledatarow: [], //所有行的位置
				visibledatacolumn: [], //所有列的位置
				ch_width: 2322, //工作表区域的宽度
				rh_height: 949, //工作表区域的高度
				load: "1", //已加载过此sheet的标识
				dataVerification:dataVerification
			},{
				name: "这是2", //工作表名称
				color: "", //工作表颜色
				index: "1", //工作表索引
				status: "0", //激活状态
				order: "1", //工作表的顺序
				hide: 1,//是否隐藏
				celldata: [],
				config: {},
			},{
				name: "这是3", //工作表名称
				color: "", //工作表颜色
				index: "2", //工作表索引
				status: "0", //激活状态
				order: "2", //工作表的顺序
				hide: 1,//是否隐藏
			}]   // 默认

luckysheet默认有三个工作表，如果想要隐藏工作表需改hide属性即可；默认激活工作表1；celldata是初始化表格的数据，是按照这样的数据进行初始化

[{"r":0,"c":0,"v":{"v":1,"m":"1","ct":{"fa":"General","t":"n"}}}]

• fa表示格式名称为自动格式

• t表示格式类型为数字类型

• v表示内容的原始值

• m表示内容的显示值

• ct全程celltype表示单元网值格式

• 还有其他可以参考官网

三、创建以及保存

options.data= luckysheetData1    // 需要将放在options的data里面
luckysheet.create(options);

const sheet1Data = luckysheet.getAllSheets()[0].data

四、一些"小技巧"

注意：如果官网没有给出你想要的例子，你可以在excel中先在表格中做出你想要的样子，然后利用保存luckysheet.getAllSheets()[表单索引]去获取此excel的配置和数据，这样就可以把获取到你想要的配置以及可以在初始化中根据你获取的配置一一赋值即可。

1. 如何自定义列宽

// 如果columnMaxWidth这个对象的key值大于8，那就乘以13-这个13是字体大小，去算宽度，然后设置为列宽
			let columnlen = {}
			let customWidth = {} 
			for(let key in columnMaxWidth){
				const extralZF = columnMaxWidth[key].currentLength-columnMaxWidth[key].numberLength-columnMaxWidth[key].englishLength-columnMaxWidth[key].chineseLength
				if(columnMaxWidth[key].currentLength > 8 && key!=headArrayLength){ // 需要把recordcode所在列去掉
					columnlen[key] = columnMaxWidth[key].numberLength * 7.6 + columnMaxWidth[key].englishLength*7.6 +columnMaxWidth[key].chineseLength * 13 + extralZF * 5// 算好列宽
					customWidth[key] = 1
				}
			}
在config中配置：
columnlen:columnlen,
customWidth:customWidth

2.如何隐藏某列

// headArrayLength就是表示某一列， =0表示隐藏
luckysheetData1[0].config.colhidden[headArrayLength] = 0 // 初始化时，设置隐藏列