JTable Spring 演示，带数据库集成

Puja Jagani

5.00/5 (2投票s)

2016年7月14日

CPOL

7分钟阅读

16842

JTable Spring 演示，带数据库集成

引言

模型-视图-控制器（MVC）是一种软件架构模式。最初用于桌面计算，近年来已用于开发Web应用程序。（https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller）。

模型- 模型是应用程序交互的数据或对象。

视图- 视图提供了一个交互式用户界面来显示模型提供的数据。

控制器- 控制器是处理视图和模型组件之间交互的模块。它处理用户请求，调用适当的模型，并将要渲染的数据发送到视图以显示给用户。

Java Spring MVC框架有助于使用MVC架构开发松耦合的应用程序。可以通过本教程了解和设置基本的Spring MVC框架：https://tutorialspoint.org.cn/spring/spring_web_mvc_framework.htm

大多数应用程序都需要数据库访问。大多数应用程序都提供用户界面，允许用户添加、删除和更新数据。jTable提供了一个jQuery插件来创建交互式表格，这些表格允许添加、删除和更新数据的相同功能。它还有许多功能，如：分页、排序、在对话框中创建或编辑记录、主/子表等。

请参阅http://jtable.org/的详细文档。

本文的目的是展示如何在Java Spring中轻松地集成jTable。

模型

两个基本类是Student和City。Student类代表Student数据库表中的一条记录，City类代表City数据库表中的一条记录。学生居住在一个城市，并为学生提供一个城市列表供其选择。Student表具有CityId，这是City表中的Id。

Student类如下所示：

public class Student {
    public int id;

    @NotNull
    @Size(min = 2, max = 30)
    public String name;

    @NotNull
    @Email
    public String email;

    @NotNull
    public String password;

    @NotNull
    public String gender;

    @NotNull
    public int city_id;

    @NotNull
    @DateTimeFormat(pattern = BaseController.DATE_FORMAT)
    @JsonSerialize(using = JsonDateSerializer.class)
    public Date birth_date;

    @NotNull
    public int education;

    public String about;

    @NotNull
    public String active_flg;

    @DateTimeFormat(pattern = BaseController.DATE_FORMAT)
    @JsonSerialize(using = JsonDateSerializer.class)
    public Date record_date;

City类如下所示：

public class City {
    public int id;

    @NotNull
    public String name;

类似地，为以下内容创建了类：

StudentResults，字段为id、student_id、course_name、exam_date、degree。
StudentPhone，字段为id、student_id、phone_type、phone_number、record_date。
Course，字段为id、name。

所有类都添加了getter和setter方法。jTable允许主/子表（http://jtable.org/Demo/MasterChild）。StudentPhone和StudentResults被定义为子表。

控制器 (Controller)

模型中的每个类都有一个对应的控制器。控制器定义了列出、删除和保存记录的方法。这些方法调用模型中定义的用于数据库访问的方法。返回的结果提供给视图进行显示。

Student控制器

列表方法

public JTableResult List(JTableRequest jTableRequest) {
        JTableResult rslt = new JTableResult();
        try {
            JdbcTemplate jdbcTemplate = getJdbcTemplate();
            return Student.retrievePage(jdbcTemplate, jTableRequest);
        } catch (Exception ex) {
            rslt.Result = "Error";
            rslt.Message = ex.getMessage();
            return rslt;
        }
    }

RetrievePage方法将根据分页和排序参数返回记录。

Save Method

public JTableResult Save(HttpServletRequest request, @Valid Student student, BindingResult bindingResult) {
    JTableResult rslt = new JTableResult();
    if (bindingResult.hasErrors()) return toError(bindingResult);
    int action = Integer.parseInt(request.getParameter("action"));
    if (student.active_flg == null) student.active_flg = "N";
    try {
        JdbcTemplate jdbcTemplate = getJdbcTemplate();
        if (action == 1) student.insert(jdbcTemplate);
        else student.update(jdbcTemplate);
        student = Student.retrieveById(jdbcTemplate, student.id);
        rslt.Result = "OK";
        rslt.Record = student;
        return rslt;
    } catch (Throwable ex) {
        rslt.Result = "Error";
        rslt.Message = ex.getMessage();
        return rslt;
   }
}

Save方法根据传递的action参数值调用Student.java类的insert或update方法。数据类型错误处理（稍后解释）也在此部分处理。

DELETE 方法

public JTableResult Delete(int id) {
    JTableResult rslt = new JTableResult();
    try {
        JdbcTemplate jdbcTemplate = getJdbcTemplate();
        Student.delete(jdbcTemplate, id);
        rslt.Result = "OK";
        return rslt;
    } catch (Exception ex) {
        rslt.Result = "Error";
        rslt.Message = ex.getMessage();
        return rslt;
    }
}

调用Student.java类的Delete方法，它会删除特定学生id的学生记录。

类似地，创建了以下控制器：

CityController、CourseController、StudentResultController、StudentPhoneController.

jTable期望数据采用特定的格式。为了实现这一点，创建了JTableResult.java和JTableResponse.java，其中包含预期的字段。这些字段根据jTable的要求设置。

下拉列表选项

jTable支持select、radio button、checkbox的代码值对数据。

例如：options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' }

（请参阅- http://jtable.org/ApiReference/FieldOptions#fopt-options）

对于我们的Student示例，我们有City和Course作为select下拉列表。城市和课程列表的键值对使用HashMap存储（City.java和Course.java中的retrieveAll方法）。Spring负责正确地进行转换。

视图

JavaScriptAndCSS.jsp包含了所有必需的jTable和jQuery UI脚本。它还定义了一个菜单，允许用户选择要查看的数据库。

Student.jsp包含了JavaScriptAndCSS.jsp文件，并获取了城市和课程的选项。

var JTableInfo =
       {
           title: 'The Student List',
           paging: true,
           pageSize: 10,
           sorting: true,
           defaultSorting: 'name ASC',
           actions: {
               listAction: 'Student/List',
               createAction: 'Student/Save?action=1',
               updateAction: 'Student/Save?action=2',
               deleteAction: 'Student/Delete'
           },
           fields: {
               id: {
                   key: true,
                   create: false,
                   edit: false,
                   list: false
               },
               phones: {
                   title: '',
                   width: '2%',
                   sorting: false,
                   edit: false,
                   create: false,
                   display: studentPhone
               },                             
               password: {
                   title: 'User Password',
                   type: 'password',
                   list: false
               },
               gender: {
                   title: 'Gender',
                   width: '13%',
                   options: { 'M': 'Male', 'F': 'Female' }
               },
               city_id: {
                   title: 'City',
                   width: '12%',
                   options: cities
               },
               birth_date: {
                   title: 'Birth date',
                   width: '15%',
                   type: 'date',
               }
            }
       }

    $('#JTable').jtable(JTableInfo);
    $('#JTable').jtable('load');
});

JTableInfo设置表格的标题、记录的操作以及数据库中记录的字段。

每个字段都有一组关于该字段行为的属性。上面的代码片段显示了Student表的选定字段（请参阅Student.jsp以获取完整代码）。类似地，为City和Course创建了City.jsp和Course.jsp视图。

要显示子表（StudentPhone和StudentResult），在Student.jsp中定义了studentPhone()和studentResult()函数。有关详细信息，请参阅http://jtable.org/Demo/MasterChild。

表单验证

表单验证通过使用注解完成。

必填字段 - @NotNull注解表示一个必需字段。
字段大小 - @Size注解用于设置最小和最大大小要求。
电子邮件字段 - @Email是Hibernate-Validator注解，用于验证电子邮件字段。

空字符串作为null - 我们希望将来自浏览器的所有空字符串转换为null。Spring支持（https://docs.springframework.org.cn/spring/docs/current/spring-framework-reference/htmlsingle/#mvc-ann-webdatabinder）用于转换的绑定器。

请参阅BaseController中的initBinder方法。数据类型错误处理注解@Valid以及BindingResult将处理数据类型错误。例如：（在StudentController.java中）

@ResponseBody
@RequestMapping(value = "Save")
public JTableResult Save(HttpServletRequest request, @Valid Student student, BindingResult bindingResult)

BindingResult是Spring中保存验证结果的对象。如果在验证过程中发生任何错误，它们将存储在BindingResult中。

处理日期格式

1. 从控制器到jTable的日期

jTable期望给定的日期字符串格式化为以下样本之一：

Date(1320259705710)
2011-01-01 20:32:42 (YYYY-MM-DD HH:MM:SS)
2011-01-01 (YYYY-MM-DD)

我使用了第一种格式。Class JsonDateSerializer将日期字符串转换为选定的格式（第一种）。Student.java中日期字段的@JsonSerialize(using = JsonDateSerializer.class)注解将有助于实现这一点。

2. 从jTable到控制器的日期jTable使用jquery UI日期选择器日期格式。有关有效日期格式，请参阅https://jqueryui-api.jqueryjs.cn/datepicker/中的$.datepicker.formatDate( format, date, options )部分。我在示例中使用了dd/mm/yy日期格式。jTable的默认dateFormat在JavaScriptAndCSS.jsp中设置。Java对应的日期格式是dd/MM/yyyy。@DateTimeFormat(pattern = BaseController.DATE_FORMAT)注解将日期格式设置为dd/MM/yyyy。

BaseController.DATE_FORMAT访问BaseController中定义的DATE_FORMAT变量。

主题

jTable支持内置主题以及jQuery UI主题。我只使用了jQuery UI主题。为此，在JavaScriptAndCSS.jsp中将jqueryuiTheme设置为true。

获取jQuery UI主题（例如：blitzer主题）

从https://jqueryui.jqueryjs.cn/themeroller/下载所需的主题。
打开zip文件夹，然后进入images文件夹。
将images文件夹中的所有图像复制到项目中的web/css/images文件夹。
将jquery-ui.theme.css文件复制为web/css文件夹中的jquery-ui.blitzer.css。
将blitzer替换为您下载的主题名称。
然后，在JavaScriptAndCSS.jsp中进行如下修改：

<link rel="stylesheet" type="text/css" href="../css/jquery-ui.blitzer.css" />

数据库访问设置

项目数据库访问设置在ProjectJDBC.xml中完成。HSQLDB因其易用性而被选为演示。name属性为”url”的property的value属性设置为数据库在不存在时将被创建的路径。

<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
    <property name="driverClassName" value="org.hsqldb.jdbcDriver"/>
    <property name="url" value="jdbc:hsqldb:file:C:\DB\StudentDB;shutdown=true;hsqldb.default_table_type=cached;sql.enforce_strict_size=false"/>
    <property name="username" value="sa"/>
    <property name="password" value=""/>
</bean>

ProjectDAO.java和ProjectJDBC.java用于在SpringJava中设置数据库访问。BaseController中的getJdbcTemplate()方法用于返回jdbcTemplate。有关详细信息，请参阅

https://docs.springframework.org.cn/spring/docs/current/spring-framework-reference/html/jdbc.html .

主菜单中的“数据库设置”按钮调用DataBaseSetupController。定义DataBaseSetupController以创建表并插入记录。每次单击该按钮时，数据库都会填充种子记录，以便用户开始使用。

KeyHolder

Create table语句定义了每个表自增ID作为主键。每次插入记录时，id值会增加1。为了获取生成的id值，在每个模型类的insert()函数中使用KeyHolder。

KeyHolder holder = new GeneratedKeyHolder();
jdbcTemplate.update(psc, holder);
id = holder.getKey().intValue()

JdbcTemplate jdbcTemplate = getJdbcTemplate();
if (action == 1) student.insert(jdbcTemplate);
else student.update(jdbcTemplate);
student = Student.retrieveById(jdbcTemplate, student.id);
rslt.Result = "OK";
rslt.Record = student;
return rslt

上面的代码片段是StudentController.java的Save()函数的一部分。Student.retrieveById用于获取记录，并根据jTable的要求将其提供给.Record参数。因此，KeyHolder会给出生成的id，在insert操作的情况下，该id会作为参数传递给retrieveById()。

构件

我使用IntelliJ IDEA 2016.1.1进行演示。要正确部署代码，请确保正确执行以下步骤：

从工具栏中选择“项目结构”图标。
转到“工件”选项卡。
将“输出目录”路径更改为适当的路径。

使用其他数据库

为了使用其他数据库，数据库访问设置部分将根据所选数据库的语法进行更改，并且每个模型类中的CREATE TABLE语句也会相应更改。

源代码

源代码可在 https://github.com/pujagani/JTableSpringDemo 获取

JTable Spring 演示，带数据库集成

目录

引言

模型

控制器 (Controller)

下拉列表选项

视图

表单验证

处理日期格式

主题

数据库访问设置

KeyHolder

构件

使用其他数据库

源代码