需要在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本身好像没你说的功能,只有下面的按钮进行放大和缩小。我的思路是自己监听双指的放大,然后手动去缩小luckysheet。 1、自己监听双指的滑动可以问ai,我这里问了,可以私信发你。 2、手动缩小luckysheet我没有找到对应官方提供的api,你可以模拟点击那两个放大和缩小的按钮。 解决luckysheet移动端滚动异常 - 总结passive和jq的off 求发展——: 大佬,集成到移动端之后,手指进行放大缩小能搞嘛