Primefaces DataTable

JoinFaces - Primefaces DataTable

官网地址

项目设置

使用的工具:

  • PrimeFaces
  • JoinFaces 3.2.4
  • Spring Boot 2.0.4
  • Spring Data JPA
  • Maven

脚本初始化

info.sql

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
-- ----------------------------
-- Table structure for info
-- ----------------------------
DROP TABLE IF EXISTS `info`;
CREATE TABLE `info` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`title` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`time` datetime(0) NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 14 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of info
-- ----------------------------
INSERT INTO `info` VALUES (1, 'title1', '2018-09-20 02:02:57');
INSERT INTO `info` VALUES (2, 'title2', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (3, 'title3', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (4, 'title4', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (5, 'title5', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (6, 'title66', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (7, 'title7', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (8, 'title8', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (9, 'title9', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (10, 'title10', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (11, 'title11', '2018-09-08 00:00:00');
INSERT INTO `info` VALUES (12, 'title12', '2018-09-08 00:00:00');

添加依赖

pom.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>com.ray</groupId>
<artifactId>primefaces02</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>primefaces02</name>
<description>Demo project for Spring Boot</description>

<parent>
<groupId>org.joinfaces</groupId>
<artifactId>joinfaces-parent</artifactId>
<version>3.2.4</version>
<relativePath/>
</parent>

<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>

<dependencies>
<!-- joinfaces -->
<dependency>
<groupId>org.joinfaces</groupId>
<artifactId>primefaces-spring-boot-starter</artifactId>
</dependency>

<!--Named-->
<dependency>
<groupId>javax.inject</groupId>
<artifactId>javax.inject</artifactId>
<version>1</version>
</dependency>

<!--Theme-->
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>bootstrap</artifactId>
<version>1.0.10</version>
<scope>runtime</scope>
</dependency>

<!--JPA-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>

<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
</dependency>
</dependencies>

<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>

配置文件

application.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jsf:
primefaces:
theme: bootstrap

spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
username: root
password: root
url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8

jpa:
properties:
hibernate:
show-sql: true
format_sql: true
enable_lazy_load_no_trans: true

实体类

Info.java
类注释为@Entity注释,它将类标记为实体类。通常,实体表示关系数据库中的表,每个实体实例对应于该表中的一行。
id用@Id将其标记为主键,@GeneratedValue注释指定将自动生成主键。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
package com.ray.primefaces02.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import java.util.Date;

/**
* @author Ray
* @date 2018/9/8 0008
* 实体类
*/
@Entity(name = "info")
public class Info {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String title;
private Date time;

public Info() {
}

public Info(Integer id, String title, Date time) {
this.id = id;
this.title = title;
this.time = time;
}

public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public Date getTime() {
return time;
}

public void setTime(Date time) {
this.time = time;
}

@Override
public String toString() {
return "Info{" +
"id=" + id +
", title='" + title + '\'' +
", time=" + time +
'}';
}
}

JPA

InfoJPA.java
简单地扩展JpaRepository并将要管理的域类作为类型参数传递给域类的id类型。
@Repository注解是满足存储库的角色或构造型(也称为数据访问对象或DAO)的任何类的标记。它也是@Component注释,这意味着Spring将在执行组件扫描时自动为该类创建Bean。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.ray.primefaces02.jpa;

import com.ray.primefaces02.model.Info;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

/**
* @author Ray
* @date 2018/9/8 0008
*/
@Repository
public interface InfoJPA extends JpaRepository<Info, Integer> {

}

Info 视图

InfoView.java
注意,我们使用@Named而不是@ManagedBean。原因是我们倾向于选择cdi来管理我们的bean

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
package com.ray.primefaces02.view;

import com.ray.primefaces02.jpa.InfoJPA;
import com.ray.primefaces02.model.Info;
import org.springframework.beans.factory.annotation.Autowired;

import javax.inject.Named;
import java.io.Serializable;
import java.util.List;

/**
* @author Ray
* @date 2018/9/8 0008
* 信息表
*/
@Named
public class InfoView implements Serializable {

private static final long serialVersionUID = -814938721259900592L;

@Autowired
private InfoJPA infoJPA;

private List<Info> list;

private Info info;

/**
* 查询所有信息
*/
public List<Info> infoList(){
list = infoJPA.findAll();
return list;
}

/**
* 查询指定 id 信息
*/
public void selectOne(Integer id) {
info = infoJPA.getOne(id);
}

/**
* 更新信息
*/
public void update(Info info)
{
System.out.println(info.getId());
System.out.println(info.getTitle());
System.out.println(info.getTime());
info = infoJPA.save(new Info(info.getId(), info.getTitle(), info.getTime()));
}

/**
* 删除信息
*/
public void delete(Info info){
infoJPA.deleteById(info.getId());
}

/** Getter Setter**/
public List<Info> getList() {
return list;
}

public Info getSelect() {
return info;
}

public void setSelect(Info info) {
this.info = info;
}
}

Info 页面

位置:src/main/webapp/info.xhtml
info.xhtml
在本例中,包含一个<dataTable>元素指定需要使用value属性。
我们使用infoList()在infoView我们将在下面进一步创建托管Bean。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">

<h:head></h:head>

<h:form id="form1">
<p:dataTable var="info" value="#{infoView.infoList()}" id="infoTable" >
<p:column headerText="id">
<h:outputText value="#{info.id}" />
</p:column>

<p:column headerText="title">
<h:outputText value="#{info.title}" />
</p:column>

<p:column headerText="time">
<h:outputText value="#{info.time}">
<f:convertDateTime timeZone="GMT+8" pattern="yyyy-MM-dd HH:mm:ss" locale="zh" />
</h:outputText>
</p:column>

<p:column headerText="Edit">
<p:commandButton value="update">
<p:ajax event="click" listener="#{infoView.selectOne(info.id)}" oncomplete="PF('updateDialog').show()" update=":form4" />
</p:commandButton>
<p:commandButton value="delete">
<p:ajax event="click" listener="#{infoView.selectOne(info.id)}" oncomplete="PF('deleteDialog').show()" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>


<p:dialog header="update" widgetVar="updateDialog" modal="true">
<h:form id="form4">
<h:panelGrid columns="2" cellpadding="5" id="updatePanel">
<p:outputLabel value="id" />
<p:inputText value="#{infoView.select.id}" readonly="true" />

<p:outputLabel value="title" />
<p:inputText value="#{infoView.select.title}" />

<p:outputLabel value="time" />
<p:inputMask value="#{infoView.select.time}" mask="9999-99-99 99:99:99">
<f:convertDateTime timeZone="GMT+8" pattern="yyyy-MM-dd HH:mm:ss" locale="zh" />
</p:inputMask>

<p:commandButton value="confirm" oncomplete="PF('updateDialog').hide()" actionListener="#{infoView.update(infoView.select)}" update=":form1:infoTable" />
</h:panelGrid>
</h:form>
</p:dialog>


<p:dialog header="Are you sure?" widgetVar="deleteDialog" modal="true">
<h:form id="form2">
<h:panelGrid columns="2" cellpadding="5" id="deletePanel">
<f:facet name="facet1">
<p:outputLabel value="Are you sure?" />
</f:facet>

<p:commandButton value="Yes" oncomplete="PF('deleteDialog').hide()" actionListener="#{infoView.delete(infoView.select)}" update=":form1:infoTable" icon="ui-icon-check" />
<p:commandButton value="No" icon="ui-icon-close" oncomplete="PF('deleteDialog').hide()" />
</h:panelGrid>
</h:form>
</p:dialog>

</html>

运行效果

启动Tomcat运行项目,请注意查看启动信息,如果有异常应该先解决异常信息,运行成功后的结果如下所示:
访问地址:http://localhost:8080


-------------- 本文结束  感谢您的阅读 --------------
0%