在线代码生成、单表、主子表、树表、数据表结构
# 引言
代码生成是帮助开发者快速生成通用增删改查的工具,一般情况生成后的代码部署后即可运行。
然后对生成后的代码进行布局调整,增加业务代码,实现您的业务。极大地简化了您的基础重复代码编写时间。
# 数据库表设计
# 方式一:在线设计建模
数据库表动态管理模块(Data/Dynamic Base Manage)简称 DBM,菜单:数据管理 -> 数据表管理。
该功能可实现类似数据库管理工具客户端的功能,通过 Web 界面,即可维护数据源、数据表、数据字段、索引等。
目前已完成支持的数据库有:MySQL、Oracle、Sql Server、PostgreSQL、达梦数据库、人大金仓。
后续还会继续支持更多类型的数据库,本模块具有良好的扩容性,方便支持其它类型数据库。
特点:
- 基于 Liquibase 实现,生来具有的跨数据库支持,多数据库扩展性
- 自动根据通用字段数据类型,映射为不同类型数据库下的字段类型
- 支持根据表描述和字段描述的拼音,自动生成表名和字段名,方便快捷
- 支持变更数据表名、字段名、表描述、列描述、类型、主键、必填等
- 支持数据表有数据的时候、字段有索引的时候,进行字段类型变更、增加必填属性
- 支持不同类型数据库下的,日期类型、数值类型的字段默认值自动化处理
- 支持自定义配置字段类型,通过字典管理快捷增加通用数据类型
- 支持快速添加常用字段(如:创建者、创建时间、更新者、更新时间、组织编码、树表字段、自定义等)
- 支持快速添加常用字段的索引,方便快速维护,提高数据查询分析性能
- 支持通过其它数据库管理工具增减数据字段和索引后的自动同步到 DBM 模块
- 支持用户维护数据表、数据字段、数据字典的记录留痕,显示修改前后的数据,方便追溯
- 支持离线库单元测试,快捷指定数据变更数据,生成不同类型的数据库 DDL
- 支持对创建和导入的数据表,通过分页方式快捷的查看预览表中的数据
- 支持动态管理多数据源,管理其它数据源下的表,支持连接池配置
- 支持严格的权限控制,必须有最高级别的管理人员才可维护数据表
- 支持导入现有数据表,方便纳入 DBM 进行管理
- 支持数据表业务分类,方便分类管理
功能:
- 数据表管理:对数据库中的物理表进行管理维护,新增或更改表和字段、导入现有表、数据分页查询。
- 数据表索引管理:对数据表进行索引维护、自动生成索引名称,提高查询性能。
- 数据表分类:对业务进行分类管理,方便对数据表、动态功能等的业务进行分类。
- 数据源管理:动态维护系统数据源,支持多种数据库数据源,除了系统内置外还可以自定义,支持连接池配置。
- 修改历史留痕查询:方便进行操作审计,追溯操作者对数据表的更改记录,修改前和修改后的记录。
- 通用字段组维护:快捷添加业务上的通用字段,如状态、创建者、创建时间等。
该功能可作为动态表单和列表的底层数据结构的界面维护,动态的背后必须有强大的数据结构支撑。
操作手册
1、数据表管理
进入菜单:数据管理 -> 数据表管理
1)新增和编辑:
填写表描述或列描述后,自动根据拼音生成表名称或列名称。如果是修改操作,则不会进行自动生成表名和列名,防止更改描述后又被覆盖。 保存后,系统会自动进行比较修改的内容,仅对更改的内容生成DLL语句并执行,实现更改到数据库的物理数据表中。 有些数据库不支持带数据的物理表修改字段类型,JeeSite会自动处理进行创建临时字段完成更改类型。 安全提示:保存前会要求填写修改原因,并给与安全提示,防止误操作,如果有对数据字段进行删除操作,还给与二次提示。
2)字段类型:支持自定义增加
3)表常用字段:支持自定义
举例:(实现 AddCommonColumn 接口)
public class StatusCommonColumn implements AddCommonColumn {
@Override
public List<DbmTableColumn> getColumns() {
List<DbmTableColumn> list = ListUtils.newArrayList();
list.add(createColumn("状态", "status", "char(1)", true, true));
list.add(createColumn("创建者", "create_by", "varchar(64)", true, true));
list.add(createColumn("创建时间", "create_date", "datetime", true, true));
list.add(createColumn("更新者", "update_by", "varchar(64)", true, true));
list.add(createColumn("更新时间", "update_date", "datetime", true, true));
list.add(createColumn("备注", "remarks", "nvarchar(600)", false, true));
return list;
}
@Override
public List<DbmTableIndex> getIndexes() {
List<DbmTableIndex> list = ListUtils.newArrayList();
list.add(creatIndex("状态(status)", "status", false));
list.add(creatIndex("创建者(create_by)", "create_by", false));
list.add(creatIndex("创建时间(create_date)", "create_date", false));
list.add(creatIndex("更新者(update_by)", "update_by", false));
list.add(creatIndex("更新时间(update_date)", "update_date", false));
return list;
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
添加后,即可在界面上进行选择:如果点击多次系统会进行校验给与提示。
4)数据表索引:索引类型支持(正常:数据库默认、唯一:唯一索引)
5)复制表结构:
表管理操作列上点击复制按钮,可进入复制界面,可对复制内容进行修改表名、列名、等信息,点击提交后,会自动弹出复制该表索引。
6)查看表数据:分页方式快速查看该表数据
7)导入现有表:系统读取当前数据表信息、列信息、索引信息纳入到DBM中进行管理,数据列表页点击导入按钮,弹出导入对话
导入后将在列表页出现,点击刚导入的表,进入编辑页面:
2、数据表分类
进入菜单:数据管理 -> 数据表分类
这是一个树结构分类表,可建立上下级层级关系。
3、数据源管理
默认采用 application.yml 中配置的 jdbc 数据源,如果想添加外置数据源,可通过 application.yml 添加 dataSourceNames 数据源,也可通过本节菜单进行动态创建数据源。
进入菜单:数据管理 -> 数据源管理
1)新增或编辑:
填写完成数据库连接参数后,点击保存按钮,后台会进行连接参数的正确性进行验证,如果连接失败,界面给予提示原因。连接成功后系统自动加入到当前数据源池中,方可后面使用该数据源。
2)连接类型:支持自定义扩展(可配置一些连接参数默认值)
3)连接池类型:支持自定义扩展(实现 AddDataSource 接口类)
4)修改记录:修改数据源时,需要填写修改原因提交,系统会自动进行修改前后数据比较留痕。可点击“修改记录”按钮,快速查看修改日志。
4、修改记录留痕
进入菜单:数据管理 -> 修改记录留痕
该界面可快速查询当前最新更改记录,可根据标题、原因、用户、时间进行检索。
# 方式二:ERMaster 建模
ERMaster 模型文件以 erm 为后缀,JeeSite 的每个模块都有对应的 ER 关系图模型和 Excel 表结构文档。
她是一个轻量级的数据库表建模工具,可以很方便的展示表结构、多对一、多对多的场景,并可创建索引、导出文档等。
更重要的是 ERMaster 可以一次建模,导出不同数据库 DLL,如 MySQL、Oracle、Sql Server、PostgreSQL 等等,
可以自动转换不同数据库的数据类型,这对一个通用平台,支持多种类型的数据库非常实用。安装方式,有以下几种:
使用 Eclipse 安装 ERMaster 插件,菜单 Help -> Install New Software -> Work with:填写
https://jeesite.com/ermaster
回车 -> 取消 Contact all update site... 复选框 -> 取消 Group items by category 复选框 -> 点击 Select All -> 点击 Next 直到 Finish 按钮;也可以手动下载 https://gitee.com/thinkgem/ermasterr (opens new window) 代码仓库到本地磁盘,在 Work with 中,直接填写代码仓库路径下的/ermasterr/updatesite
目录,进行安装。使用 Spring STS 最新版,请先安装 GEF 依赖库,菜单 Help -> Install New Software -> Work with:填写
http://download.eclipse.org/tools/gef/classic/releases/latest
回车 -> Select All -> 取消 Contact all update site... 复选框 -> 点击 Next 直到 Finish. 然后同上的方法 安装 ERMaster 插件。使用 DBeaver Community 数据库管理工具,也可以在 DBeaver Community (opens new window) 上安装 ERMaster 插件。
使用 Eclipse ERMaster 集成版,直接下载使用:https://gitee.com/thinkgem/jeesite5/attach_files (opens new window)
1、建立自己的模型:
打开 web 项目下 /db/test.erm 文件,直接复制该文件,添加自己的业务表。
通过系统设置->模块管理,自动生成的模块中,默认也会包含一个 erm 文件。
设计完成后,可以对建模进行导出为 DDL、ER 图、文档等,操作方式:在表模型空白处右键,
选择 Export -> DLL语句、Excel文档、HTML文档、Image图片,选择生成的路径,OK 即可。
如果导出的是 DLL 在对话框下放,可进行多项选择导出的数据库类型。
2、内置通用字段组:
模型中内置了一些字段组,可帮助您快速创建(这些字段不用您去每个去编写,而是选择即可)如下:
DataEntity:
字段名 | 类型 | 备注 |
---|---|---|
status | char(1) | 状态(0正常 1删除 2停用 3冻结 4审核 5驳回 9草稿) |
create_by | varchar(64) | 创建者 |
create_date | datetime | 创建时间 |
update_by | varchar(64) | 更新者 |
update_date | datetime | 更新时间 |
remarks | nvarchar(500) | 备注 |
DataEntityNoStatus:
字段名 | 类型 | 备注 |
---|---|---|
create_by | varchar(64) | 创建者 |
create_date | datetime | 创建时间 |
update_by | varchar(64) | 更新者 |
update_date | datetime | 更新时间 |
remarks | nvarchar(500) | 备注 |
TreeEntity:
字段名 | 类型 | 备注 |
---|---|---|
parent_code | varchar(64) | 父级编号 |
parent_codes | varchar(1000) | 所有父级编号 |
tree_sort | decimal(10) | 本级排序号(升序) |
tree_sorts | varchar(1000) | 所有级别排序号 |
tree_leaf | char(1) | 是否最末级 |
tree_level | decimal(4) | 层次级别 |
tree_names | nvarchar(1000) | 全节点名 |
BaseEntity:
字段名 | 类型 | 备注 |
---|---|---|
id | varchar(64) | 编码 |
status | char(1) | 状态 |
BaseEntityCorp:
字段名 | 类型 | 备注 |
---|---|---|
corp_code | varchar(64) | 租户代码 |
corp_name | nvarchar(100) | 租户名称 |
ExtendEntity:
字段名 | 类型 | 备注 |
---|---|---|
extend_s1 | nvarchar(500) | 扩展 String 1 |
extend_s2 | nvarchar(500) | 扩展 String 2 |
extend_s3 | nvarchar(500) | 扩展 String 3 |
extend_s4 | nvarchar(500) | 扩展 String 4 |
extend_s5 | nvarchar(500) | 扩展 String 5 |
extend_s6 | nvarchar(500) | 扩展 String 6 |
extend_s7 | nvarchar(500) | 扩展 String 7 |
extend_s8 | nvarchar(500) | 扩展 String 8 |
extend_i1 | decimal(19) | 扩展 Integer 1 |
extend_i2 | decimal(19) | 扩展 Integer 2 |
extend_i3 | decimal(19) | 扩展 Integer 3 |
extend_i4 | decimal(19) | 扩展 Integer 4 |
extend_f1 | decimal(19,4) | 扩展 Float 1 |
extend_f2 | decimal(19,4) | 扩展 Float 2 |
extend_f3 | decimal(19,4) | 扩展 Float 3 |
extend_f4 | decimal(19,4) | 扩展 Float 4 |
extend_d1 | datetime | 扩展 Date 1 |
extend_d2 | datetime | 扩展 Date 2 |
extend_d3 | datetime | 扩展 Date 3 |
extend_d4 | datetime | 扩展 Date 4 |
# 表结构数据字典
一张图展示 JeeSite 的表接口,表之间的关系:
Excel格式下载地址:https://gitee.com/thinkgem/jeesite5/blob/v5.7/modules/core/db/core.xls (opens new window)
源文件下载地址:https://gitee.com/thinkgem/jeesite5/blob/v5.7/modules/core/db/core.erm (opens new window)
erm 文件是 ERMaster 模型文件,如果您打不开的话,请看上一节 “ERMaster建模” 使用方法。
# 生成代码的流程
- 菜单:研发工具 -> 代码生成工具 -> 点击新增
- 选择数据源 -> 选择表 -> 点击下一步
- 配置功能基本信息 -> 点击下一步
- 配置功能字段信息 -> 点击下一步
- 配置生成信息 -> 点击保存并生成代码
- 代码生成工具列表 -> 创建菜单
# 1)单表
- 配置表基本信息,下一步;
- 配置表字段信息,必须有一个主键,下一步;
- 配置表生成信息,选择“单表/主子表”生成模板,点击“保存并生成代码”按钮;
- 配置菜单和权限标识,与Controller里@RequestMapping和@RequiresPermissions对应;
- IDEA 下,直接点击重启服务;Eclipse 下请先刷新工程,然后启动服务。
# 2)主子表
- 配置主表信息,主表字段,主表生成信息,选择“单表/主子表”模板,先暂存配置;
- 配置子表信息,选择父表和当前表,关联父表主键的外键字段,子表字段,下一步;
- 回到主表生成界面,点击“保存并生成代码”按钮,可同时生成主表和子表的增删改查代码。
- 配置菜单和权限标识,与Controller里@RequestMapping和@RequiresPermissions对应。
- IDEA 下,直接点击重启服务;Eclipse 下请先刷新工程,然后启动服务。
# 3)树结构表
- 与主子表不同的地方,如下:
- 在生成信息选项卡中选择“树表“生成模板。
- 设置“树显示编码字段”和“树显示名称字段”即可。
# 4)代码生成示例
可参考初始化脚本自带的 test_data 和 test_tree 两个配置,如下
研发工具菜单中的功能实例代码,都在 web 项目下,进行查看。
在线访问:https://vue.jeesite.com/gen/genTable/list (opens new window)
基本信息:https://vue.jeesite.com/js/a/gen/genTable/form?tableName=test_data&op=step1 (opens new window)
字段配置:https://vue.jeesite.com/js/a/gen/genTable/form?tableName=test_data&op=step2 (opens new window)
生成信息:https://vue.jeesite.com/js/a/gen/genTable/form?tableName=test_data&op=step3 (opens new window)
界面中的配置说明,详见下一节。
# 代码生成选项说明
# 表基本信息
- 表名:物理表表名(实际表名)
- 表说明:物理表表描述,生成到各个类上
- 实体类名称:实体类的名称,所有类的前缀
- 功能作者:开发者姓名,生成到类注释上
- 关联父表的表名:子表配置的选项,选择父表表名
- 本表关联的外键名:子表配置的选项,与父表主键关联的字段,也叫外键
# 表字段信息
# 1)字段
- 列名:数据表定义的字段名称,通过驼峰命名法转换为实体类的字段名
- 列说明:数据表定义的字段注释,如果注释中带括号,或冒号,则括号中或冒号后的内容不生成到列标签中,只在列注释中体现。
- 字段类型:数据表定义字段类型
- 属性类型:也叫Java类型,是实体类的属性字段类型
- 属性名称:也叫Java字段,是实体类的属性字段名,支持复杂格式:对象名.属性名|属性名2,例如:用户user.userCode|userName,主要用于树选择组件;如果子表,则写主表实体类名+主键,如:formEntity.entityId。
- 主键:是否是主键字段。选择为“隐藏域字段”代表:自动生成主键;选择为“选择文本域”则代表有用户来手填主键值。
- 插入:是否是插入字段,如果是则包含在insert语句里
- 更新:是否是更新字段,如果是则包含在update语句里,不一定不出现在表单上
# 2)列表
- 列表:是否是列表查询,如果是则包含在列表页的表格列里。
- 查询:是否是查询字段,如果是则包含在查询页的查询列表里。
- 匹配方式:查询字段的查询方式,也就是where后的条件表达式,如:字段1=字段2 AND 字段3>字段4 AND 字段5 !=字段6。
# 3)表单
- 编辑:是否是编辑字段,如果是则包含在update语句里,并出现在表单上
- 必填:该字段是否可为空,不选代表为必填字段
- 控件类型:表单中字段生成的样式,如:input,select,treeselect,areatext等等
- 栅格:就是 BootStrap 的栅格布局,格式:行/标签/输入框(4.3.1后使用 一列、两列、三列 表单布局替代)
- 新行:该表单控件新起一行生成,也就是生成一个新的 标签。
- 字典类型:如果控件类型:下拉框、复选框、单选框,则该字段必须指定一个字典类型,字典类型为字段管理中的字典类型。
- 字段验证:数值、整数、日期、时间、账号、邮件、手机号、身份证号等。
# 表生成信息
- 生成模板:单表/主子表(增删改查)、树表/树结构表(增删改查)、业务层和持久层(增删改查)、仅持久层(dao/mapper/entity)
- 生成包路径:生成在哪个java包下,格式:{包名}/{模块名}/{分层(dao,entity,service,web)}/{子模块名}/{java类} 可从参数设置里修改:“gen.defaultPackageName” 的键值,来修改此默认值。如 com.jeesite.modules
- 生成模块名:生成包下的模块名称,模块名称下进行分层,也可理解为子系统名,例如 sys
- 生成子模块名:分层下的文件夹,可选,{分层(entity/dao/service/controller)}/{子模块名}/,可为空。
- 生成功能名:生成到类注释里。
- 功能名(简写):生成功能提示,如TAB上、列表上、提示信息(某某成功、某某失败)等。
- 生成后端路径:指定 jeesite-module-xxx 模块所在磁盘目录,若不填写,则生成到当前 web 项目下
- 生成前端路径:这里指的是 Vue 分离端页面(ts、vue)的生成位置,指定 jeesite-vue 所在磁盘目录
其它选项
- 是否有启用停用:生成停用启用功能,生成表必须要有status字段。
- 是否有删除功能:生成删除数据功能,可删除数据。
- 是否可上传图片:生成上传图片控件。
- 是否可上传附件:生成上传文件控件。
业务流程表单
- 是否流程表单:是否生成为业务流程表单,与流程引擎关联。
- 流程表单Key:与流程定义关联参数 “业务流程 -> 流程管控 -> 流程定义-> 表单/业务关联”
# 自定义生成模板
有时根据业务需要,可能会个性化一些代码模板。JeeSite 提供了自定义“代码生成模板”功能。
如果有比较通用的功能,可以更贴合自己的业务编写生成模板,生成对应业务的功能。
您只需要拷贝/jeesite-module-core/src/main/resources/templates/modules/gen/config.xml
文件,并重名为config-custom.xml
放到任意项目的/src/main/resources/templates/modules/gen/
目录下即可,然后修改您的生成配置就可生效。
这个 config.xml 内包含了代码生成配置的所有信息。
# 模板全局变量清单
- packageName: 基础包名,如 com.jeesite.modules(生成信息中填写)
- packagePath: 基础包路径,如 com/jeesite/modules
- lastPackageName: 基础包名的最后一个文件夹名,如 modules
- moduleName: 生成模块名,如 sys(生成信息中填写)
- subModuleName: 生成子模块名: 如 user(生成信息中填写)
- className: 类变量名,首字母小写,如 empUser
- ClassName: 类名称,首字母大写,如 EmpUser
- functionName: 生成功能名(生成信息中填写)
- functionNameSimple: 生成功能名称(简写)(生成信息中填写)
- functionAuthor: 功能作者(基本信息中填写)
- functionVersion: 功能版本(当前日期 yyyy-MM-dd)
- urlPrefix: MVC 映射地址前缀
- viewPrefix: MVC 视图地址前缀
- permissionPrefix: MVC 权限字符串前缀
- compNamePrefix: MVC Vue组件名称前缀
- Global: Global 对象实例,用法:@Global.YES
- dbName: 当前数据名称,如 mysql、oracle、mssql、postgresql 等
- table: GenTable 对象实例,详见下一小节
- pkField: 主键字段属性名
- baseDir: 设置生成基础路径
- frontDir: 设置生成前端路径
# GenTable对象实例
- tableName: 表名
- tableNameAndComments: 表名和说明
- genTableName: 生成表表名(将前缀转换为变量)如: js_sys_user 转为 ${_prefix}sys_user
- className: 实体类名不能为空
- comments: 表说明不能为空
- parentTableName: 父表名称
- parentTableFkName: 父表主键
- dataSourceName: 数据源名称
- tplCategory: 生成模板
- packageName: 生成包名
- moduleName: 生成模块名
- subModuleName: 子模块名
- functionName: 功能名
- functionNameSimple: 功能名(简写)
- functionAuthor: 功能作者不能为空
- genBaseDir: 生成基础路径(Java 端)
- genFrontDir: 生成基础路径(Vue 端)
- optionMap: 生成选项
- formColNum: 布局(一列、两列、三列)
- isHaveDisableEnable: 生成停用启用功能
- isHaveDelete: 生成删除功能
- isImportExport: 是否导入导出功能
- isBpmForm: 是否流程表单
- bpmFormKey: 流程表单Key
- isImageUpload: 是否有图片上传功能
- isFileUpload: 是否有文件上传工具
- treeViewCode: 树表显示编码
- treeViewName: 树表显示名称
- leftTreeRightTableUrl: 左树右表的树url地址
- leftTreeRightTableFk: 左树右表的树外键字段
- childNum: 子表的数量
- pkList: 主键集合,返回 List<GenTableColumn>
- columnList: 列集合,返回 List<GenTableColumn>
- parent: 上级生成表(是子表的情况下)返回 GenTable
- childList: 子表集合,返回 List<GenTable>
- importList: 获取导入依赖包字符串
- parentExists: 是否存在父类,判断是否子表
- createDateExists: 是否存在create_date列
- updateDateExists: 是否存在update_date列
- statusExists: 是否存在status列
- isBaseEntity: 是否是基础实体
- isDataEntity: 是否是数据实体
- isTreeEntity: 是否是树结构实体
- isExtendEntity: 是否是扩展实体
- isPkCustom: 主键是否自定义(是否有客户来填写)
- treeViewCodeAttrName: 获取树节点显示编码的属性名
- treeViewNameAttrName: 获取树节点显示名称的属性名
# GenTableColumn对象实例
- genTable: 归属表对象实例
- columnName: 列名不能为空
- columnNameAndComments: 获取列名和说明
- columnSort: 列排序号
- columnType: 列类型
- dataLength: 获取字符串长度
- columnLabel: 列标签
- comments: 列备注
- fullAttrName: 列全属性名
- simpleAttrName: 简写属性名。user.userCode|userName,返回: user
- attrName: 属性如果是对象,对象.附加属性1,如:user.userCode|userName,返回: user.userCode
- attrName2: 属性如果是对象,对象.附加属性2,如:user.userCode|userName,返回: user.userName
- attrNames: 所有属性名,返回数组 String[]
- attrNameForGetMethod: 返回属性名的 get 方法,如 getUserCode
- attrType: 属性类型,Java 类型,如 String、Integer
- simpleAttrType: 简写属性类型,Java 类型,com.jeesite.entity.Office 返回 Office
- isPk: 是否主键
- isNull: 是否可为空
- isRequired: 获取是否必填
- isInsert: 是否插入字段
- isUpdate: 是否更新字段
- isEdit: 是否表单编辑字段
- isList: 是否列表列字段
- isQuery: 是否查询字段
- queryType: 查询类型,匹配方式(=、!=、>、>=等)
- showType: 控件类型(input、textarea、select等)
- optionMap:
- dictType: 字典类型
- isImportExport: 是否导入导出字段
- isNewLine: 是否新行布局
- fieldValid: 字段表单验证
- annotationList: 获取列注解列表
- simpleAnnotationList: 获取简写列注解列表
- isBaseEntityColumn: 是否是继承BaseEntity类的列
- isDataEntityColumn: 是否是继承DataEntity类的列
- isTreeEntityColumn: 是否是继承TreeEntity类的列
- isSuperColumn: 是否是继承父类的列
- isExtendColumn: 是否是继承Extend类的列
- isEntityColumn: 是否是继承某类的列
# 常见问题
- 如何增加 “属性类型” ?请看上一节的“自定义生成模板”,修改
config-custom.xml
文件的attrType
元素里追加类型即可。增加其他选项,如 “控件类型”、“字段验证”,的方法与增加 “属性类型” 同理。 - 为什么选择 “区域选择” 控件时,编辑表单的时候没有回显区域名称?区域(行政区划)的名称一般是不变的数据,建议在您的业务表里建立
area_code
和area_name
两个字段,分别存储区域编码和区域名称。代码生成:(1)area_code
的 “属性名称” 里设置area_code|area_name
;(2)area_name
的 “编辑” 对勾去掉。 - 生成的树表如何实现分页?可以参考
AreaController
类的listPageData
方法,视图页面<table id="dataGrid"></table>
下一行增加<div id="dataGridPage"></div>
即可。