单元格设置只读
之前参考的文章
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";
}
}
...