就是将数据库一张表的数据以列表的形式展现在前段。那么就需要在后端将数据库数据查询出来,转化为json格式,返回给前段。
使用easyUI的好处是: 只要后端传给前段json格式,那么前段就会自动的填充表格。用到的就是easyui的数据表格 datagrid
Easiui 只需要在前段我们将表头画出来就可以了。其他列表就是根据后端传到前段的数据自动的给你划分,具体这样实现。先在jsp页面画一个表头
我们在easyui的官网下载对应的js和css的文件。在我们的ssm项目里面进行导入
创建一个javaee项目
在这个项目里面将tomcat的依赖导入,导入之后就自动的导入jsp 和 service 的依赖
以下是这个ssm项目的目录
<%--列表按钮组--%>
<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的样式
$("#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层 前端的路径是先走这层
@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里面的查询全部数据的代码
<select id="getAll01" resultType="com.pojo.person" >
SELECT
id,
name ,
age,
gender,
phone,
address
FROM persion
</select>
以上的前端后端都弄完之后,那么启动项目,因为是ssm项目,所以需要配置tomcat服务器
那么我们就可以看到前端会展示数据库里面的数据