当前位置:首页 >  科技 >  互联网 >  正文

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

 2018-10-16 14:17  来源: 互联网   我来投稿 撤稿纠错

  阿里云优惠券 先领券再下单

安装部署:

开发环境:

后台服务器端采用 Java 、SpringMVC。

数据存储到 \demo_web\WEB-INF\FileDatabase.txt 文件中,不需要依赖DB。

采用 Eclipse Java EE IDE for Web Developers,Eclipse Version: Photon Release (4.8.0)。

服务器: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 访问主页。

创建模板:

创建模板分为三种模板类型:表单绑定、单元格绑定、表格绑定。

demo_web 压缩包中还包含了三个模板 SSJSON 文件:表单绑定示例、单元格绑定示例以及表格绑定示例,可供用户进行创建模板的操作。

表单绑定预览区域说明:如果选择模板类型下拉菜单,预览区域会随模板类型不同而发生变化,单元格绑定和表格绑定只有 ssjson 模板预览一个区域。如图:

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

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

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

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

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

管理模板:

管理模板列表中展示了系统中已创建的模板信息。

点击对应模板的下载按钮,可以下载该模板的ssjson文件,可以直接导入至SpreadJS 设计器中进行修改。

点击对应模板的填报按钮,可以进入表格填报页面。

填报:

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

图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 地址:https://demo.grapecity.com.cn/SpreadJS/Java/demo_web.zip

关于葡萄城(https://www.grapecity.com.cn/)

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

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
软件开发
java开发

相关文章

  • 远光软件出席央国企智慧司库建设实践论坛

    3月16日,由中国总会计师协会指导,中国总会计师协会信息化分会主办的“央国企智慧司库建设实践论坛”在北京召开。远光软件集团客户事业部总经理原娟娟受邀出席论坛,作《数智司库赋能管理创造价值》主题演讲,分享远光软件在央国企集团司库建设上的前沿探索与创新实践。2022年初,国务院国资委制定发布了《关于推动

    标签:
    软件开发
  • 再次上榜!麒麟软件荣获“中国年度最佳雇主-天津最佳雇主”

    近日,“出发!职场多元宇宙”2022中国年度最佳雇主颁奖盛典-天津站成功举办。麒麟软件凭借在人才培养与发展等方面的突出表现荣获“2022中国年度最佳雇主-天津最佳雇主”奖项。本次获评,是麒麟软件2021年度获得“年度最佳雇主-最具智造精神雇主”后再次荣登最佳雇主奖项榜单,是评委会对麒麟软件通过卓越的

    标签:
    软件开发
  • 国际认可 东软通过ISO 26262功能安全管理体系最高等级认证

    近日,东软集团正式通过ISO26262功能安全管理体系ASILD等级认证,获得由国际独立第三方检测、检验和认证机构德国莱茵TÜV颁发的认证证书,标志着东软在汽车电子领域的功能安全管理过程、系统开发流程、硬件开发流程、软件开发流程、支持过程、ASIL的功能安全分析等方面获得国际最高等级的权威认可。IS

    标签:
    软件开发
  • 东软集团与盛京金控集团联合成立健康医疗数据公司

    近日,由东软集团与盛京金控集团联合组建的“沈阳健康医疗数据有限公司”正式成立。该公司将秉承“政府授权、国有控股、企业运营”的原则,旨在通过互联网、大数据、人工智能等新一代信息技术和平台的连接,充分释放健康医疗数据要素的价值,支撑健康医疗服务产业数字化和数字产业化进程,催生相关产业新经济形态。

    标签:
    软件开发
  • 超150万生态支撑,麒麟软件推动重点行业解决方案落地

    2022年10月,党的二十大报告多次提及信息安全问题,强调健全新型举国体制,强化国家战略科技力量,提升国家创新体系整体效能。不久前发布的“数据二十条”探索并构建了数据产权、流通交易、收益分配、安全治理等四项制度。

    标签:
    软件开发

热门排行

信息推荐