开发者社区> ibelieve001> 正文

填报表中也可以添加 html 事件

简介: 填报,HTML事件,自定义js
+关注继续查看

在实际的项目开发中,填报表的应用十分广泛。
多数情况下,填报表会作为整个项目的一部分配合需求灵活使用,但有时也会受大项目环境的影响,产生一些特别的要求。比如,通常报表单元格的数据类型大多是文本,有时却需要借助 HTML 或者 JavaScript 实现一些交互效果,例如在报表中添加一些说明性的提示、自定义功能性按钮等。显然,单纯的文本数据类型不支持这种交互操作,那么我们就会想填报表是不是能够支持 HTML 数据类型的用法呢?如果支持又该怎么使用呢?
答案肯定是支持的(你懂得),下面我们就举个栗子:
实例一要求
报表中增加说明提示框,供填报表格参考。
下面以报表工具自带报表 2.2.sht 为例,看一下如何应用 HTML。
实例报表如下:
1

要求效果:报表右上角定义按钮,点击按钮后弹出说明信息。
具体实现:

  1. 在当前报表的基础上新增行,如下:
    2
  2. 填报表展现页面(此实例为:previewInput.jsp)中,定义 String sgid=""; 且将 String sgid = InputTag.getInputId(); 修改为 sgid = InputTag.getInputId();,如下:
    3

最后在 jsp 末尾的标签内添加 js 方法代码如下:
4

其中:
abc() 方法 指定具体的弹出信息及方式;
cell 变量 获取触发 abc()方法的单元格,并通过 $(cell).html() 定义具体的 html 事件。
效果:(动图)
5

实例二要求
在行式填报表单元格中自定义按钮,点击后可以插入行。
这里之所以不直接应用自带的工具条按钮,是因为报表应用与项目集成后会屏蔽应用自带的工具条。
这里还是以报表工具自带报表 2.2.sht 为例,演示一下怎么在报表中调用报表工具内置的方法。
具体实现

明确报表中需要自定义的按钮所要执行的操作;

这里以自定义插入行为例。

找出对应的方法;

插入行:_insertRow()删除行: _deleteRow() 追加行: _appendRow()
导出 excel: _inputDownloadExcel()导入 excel: _inputLoadExcelData()
因版本差异具体参考 inputtoolbar.jsp

参照实例一修改 $(cell).html() 中具体触发的方法,如下:
6

效果:(动图)
7

温馨提示

  1. Jsp 中 39 行的部分必须重定义变量 String sgid=""; 且将 String sgid = InputTag.getInputId(); 修改为 sgid = InputTag.getInputId(); 否则报表展现会出现类似如下报错:
    8
  2. $(cell).html() 中涉及多组单引号和双引号时,注意使用转移符 以保证 js 正确解析。
    课外知识扩充:

文本类型是单元格默认的数据类型,我们在报表单元格里使用最多的就是这种类型。如果单元格的类型为“文本”,系统就把单元格中的字符、数字或表达式的计算结果都当成文本来处理。
HTML** 类型是超文本标记语言,一个 HTML 文件不仅包含文本内容,还包含一些标记。 如果报表中需要用到一些标记,但单元格不支持这种标记,这时就可以把单元格的类型设置为“html”类型,在单元格中嵌入 html 标记,通过 html 类型可以在单元格中显示单元格本身不支持的标记信息。html 类型还有一个用途是可以在单元格中嵌入隐藏的 javascript 函数,如果报表中多处都用到同一个 js 函数,我们可以把一个隐藏单元格设置为 html 类型,在此单元格中定义 js 函数,供其他单元格引用,这样就可以给用户的报表设计带来很大方便。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《JavaScript设计模式》——1.10 可以链式添加吗
本节书摘来自异步社区《JavaScript设计模式》一书中的第1章,第1.10节,作者:张容铭著,更多章节内容可以访问云栖社区“异步社区”公众号查看
1002 0
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
57 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25230 0
WPF 为资源字典 添加事件响应的后台类
原文:WPF 为资源字典 添加事件响应的后台类 前言,有许多同学在写WPF程序时在资源字典里加入了其它控件,但又想写事件来控制这个控件,但是资源字典没有CS文件,不像窗体XAML还有一个后台的CS文件,怎么办呢? 在工作时也遇到了这个问题,现在把它分享出来 比如说我们现在要写一个TabControl控件,在TabItem中有一个关闭按钮或其它按钮,这个按钮要能响应某个事件。
1188 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20690 0
如何在个人博客引擎 Hexo 中添加 Swiftype 搜索组件
在您现在看到的我的博客站点,后台使用的是 Hexo 作为博客引擎,但是默认集成的搜索组件是进行 form 提交到 Google 进行搜索的,为了更好地体验,本文介绍如何在 Hexo 博客中集成 Swiftype 搜索组件。
1359 0
+关注
83
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载