【15.1.3】行表头如何实现为复选框

Wilson.Zhang

本帖最后由阿达西于 2024-11-13 15:29 编辑

在其他帖子中看到这个效果，请教一下如何在SpreadJS的表格中第一列（行表头）实现为复选框，同时还想要自定义复选框的样式
image.png663947448.png

Wilson.Zhang · Wilson.Zhang

阿达西发表于 2024-11-27 09:49
问题1有没有办法可以阻止表角的默认行为，如果通过Worksheet:clearSelection()取消全选，会出现先全选然 ...

可以监听SelectionChanging事件，当点击表角时会选中整张sheet，该事件可以监听到被选择的区域，包含起始行列索引、行列数量等信息，在此行列索引均为-1，代表所有行列，可以据此判断事件响应时被点击的区域是表角，随后清除选择区域即可。可以参考如下代码：

sheet.bind(GC.Spread.Sheets.Events.SelectionChanging, function(e, args) {
console.log('selection changing, args: ', args);
var newSelection = args.newSelections;
if (newSelection && newSelection.length > 0) {
newSelection.forEach(selection => {
// 判断所选区域是否为整张sheet，如果是可以认为被点击的区域是表角
if (selection.row === -1 && selection.col === -1) {
console.log('不予全选');
sheet.clearSelection();
}
});
}
});

复制代码

上述代码运行如下动图所示，点击表角不再选中整张sheet：
表角点击不选择区域.gif

Wilson.Zhang · Wilson.Zhang

您好！Worksheet:setCellType()的参数列表最后一个参数表示了表单区域，如下图所示，默认为viewport，即普通单元格。
1731546512588.png60152586.png

可以将sheetArea参数设置为colHeader，可以参考如下代码，效果如下图所示：

var checkBoxType = new GC.Spread.Sheets.CellTypes.CheckBox();
sheet.setCellType(0, 0, checkBoxType, GC.Spread.Sheets.SheetArea.colHeader);

复制代码

阿达西 · 阿达西

本帖最后由阿达西于 2024-11-15 15:10 编辑

Wilson.Zhang 发表于 2024-11-14 09:10
您好！Worksheet:setCellType()的参数列表最后一个参数表示了表单区域，如下图所示，默认为viewport，即普 ...

您好，还有四个问题，辛苦指导一下。第一张截图为实现的代码
image.png206924437.png

1、截图中左上角怎么添加勾选全部的复选框（除了新增列，有没有直接修改表头的方法）
image.png876310424.png

2、点击复选框后，复选框没有没有改变勾选状态
image.png32870787.png

3、想要自定义复选框的三种状态：未勾选、已勾选、未全部勾选应该如何实现

4、复选框如何和自己的数据绑定，比如绑定每一行数据的rowId

阿达西 · 阿达西

本帖最后由阿达西于 2024-11-15 15:10 编辑

image.png31783141.png

就是想要实现这种效果

Wilson.Zhang · Wilson.Zhang

阿达西发表于 2024-11-15 14:55
就是想要实现这种效果

您好！逐一解答您关心的问题：

问题1：对Worksheet监听CellDoubleClick事件，双击单元格可触发该事件，由于您设置的位置是行头和列头，双击可勾选和去勾选行头和列头的复选框。该事件被触发时，可以监听到被点击的单元格区域，您希望通过点击控制的位置是表角（corner），事件监听参数args.sheetArea对应为0，由此判断表角被双击了，即可一键控制行头中的复选框的勾选和去勾选状态。

问题2：双击行头和列头的复选框可勾选和去勾选。

问题3：SpreadJS原生支持的复选框即可支持设置未勾选、已勾选、不确定，您看这个是否能够满足您的需求。理解您是想将表角处的复选框设置“未全部勾选”状态吧？那您可以看看原生是否能够满足需求，如果不行，那就自定义单元格类型实现。

问题4：您需要所谓的rowId做什么呢？可以尝试下自定义单元格类型实现。

阿达西 · 阿达西

本帖最后由阿达西于 2024-11-18 15:15 编辑

Wilson.Zhang 发表于 2024-11-15 17:15
您好！逐一解答您关心的问题：

问题1：对Worksheet监听CellDoubleClick事件，双击单元格可触发该事件 ...

您好，继续请教一下问题。第一张截图是我的代码实现复选框的代码
image.png724946288.png

问题1：如何把表角修改为勾选全部的复选框？首先需要修改为复选框的样式，这个代码是真不知道该怎么写[笑哭]
问题2：目前这段代码单击和双击复选框，复选框的状态都不会改变，以下截图为控制台输出
image.png892504272.png

问题3：复选框想要绑定rowId，和数据绑定，比如勾选了某一行数据，进行操作时，可以通过rowId获取勾选行的数据

阿达西 · 阿达西

本帖最后由阿达西于 2024-11-18 16:30 编辑

问题1处理了，通过重写实现的。参考这个实现的https://jscodemine.grapecity.com/share/peTXcmedK0iiMEqv6UBCUg/

Wilson.Zhang · Wilson.Zhang

本帖最后由 Wilson.Zhang 于 2024-11-18 16:34 编辑

阿达西发表于 2024-11-18 14:58
您好，继续请教一下问题。第一张截图是我的代码实现复选框的代码

问题1：通过表角一键为行头所有复选框设置相同的状态，无外乎两种情况：其一是所有复选框均被选中，那么此时表角被点击后所有复选框的状态应该均被设置为”未选择“；其二是有部分复选框未被选中，此时点击表角希望可以选择所有复选框。那么，可以在表角被双击时，遍历行头所有复选框的值，以此判断。只要遇到”未选择“复选框，即返回false，否则返回true，设置值时对判断结果取反即可。

如下动图所示：
点击表角设置行头复选框状态.gif

可参考如下图所示代码：
一键控制行头.png698933410.png

问题2：与问题1相同，请参见对问题1的回答所述。

问题3：获取某行数据的关键是知悉该行索引，CellDoubleClick事件即可监听被点击的行头复选框的行索引，通过该行索引即可逐个获取行内各单元格的数据。

如上所述，您可以亲测下看是否能够满足您的需求。

Wilson.Zhang · Wilson.Zhang

阿达西发表于 2024-11-18 15:42
问题2处理了，通过重写实现的。参考这个实现的https://jscodemine.grapecity.com/share/peTXcmedK0iiMEqv6U ...

也是个好方法！

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

[已处理] 【15.1.3】行表头如何实现为复选框

最佳答案

15 个回复