找回密码
 立即注册

QQ登录

只需一步,快速开始

阿达西

注册会员

2

主题

6

帖子

24

积分

注册会员

积分
24
  • 106

    金币

  • 2

    主题

  • 6

    帖子

最新发帖
阿达西
注册会员   /  发表于:2024-11-13 14:40  /   查看:130  /  回复:8
1金币
本帖最后由 阿达西 于 2024-11-13 15:29 编辑

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

8 个回复

倒序浏览
Wilson.Zhang
超级版主   /  发表于:2024-11-14 09:10:51
沙发
您好!Worksheet:setCellType()的参数列表最后一个参数表示了表单区域,如下图所示,默认为viewport,即普通单元格。
1731546512588.png60152586.png

可以将sheetArea参数设置为colHeader,可以参考如下代码,效果如下图所示:
  1. var checkBoxType = new GC.Spread.Sheets.CellTypes.CheckBox();
  2. sheet.setCellType(0, 0, checkBoxType, GC.Spread.Sheets.SheetArea.colHeader);
复制代码

1731546609100.png986253356.png
回复 使用道具 举报
阿达西
注册会员   /  发表于:7 天前
板凳
本帖最后由 阿达西 于 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
回复 使用道具 举报
阿达西
注册会员   /  发表于:7 天前
地板
本帖最后由 阿达西 于 2024-11-15 15:10 编辑

image.png31783141.png
就是想要实现这种效果
回复 使用道具 举报
Wilson.Zhang
超级版主   /  发表于:7 天前
5#
阿达西 发表于 2024-11-15 14:55
就是想要实现这种效果

您好!逐一解答您关心的问题:

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

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

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

问题4:您需要所谓的rowId做什么呢?可以尝试下自定义单元格类型实现。
回复 使用道具 举报
阿达西
注册会员   /  发表于:4 天前
6#
本帖最后由 阿达西 于 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获取勾选行的数据
回复 使用道具 举报
阿达西
注册会员   /  发表于:4 天前
7#
本帖最后由 阿达西 于 2024-11-18 16:30 编辑

问题1处理了,通过重写实现的。参考这个实现的https://jscodemine.grapecity.com/share/peTXcmedK0iiMEqv6UBCUg/
回复 使用道具 举报
Wilson.Zhang
超级版主   /  发表于:4 天前
8#
本帖最后由 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
超级版主   /  发表于:4 天前
9#
阿达西 发表于 2024-11-18 15:42
问题2处理了,通过重写实现的。参考这个实现的https://jscodemine.grapecity.com/share/peTXcmedK0iiMEqv6U ...



也是个好方法!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部