V17 部分单元格不可编辑，及只读功能。以及只读单元格添加样式。

Ellia.Duan

问题一：如何设置某一个单元格只读？

当设置为 sheet.options.isProtected = true; 时，整个表单都变得不可编辑。可需求是只要某个单元格只读。

单纯的设置

sheet.getCell(this.sheet.getActiveColumnIndex(), this.sheet.getActiveRowIndex()).locked(true)

并不能让需要的单元格变得只读。

问题二：如何给当前单元格添加一个只读的样式，比如背景色置灰。取消只读功能时，该单元格样式恢复成设置只读样式之前的样式。

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2024-6-11 11:18 编辑

您好，重新回答下您的第一个问题：
目前对于单元格锁定，推荐的是表单保护的方案：
如果只对一个一个单元格设置锁定。
您可以先设置默认style 如

let defaultStyle = new GC.Spread.Sheets.Style()
defaultStyle.locked = false;
sheet.setDefaultStyle(defaultStyle)

复制代码

然后对不能编辑的单元格设置锁定，如

let lockedStyle = new GC.Spread.Sheets.Style()
lockedStyle.locked = true;
lockedStyle.backColor = 'pink'
sheet.getRange(-1,0,-1,3).setStyle(lockedStyle)

复制代码

上面的代码只是对前四列单元格设置锁定，其他单元格可以正常编辑
最后还需要加上

sheet.options.isProtected = true;

复制代码

如果上述方案不能满足您的需求，再来看监听事件的方式，
https://demo.grapecity.com.cn/sp ... C%E7%BC%96%E8%BE%91
监听事件，如果是您不想编辑的单元格，则args.cancel = true;
在这篇文章中，提到了EditStarting事件，同样，如果有复制粘贴的业务场景，您还需要监听粘贴事件clipboardpasting去阻止粘贴，
或者是行高列宽事件，监听columnchanging事件阻止列宽改变事件等。

监听的事件较多，您可以参考Events
https://demo.grapecity.com.cn/sp ... pread.Sheets.Events
除此之外，del键可以删除单元格内容，但是EditStarting事件无法监听到del键。需要用RangeChanged事件去监听，del删除或者是右键菜单中“清除内容”的操作。但是RangeChanged无法对删除操作进行撤销，需要重写del键。
需要参考这篇文章
https://gcdn.grapecity.com.cn/showtopic-200322-1-1.html

您可以根据上面内容，具体评估方案。

Ellia.Duan · Ellia.Duan

您好，问题一，可以参考下面的文章解决：
https://demo.grapecity.com.cn/sp ... C%E7%BC%96%E8%BE%91

监听事件，如果是您不想编辑的单元格，则args.cancel = true;

问题二：如果是在表单保护状态下，可以根据单元格状态设置只读的样式。此时并不需要判断哪个单元格只读，也不需要保存单元格变为只读样式之前的背景色。
https://demo.grapecity.com.cn/sp ... introduction/purejs
image.png839662780.png

如果您用上面提供的方案的话，需要将单元格的背景色提前保存下来，当只读时，设置只读样式，当可以编辑时，获取提前保存的样式，进行重置。

卑微的打工狗 · 卑微的打工狗

Ellia.Duan 发表于 2024-6-6 16:55
您好，问题一，可以参考下面的文章解决：
https://demo.grapecity.com.cn/spreadjs/help/docs/faqs/EventR ...

this.sheet.bind(GC.Spread.Sheets.Events.EditStarting, (sender, args) => {
// 判断如果是不能编辑的单元格，则执行以下代码
if (!this.sheet.getCell(args.col, args.row).locked()) {
args.cancel = true;
}
});

复制代码

通过这段代码，可以实现禁用某个单元格的效果，但该代发，是否无法与（以下代码）rendonly代码兼容

// var style = new GC.Spread.Sheets.Style();
// style.backColor = 'blue';
// var range = new GC.Spread.Sheets.Range(0, 0, 1, 1);
// this.sheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.readonly, style);

复制代码

也就是说，通过监听单元格，判断 cancel 为true 的方式可以达到禁用单元格的效果，但貌似该方式下，readonly 不生效。

Ellia.Duan · Ellia.Duan

不好意思，关于第二个问题，我给您提供了两种方案，
第一种是表单保护的方案：即设置locked后，设置sheet.options.isProtected = true; 此种方案可以设置单元格状态（readonly）
第二种方案是针对您的第一个问题，使用事件监听设置单元格是否编辑，此时由于没有设置表单保护，所以单元格状态的方案不可用。

image.png374512633.png

卑微的打工狗 · 卑微的打工狗

本帖最后由卑微的打工狗于 2024-6-6 18:07 编辑

Ellia.Duan 发表于 2024-6-6 17:42
不好意思，关于第二个问题，我给您提供了两种方案，
第一种是表单保护的方案：即设置locked后，设置sheet. ...

了解了您的意思，但我发现一个奇奇怪怪的问题；

首先我在刚进入的 designerInitialized 回调方法中使用 sheet.options.isProtected = true; 保护表单，然后根据需求，把所有的单元格进行 locked 进行false处理。

<span style="color: rgb(81, 81, 81); background-color: rgb(255, 255, 255);">sheet.options.isProtected = true; </span>

复制代码

然后再添加右键的方法中，使用如下所示代码，进行部分 locked 为 true

let designerConfig = GC.Spread.Sheets.Designer.DefaultConfig;
designerConfig.commandMap["disableCell"] = {
text: "设置为只读",
commandName: "disableCell",
execute: () => {
var selections = this.sheet.getSelections()[0];
if (this.sheet.getCell(selections.row, selections.col).locked() == true) {
console.log('取消操作')
this.sheet.getRange(selections.row, selections.col, selections.rowCount, selections.colCount).locked(false);
} else {
console.log('添加操作')
this.sheet.getRange(selections.row, selections.col, selections.rowCount, selections.colCount).locked(true);
var style = new GC.Spread.Sheets.Style();
style.backColor = 'blue';
this.sheet.cellStates.add(selections, GC.Spread.Sheets.CellStatesType.readonly, style);
}
}
};
designerConfig.contextMenu.push("disableCell");