关于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;
        }
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

回车事件，文件位置 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;
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

编辑框位置错位

位置错位问题是因为，系统嵌入平台，代码获取屏幕宽度不准确导致，在 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();
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

找到方法位置， 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";
            }
        }
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18