关于Luckysheet单元格设置只读,以及编辑框位置错位问题

关于Luckysheet单元格设置只读,以及编辑框位置错位问题

单元格设置只读

之前参考的文章
luckysheet的使用——09.二次开发单元格只读功能
大概原理就是,双击单元格或者选中单元格按下回车键时,监听事件直接返回,不再弹出编辑框。
然后在文章中给出的方式是,根据单元格绑定属性expand,判断是否只读。
但是不知道为什么,我设置的时候没能实现效果,最终实现方式是根据单元格背景色判断是否只读。

双击鼠标事件,文件位置 src/controllers/handlers.js

...
        // 备注:在mousedown中发送光标信息会漏处理部分(选区)范围
        server.saveParam("mv", Store.currentSheetIndex, Store.luckysheet_select_save);
    }).dblclick(function (event) {
        if($(event.target).hasClass('luckysheet-mousedown-cancel')){
            return;
        }
        
        //禁止前台编辑(只可 框选单元格、滚动查看表格)
        if (!Store.allowEdit) {
            return;
        }

        // 根据单元格背景色,判断是否禁止单元格编辑
        const rangeValue = getRangeValue()[0][0];
        if(rangeValue != null) {
        	// 主要就是这里>>>>>>>
            if(rangeValue.bg == '#000000' || rangeValue.bg == '#ffffff') {
                return;
            }
        }

        if (parseInt($("#luckysheet-input-box").css("top")) > 0) {
            return;
        }

        let mouse = mouseposition(event.pageX, event.pageY);
        if (mouse[0] >= Store.cellmainWidth - Store.cellMainSrollBarSize || mouse[1] >= Store.cellmainHeight - Store.cellMainSrollBarSize) {
            return;
        }
...

回车事件,文件位置 src/controllers/keyboard.js

...
export function keyboardInitial(){
    const _locale = locale();
    const locale_drag = _locale.drag;

    //单元格编辑输入
    $("#luckysheet-input-box").click(function () {
        formula.rangeHightlightselected($("#luckysheet-rich-text-editor"));
    }).add("#" + Store.container).on("keydown", function (event) {

        // 根据单元格背景色,判断是否禁止单元格编辑
        const rangeValue = getRangeValue()[0][0];
        if(rangeValue != null) {
        	// 主要就是这里>>>>>>>
            if(rangeValue.bg == '#000000' || rangeValue.bg == '#ffffff') {
                return;
            }
        }
        
        let ctrlKey = event.ctrlKey;
        let altKey = event.altKey;
        let shiftKey = event.shiftKey;
        let kcode = event.keyCode;
...

编辑框位置错位

位置错位问题是因为,系统嵌入平台,代码获取屏幕宽度不准确导致,在 src/controllers/handlers.js ,双击事件大概最后位置找到 luckysheetupdateCell(row_index, col_index, Store.flowdata); 代码。

...
        else {
            if (menuButton.luckysheetPaintModelOn) {
                menuButton.cancelPaintModel();
            }

            // 检查当前坐标和焦点坐标是否一致,如果不一致那么进行修正
            let  column_focus = Store.luckysheet_select_save[0]["column_focus"];
            let  row_focus    = Store.luckysheet_select_save[0]["row_focus"];
            if(column_focus !== col_index || row_focus !==  row_index){
                row_index = row_focus;
                col_index = column_focus;
            };
            // 这一行
            luckysheetupdateCell(row_index, col_index, Store.flowdata);
            
            /* 设置选区高亮 */
            selectHightlightShow();
        }

    });

    //监听拖拽 
    document.getElementById('luckysheet-cell-main').addEventListener('drop', function(e){
        e.preventDefault();
        e.stopPropagation();
...

找到方法位置, src/controllers/updateCell.js,这里的right、top修改编辑框位置。

...
        else if(htValue == "2"){
            input_postition = { 
                "min-width": col - col_pre+ 1- 8, 
                "min-height": row - row_pre + 1- 4, 
                // "transform":"scale("+ Store.zoomRatio +")",
                // "transform-origin":"right top",
                "max-width": col + container_offset.left - scrollLeft  - 8, 
                "max-height": winH + scrollTop - row_pre - 20 - 15 - Store.toolbarHeight - Store.infobarHeight - Store.calculatebarHeight - Store.sheetBarHeight - Store.statisticBarHeight, 
                "right": winW - (container_offset.left + (Store.rowHeaderWidth-1) - scrollLeft) - col, 
                "top":  row_pre + container_offset.top + Store.infobarHeight + Store.toolbarHeight + Store.calculatebarHeight + Store.columnHeaderHeight - scrollTop - 2, 
            }

            if(Store.zoomRatio<1){
                leftOrigin = "right";
            }
        }
...
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值