SpreadJS 中生成可编辑的超链接单元格。

Wijmo Spread JS CellType结构是非常灵活的且易于扩展的,为了将两种CellType结合,我们可以嵌套使用CellType来实现。以下是一个简单的例子,为您描述了如何对 HyperLinkCellType提供编辑功能。

发布于 2014/10/30 00:00

WijmoJS

SpreadJS 已经集成了最新的CellTypes功能,CellTypes使得最终用户输入数据更为方便,且对保证数据完整性是很有帮助的。

已经集成的配套的 CellTypes,仅能执行动作,并不能进行数据输入,例如ButtonCellType 和HyperLinkCellType。当最终用户执行点击操作时,仅触发相应的事件或打开链接地址。因此,一般情况下这些CellTypes是不提供编辑功能的,就意味着用户不能改变单元格中的内容。然而在一些情况下,我们需要可以允许最终用户改变单元格中的超链接,且能够链接到目标地址。我们该如何做?如果将HyperLinkCellType 和 TextCellType两者的特征结合,我们就会得到想要的解决方案。将HyperLinkCellType和TextCellType 结合形成超级CellType就能解决我们的需求。

Spread JS CellType结构是非常灵活的且易于扩展的,为了将两种CellType结合,我们可以嵌套使用CellType来实现。以下是一个简单的例子,为您描述了如何对 HyperLinkCellType提供编辑功能。

1.首先,我们新建一个CellType,命名为“EditableHyperLinkCellType”,并继承 HyperLinkCellType类。因此该 CellType继承了父类的所有功能特征。代码如下:

function EditableHyperLinkCellType() {}

EditableHyperLinkCellType.prototype = new ns.HyperLinkCellType();

我们希望当用户点击单元格空白区域时能够显示一个 TextBox供用户输入,因此需要改变 CellType的编辑器,HyperLinkCellType原型提供了一些与编辑器相关的功能函数如:

createEditorElement, activateEditor, updateEditor, deactivateEditor, getEditorValue, setEditorValue。我们在这里就不一一介绍了。您可以从 SpreadJS文档中获得更多关于 BaseCellType的信息。您可能会有疑问:难道为了实现该目标,就需要重写这些函数代码?当然不用,在TextCellType中有现成的代码,您可以直接使用,但是不能从 SpreadJS js文件中直接复制代码,只需要调用这些函数的apply方法。代码如下所示:

clip_image002

这里涉及的SpreadJS “ns”命名空间:“$.wijmo.wijspread”,最后一个步骤,我们需要设置聚焦于TextBox控件,当单元格进入编辑模式时,仅需要重写EditableHyperLinkCellType的focus函数。

然后您可以在SpreadJS单元格中使用新建的CellType,代码如下所示:

clip_image004

在浏览器中打开HTML文件,尝试双击单元格C3的空白区域,您会看到单元格进入编辑模式。当然您也可以改变单元格的超链接内容,快快尝试吧。

WijmoJS | 下载试用

WijmoJS 是一款基于 HTML5 的前端开发工具包,由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成,如表格(Grid)、图表(Chart)、数据分析(Olap)、导航(Navigation)和金融图表等,完美兼容原生 JavaScript,以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

为顺利推进您的产品选型,推荐如下方式,加速产品评估进度:

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

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

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