需要在luckysheet中添加一个“年月”单元格格式,并添加控件,但是luckysheet本身不支持。luckysheet中所有日期有关的控件都是用flatpickr这个库来完成的,完整使用年月控件,需要借助flatpickr的插件。
1、拿到flatpickr的monthSelect插件文件并引入
先得到node_modules / flatpickr / dist 的monthSelect文件夹的内容,放入assets(放静态资源的地方)。要用到的是里面的js和css文件,把这两个文件引入,css引入到自己的index.html;在cellDatePickerCtrl.js文件中引入js文件。
const monthSelectPlugin = require('../assets/monthSelect')
1.2 为弹框选项添加一项
在zh.js中的dateFmtList中为“年月”添加一项(其他几个文件也可以注册)
2、 注册flatpickr时使用这个插件
步骤一:准备好插件数组
// nby 新增“年月”
let pluginsArr = []
if(/Y.m/.test(dateFormat)){
pluginsArr = [new monthSelectPlugin({
// shorthand: true, //defaults to false
dateFormat: "Y.m", //defaults to "F Y"
// altFormat: "Y F", //defaults to "F Y"
enableTime = false;
步骤2:注册的时候使用。onValueUpdate中我这里判断的不严谨(源码是使用onChange,但是会有问题,所以换成onValueUpdate),可以更严谨点。
// nby 添加插件,支持“年月”
plugins:pluginsArr,
.....
// nby 新增“年月”
if(pluginsArr.length > 0){
dateStr = dayjs(selectedDates).format('YYYY-MM')
onValueUpdate【目前的代码】
onChange【之前的代码】
3、修改setcellvalue
在onChange的最后会setCellValue,所以还需要修改setdata 中的setcellvalue
// 源码:
// let mask = update(cell.ct.fa, vupdate);
// nby 新增“年月”
let mask;
if(cell.ct != null && cell.ct.fa == "Y.m"){
let str = parse_date_code(vupdate)
mask = str.y + '-' + str.m.toString().padStart(2, '0')
}else{
mask = update(cell.ct.fa, vupdate);
// nby 新增“年月” END
4、完善setcellvalue,导出parse_date_code
在3中有使用parse_date_code方法,但是源代码没有导出,所以需要导出
在format.js中的最后导出本文件中定义的parse_date_code方法。我的做法是在最后复制代码后导出。
最后的效果
一开始百度没找到flatpickr支持年月控件,还打算用别的库,最后在谷歌用英文搜的时候第一项就是我需要的,所以谷歌是个好东西。flatpickr还是很强大的,移动端、pc端都支持,万不得已还是别换库。
年月日联动下拉选择JS封装类。纯JS手工打造,绿色有机无污染,简单实用。实例化示例: new YMDselect('year1','month1');
new YMDselect('year1','month1','day1');
new YMDselect('year1','month1','day1',1990,2,10);
当luckysheet为弹出框组件时,双击单元格没有反应没有出现输入框
原因:lucksheet单元格的输入框对应的className为luckysheet-input-box,其position为absolute,页面中存在其他absolute定位的元素的z-index值大于luckysheet-input-box对应的z-index时,双击单元格时输入框不会显示。
解决:单独设置luckysheet-input-box的z-index属性
.luckysheet-input-box{
z-index
1.自定义View
public class DatePickerView extends LinearLayout implements NumberPicker.OnValueChangeListener {
private final String TAG = getClass().getSimpleName();
private Context mContext;
* 视图控件
private CustomNumber
方式一:接收到后台的数据之后通过luckysheet.setCellValue()逐条遍历,这种方式的优点就是操作简单,缺点就是当数据量较大时加载会很慢,代码如下:
// 产品ID
luckysheet.setCellValue(rowNum, 0, newData[i].id)
luckysheet.setCellFormat(rowNum, 0, "vt", 0)
luckysheet.setCellFormat(rowNum, 0, "ht", 0)
// 产品名称
现将分享我在使用该组件过程中遇到的问题及解决方法。
Vue中定义Luckysheet组件:组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用,因此,先定义好可重复使用的Luckysheet组件。代码如下:
<template>
<div class="she
2. 将插件文件添加到LuckySheet
将下载的插件文件添加到您的LuckySheet项目中。您可以将插件文件上传到您的服务器,或使用CDN提供商的服务。
3. 引入插件
在LuckySheet中引入插件。您可以使用LuckySheet提供的API来引入插件。例如,使用以下代码将插件文件添加到LuckySheet:
<script src="lucky.js"></script>
<script src="lucky.chart.js"></script>
4. 创建图表
使用LuckySheet提供的API创建图表。例如,使用以下代码将创建一个柱状图:
luckysheet.chart.create({
sheetIndex: 0,
chartType: "bar",
dataRange: {row: [0,4], column: [0,2]},
chartTitle: "Sales Report",
chartTitlePosition: "top",
chartTitleFontSize: 16,
chartTitleColor: "#333",
xAxis: {name: "Month", nameFontSize: 12, nameColor: "#333"},
yAxis: {name: "Sales", nameFontSize: 12, nameColor: "#333"},
legend: {position: "right", fontSize: 12, color: "#333"},
tooltip: {show: true, fontSize: 12, color: "#333"},
chartStyle: {backgroundColor: "#fff", borderColor: "#ccc"}
5. 显示图表
使用LuckySheet提供的API将图表显示在LuckySheet中。例如,使用以下代码将图表显示在LuckySheet中:
luckysheet.chart.show({
sheetIndex: 0,
chartIndex: 0,
left: 100,
top: 100,
width: 400,
height: 300
6. 完成
您现在已经成功地将图表插件添加到LuckySheet中!
国王不在家:
解决luckysheet移动端滚动异常 - 总结passive和jq的off
求发展——: