一个单元格存在多个按钮的点击事件问题

Lynn.Dou

如上图一个单元格存在多个按钮，怎么判断点击了按钮1还是按钮2呢；使用command，是可以获取当前点击的事件，但是反系列化后就不执行了。

Lynn.Dou · Lynn.Dou

前面描述不太准确，已在原回答基础上做了更改。
示例请参考下方链接：
https://gcdn.grapecity.com.cn/fo ... hread&tid=82896

Lynn.Dou · Lynn.Dou

按钮执行的command代码逻辑，是您在设计按钮时就已经设置的，
所以要判断是点击的哪个按钮，可以在command中就定义好，比如用一个变量来控制。
”使用command，是可以获取当前点击的事件，但是反系列化后就不执行了。“
这个如何理解，请结合具体的示例详细描述下。
附件为demo模板，您可以在模板基础上添加自己的代码，需要能复现您描述的问题。

云智装 · 云智装

Lynn.Dou 发表于 2021-11-18 16:45
按钮执行的command代码逻辑，是您在设计按钮时就已经设置的，
所以要判断是点击的哪个按钮，可以在command ...

react 代码

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import GC from '@grapecity/spread-sheets';
import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';
import './styles.css';
const Component = React.Component;
function _getElementById(id) {
return document.getElementById(id);
}
class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.spread2 = null;
this.import_noFormula = false;
this.import_noStyle = false;
this.import_rowHeaders = false;
this.import_columnHeaders = false;
this.import_donotrecalculateafterload = false;
this.noFormula = false;
this.noStyle = false;
this.SaveCustomRowHeaders = false;
this.SaveCustomColumnHeaders = false;
}
onClickType(){
alert(11)
}
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets-container">
<label style={{ font: 'bold 10pt arial' }}>ToJson:</label>
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
<br />
<label style={{ font: 'bold 10pt arial' }}>FromJson:</label>
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread2(spread)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
</div>
<div className="options-container">
<div style={{ width: '290px' }}>
<label>This serializes the first Spread instance to a JSON object, and then deserializes that object into the second Spread instance.</label>
<div className="option-row">
<input type="button" defaultValue="系列化" id="fromtoJsonBtn" onClick={e => this.serialization(e)} />
</div>
</div>
</div>
</div>;
}
initSpread(spread) {
this.spread = spread;
let sheet = spread.getSheet(0);
var spreadNS = GC.Spread.Sheets;
sheet.suspendPaint();
sheet.setColumnWidth(0, 300);
let style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "按钮1",
buttonBackColor: "#82BC11",
command: (sheet, row, col, option) => {
this.onClickType()
}
},
{
caption: "按钮2",
buttonBackColor: "#82BC00",
command: (sheet, row, col, option) => {
this.onClickType()
}
}
];
sheet.setStyle(0, 0, style);
sheet.resumePaint();
}
initSpread2(spread) {
this.spread2 = spread;
}
serialization(e) {
//ToJson
var spread1 = this.spread;
var jsonStr = JSON.stringify(spread1.toJSON());
//FromJson
var spread2 = this.spread2;
spread2.fromJSON(JSON.parse(jsonStr));
}
}
ReactDOM.render(<App />, _getElementById('app'));

复制代码

Lynn.Dou · Lynn.Dou

本帖最后由 Lynn.Dou 于 2021-11-19 09:23 编辑

您cellbutton的command是function，function无法序列化到json中。
如果需要序列化，需要将function内执行的代码逻辑定义给command，
然后将command 的名字string 给cellbutoon，
此时导入json再导入json新的spread中，需要给新spread重新注册command。

云智装 · 云智装

Lynn.Dou 发表于 2021-11-18 17:33
您cellbutton的command是function，function无法序列化到json中。
如果需要序列化，需要将function内执行 ...

不是很明白，能写个例子吗

云智装 · 云智装

Lynn.Dou 发表于 2021-11-19 09:22
前面描述不太准确，已在原回答基础上做了更改。
示例请参考下方链接：
https://gcdn.grapecity.com.cn/fo ...

可以了，谢谢

Lynn.Dou · Lynn.Dou

您客气了，那本帖就先结贴了，有问题欢迎另开新帖交流。

		自动登录	找回密码
密码			立即注册

[已处理] 一个单元格存在多个按钮的点击事件问题

最佳答案

7 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人