纯前端表格控件SpreadJS与Java结合,实现模板上传和下载等功能

安装部署:

开发环境:

  1. 后台服务器端采用 Java 、SpringMVC。
  2. 数据存储到 \demo_web\WEB-INF\FileDatabase.txt 文件中,不需要依赖DB。
  3. 采用 Eclipse Java EE IDE for Web Developers,Eclipse Version: Photon Release (4.8.0)。
  4. 服务器:tomcat-7.0.90。

工程导入eclipse:

demo_web.zip 是直接将 eclipse 工程打成的压缩包。

您可直接解压到 eclipse 的 workspace 下,导入 Existing Projects into Workspace 工程即可。

部署方法:

配置 tomcat 与 eclipse 关联,将工程 add 进 tomcat 应用列表,启动 tomcat 即可。

操作步骤:

访问:

在本机部署时,可以通过 http://127.0.0.1:8080/demo_web/view?path=index 访问主页。

创建模板:

  1. 创建模板分为三种模板类型:表单绑定、单元格绑定、表格绑定。
  2. demo_web 压缩包中还包含了三个模板 SSJSON 文件:表单绑定示例、单元格绑定示例以及表格绑定示例,可供用户进行创建模板的操作。
  3. 表单绑定预览区域说明:如果选择模板类型下拉菜单,预览区域会随模板类型不同而发生变化,单元格绑定和表格绑定只有 ssjson 模板预览一个区域。如图:

图1:创建表单绑定模板页面

4.表单模板上传成功后,预览页面的效果如下图:

图2:上传表单绑定模板后的预览效果

5.如果需要上传单元格绑定模板或者表格绑定模板,需要先点击“类型” 下拉菜单,选中对应类型后再执行上传操作。

6.在上传完模板并填写完模板基本信息后,点击保存按钮即可。

管理模板:

  1. 管理模板列表中展示了系统中已创建的模板信息。
  2. 点击对应模板的下载按钮,可以下载该模板的ssjson文件,可以直接导入至SpreadJS 设计器中进行修改。
  3. 点击对应模板的填报按钮,可以进入表格填报页面。

填报:

  1. 以表单绑定模板为例,如图所示:

图3:表单绑定模板填报页面示例

    2.新建:重新载入当前模板,不保留已经填写的所有数据。

    3.新行:为填报数据添加一个新行,对应绑定的dataSource多一个数据元素(单元格绑定模板无此按钮)。

    4.保存:将填报数据保存到后台文件中。

    5.历史:当前模板填报提交的历史数据。

历史数据列表:

如图:点击查看可以查询本次填报的历史数据。

图4:填报历史数据列表页面

历史数据:

如图:

图5:填报历史数据页面

QA:

Q:局域网无法访问?

A:此Demo中采用的SpreadJS控件是未授权的,只能在本机操作。

Q:表单绑定模板,怎样自定义绑定字段?

A:您可以将表单绑定模板示例.ssjson导入到设计器中查看,表单绑定模板第一行是dataSource对应的字段名,第二行为展示的字段名,第三行为表格对应的样式。

Q:单元格绑定模板,怎样自定义绑定字段?

A:您可以将单元格绑定模板示例.ssjson导入到设计器中查看,绑定dataSource对应的字段名是以 [field] 的方式定义在对应的单元格中。

Q:表格绑定模板,怎样自定义绑定字段?

A:在表格模板中表头下面的第一行中,可以 [field] 的方式定义列名,在代码中可以创建new GC.Spread.Sheets.Tables.TableColumn() 实例,用以映射列名与绑定字段的关系,具体方法可以参考官网的学习指南中表格绑定的demo,demo地址:https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/demos/tableBinding

本demo中也采用了这个方法。

Q:表格填报时,新行的样式与前面的行不匹配?

A:由于表格的模板设计样式非常灵活多样,因此本demo只采用了复制上一行样式的方式对新行进行设置,具体应用当中可以根据需求自行设置表格样式。

点击此处,免费下载 SpreadJS 结合 Java 使用的 Demo

关于葡萄城

赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

Vue.js 系列教程 3:Vue-cli,生命周期钩子

原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教...

3255
来自专栏从零开始学自动化测试

Selenium2+python自动化33-文件上传(send_keys)

前言 文件上传是web页面上很常见的一个功能,自动化成功中操作起来却不是那么简单。 一般分两个场景:一种是input标签,这种可以用selenium提供的sen...

2899
来自专栏向治洪

React Native调试心得

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2497
来自专栏ytkah

如何复制图文消息封面图片?正文没显示

  最近小美眉又有小烦恼了,她看到别人发的图文消息封面图片很漂亮,但是打开正文却没有显示,是发布者在编辑素材时把【□封面图片显示在正文中】前的勾去掉了。那么如何...

3445
来自专栏Web 开发

新浪SAE伪域名绑定

弄完之后,再到WP4SAE里面把域名设置成自己绑定的那个域名,就实现了伪域名绑定了~

853
来自专栏.Net移动开发

Smobiler 4.4已正式发布!(Smobiler能让你在Visual Studio上开发APP)

Smobiler 4.4已经正式发布,还不快来看看? 原文地址:https://www.smobiler.com/portal.php?mod=view&aid...

6112
来自专栏Bug生活2048

微信小程序版博客——图片相关处理

前面提到,小程序服务端的数据是基于Ghost的公共API的,在设计首页文章列表时,为了美观加上了头图,但是服务端没有提供对应的字段(头图url)。

3502
来自专栏技术小黑屋

Atom订阅转成RSS2.0

Octopress博客自带的只Atom协议的订阅,但是最近提交收录网站时,需要使用RSS协议。于是利用周末简单实现了一下。

1852
来自专栏前端儿

教你如何在React及Redux项目中进行服务端渲染

使用 redux-saga 处理异步action,使用 express 处理页面渲染

3081
来自专栏超然的博客

mpvue-小程序之蹲坑记

mpvue 是兼容微信小程序的生命周期与 vue 的生命周期,vue 实例会接管小程序 Page 实例的生命钩子,因此需要使用到小程序的生命周期钩子时,可将相应...

6232

扫码关注云+社区

领取腾讯云代金券