SpreadJS自定义单元格系列-RadioButton单元格之一

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

发布于 2016/09/29 00:00

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

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

推荐相关案例
推荐相关资源
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态