SpreadJS实现RadioButton单元格,用户可以通过点击选择数据。

7701.tmp

 

代码比较多这里就不一一粘贴了,大家可以直接去RunJS上查看 http://runjs.cn/detail/evyclttm

在示例中我们为CellType添加了size,isHorizontal和items三个属性,分别设置Radio的大小行高、排列方式以及数据项。

_getPaintStartX和_getPaintStartY用于获取单元格在不同的排列方式下开始绘制的位置。在绘制过程中我们需要考虑到页面缩放对绘制的影响,

在paint中,我们将item的宽度等信息进行缓存,当getHitInfo时可以快速根据鼠标位置取得点击的item。

由于RadioButtonCellType的操作完全由鼠标完成,所以这里不需要实现createEditorElement方法去创建一个dom元素来进行操作。

实现Radio Button的难点在于不同排列方式下和不同缩放等级下的图形文字绘制,其他都和我们之前讲到celltype相同。

下一篇博客我将继续实现CustomCellType的其他方法,是我们的CellType更加完善。


更多资源

SpreadJS中文学习指南:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档:http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣,可以到官方网站下载试用:/developer/spreadjs

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn