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

安装部署:

<李>

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

<李>

数据存储到,文件中,不需要依赖DB。

<李>

采用Eclipse IDE对Web开发人员来说,Java EE Eclipse版本:光子释放(4.8.0)。

<李>

服务器:tomcat-7.0.90。

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

您可直接解压到Eclipse的工作空间下,导入现有项目进入工作区工程即可。

部署方法:

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

操作步骤:

在本机部署时,可以通过,访问主页。

<李>

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

<李>

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

<李>

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

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

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

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

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

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

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

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

<李>

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

<李>

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

<李>

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

<李>

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

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

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

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

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

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

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

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

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

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

如图:

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

图5:填报历史数据页面

QA:

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

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

,您可以将单元格绑定模板示例。ssjson导入到设计器中查看,绑定数据源对应的字段名是以(领域)的方式定义在对应的单元格中。

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