就是将数据库一张表的数据以列表的形式展现在前段。那么就需要在后端将数据库数据查询出来，转化为json格式，返回给前段。
使用easyUI的好处是： 只要后端传给前段json格式，那么前段就会自动的填充表格。用到的就是easyui的数据表格 datagrid
Easiui 只需要在前段我们将表头画出来就可以了。其他列表就是根据后端传到前段的数据自动的给你划分，具体这样实现。先在jsp页面画一个表头
我们在easyui的官网下载对应的js和css的文件。在我们的ssm项目里面进行导入
创建一个javaee项目
在这个项目里面将tomcat的依赖导入，导入之后就自动的导入jsp 和 service 的依赖
以下是这个ssm项目的目录
数据在jsp页面的展示
首先是展示成果
画出jsp页面
代码语言：javascript复制<%--列表按钮组--%>
<div id="datagridtoorbar">
<a href="javascript:void(0)" >添加</a>
<a href="javascript:void(0)" >删除</a>
</div>
<table id="datagridpersion">
<thead>
<tr>
data-options里面写的就是每一列的对应的属性，其中有这列的是哪个字段，宽度是多少
<th data-options="field:'id',width:100,checkbox:true">ID</th>
<th data-options="field:'name',width:100">姓名</th>
<th data-options="field:'gender',width:100,formatter:person.fmt">性别</th>
<th data-options="field:'age',width:100,sortable:true">年龄</th>
<th data-options="field:'phone',width:100">手机号</th>
<th data-options="field:'address',width:300">地址</th>
<th data-options="field:'jyaq',width:300,formatter:person.caozuo">操作</th>
</tr>
</thead>
</table>以上的代码只是简单的HTML的页面，还没有easyui的样式，我们需要在script标签里面给表格添加easyui的样式
代码语言：javascript复制 $("#datagridpersion").datagrid({
title:"用户信息",
iconCls:"icon-man", 图标
height:500,
width:1000,
url:'/showPersion', 走这个项目里面的哪个controller层，返回是json字符串
pagination:true 只要写这个属性，那么就有分页
// 引用按钮组
toolbar: '#datagridtoorbar', 自己写一个按钮组，用id的形式进行引用
rownumbers:true, //显示行号
checkOnSelect:false, //为false的时候，只有复选框被选中，才是真正的选中
striped:true, //黑白相间
}
});我们可以给A标签一个id，在script里面选中对应的标签，给easyui的样式 还可以不给id，直接利用a标签里面的名字选中对应的标签
只要写了样式，就可以在页面看见 这些都是easyui自动生成的，不需要你弄，你需要做的就是配置
后端操作
既然前端已经画好了，前端给给了路径了，就是url，那么一渲染这个jsp页面就会走对应的url，我们在后端就需要写这个对应url的接口了。
以下是后端的目录
首先是controller层 前端的路径是先走这层
代码语言：javascript复制@Controller
public class PersonController {
@Autowired
private PersionService persionService;
@ResponseBody
@RequestMapping("/showPersion")
public Object showPersion( int page,
int rows){
Object all02 = persionService.getAll02(page,rows);
return all02;
}
}之后是业务层service层
@Service
public class PersionServiceimpl implements PersionService {
@Autowired
private persionMapper persionMapper;
@Override
public Object getAll02(int page, int rows) {
List<person> all01 = persionMapper.getAll01();
return all01;
}接下来是mapper层
xml里面的查询全部数据的代码
代码语言：javascript复制 <select id="getAll01" resultType="com.pojo.person" >
SELECT
id,
name ,
age,
gender,
phone,
address
FROM persion
</select>以上的前端后端都弄完之后，那么启动项目，因为是ssm项目，所以需要配置tomcat服务器
那么我们就可以看到前端会展示数据库里面的数据
