ExtJS Grid 分页 Java

引言

在Web开发中，数据表格是常见的展示数据的组件。而在一些需要展示大量数据的场景中，为了提高用户体验和性能，需要对数据进行分页展示。ExtJS是一款功能强大的JavaScript框架，提供了丰富的UI组件，其中就包括了Grid组件，可以实现灵活的数据表格展示和分页功能。本文将介绍如何使用ExtJS和Java来实现Grid分页功能。

准备工作

在开始之前，我们需要准备以下环境和工具：

  • ExtJS框架，可以从官方网站[
  • Java开发环境，建议使用Java SE 8或以上版本。
  • 一个Java Web框架，如Spring MVC、Struts等。本文以Spring MVC为例。
  • 一个数据库，用于存储和获取数据。

数据库准备

首先，我们需要准备一个数据库表，用于存储要展示的数据。假设我们有一个名为"employees"的表，包含以下字段：

  • id：员工ID，整数类型，主键。
  • name：员工姓名，字符串类型。
  • age：员工年龄，整数类型。
  • department：员工部门，字符串类型。

以下是表的创建语句：

CREATE TABLE employees (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    age INT,
    department VARCHAR(50)
);

并初始化一些测试数据：

INSERT INTO employees (id, name, age, department)
VALUES (1, '张三', 25, '技术部');
INSERT INTO employees (id, name, age, department)
VALUES (2, '李四', 30, '销售部');
INSERT INTO employees (id, name, age, department)
VALUES (3, '王五', 28, '人事部');
INSERT INTO employees (id, name, age, department)
VALUES (4, '赵六', 35, '财务部');
INSERT INTO employees (id, name, age, department)
VALUES (5, '钱七', 27, '技术部');
INSERT INTO employees (id, name, age, department)
VALUES (6, '孙八', 33, '销售部');

创建Java Web项目

接下来，我们需要创建一个Java Web项目，用于实现后端的数据接口。本文以Spring MVC为例，新建一个名为"ExtJSGridDemo"的项目。

添加依赖

在项目的pom.xml文件中添加以下依赖：

<dependencies>
    <!-- Spring MVC -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.3.10</version>
    </dependency>
    <!-- 数据库驱动 -->
    <dependency>
        <groupId>org.mariadb.jdbc</groupId>
        <artifactId>mariadb-java-client</artifactId>
        <version>2.7.3</version>
    </dependency>
</dependencies>

配置Spring MVC

在web.xml文件中配置Spring MVC的DispatcherServlet：

<servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

然后，在WEB-INF目录下新建一个名为spring-servlet.xml的文件，用于配置Spring MVC的相关组件和属性：

<context:component-scan base-package="com.example.extjsgriddemo" />
<mvc:annotation-driven />

创建Controller

在项目中创建一个名为EmployeeController的控制器类，用于处理前端请求和返回数据：

package com.example.extjsgriddemo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeService