EasyUI DataGrid 后端数据交互简单使用 -- 柚子真好吃
前言:该项目采用 SpringBoot + Mybatis 搭建。
一、环境准备
首先下载EasyUI — 官网:http://www.jeasyui.net/download
目录结构如下
二、前端html代码
easyUI.html
<!DOCTYPE HTML>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--下面四行代码为使用easyUI需要导入的css以及js -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
<!--注:要先导入jquery 再导入 jquery-easyui-->
<script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<!--field对应的名称必须要和User实体的属性名对应 -->
<th data-options="field:'id',width:80">ID</th>
<th data-options="field:'username',width:100">用户名</th>
<th data-options="field:'password',width:80,align:'right'">密码</th>
<th data-options="field:'role',width:80,align:'right'">角色</th>
<th data-options="field:'desci',width:250">描述</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url : "/easyUIshowUsers2",
type : "post",
dataType : "json",
success : function (response) {
$('#dg').datagrid('loadData', response);
},
error : function () {
alert("Hello Error!");
}
})
});
</script>
</body>
</html>
三、数据准备
在数据库中建立名称为 ‘user’ 的表,并添加相应数据,如下图。
id | username | password | role | desci |
---|---|---|---|---|
1001 | Redfield | 123 | user | ss |
1002 | Green | 123 | admin | ss |
1003 | Small | lo | admin | pp |
1004 | ww | ww | ww | ww |
四、Mapper与Service代码
1.UserMapper.java
public interface UserMapper {
public List<User> selectAllUsers();
}
2.UserMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.boot.mapper.UserMapper">
<select id="selectAllUsers" resultType="User">
select * from user
</select>
</mapper>
3.UserService.java
public interface UserService {
public List<User> selectAllUsers();
}
4.UserServiceImpl
@Service("userService")
public class UserServiceImpl implements UserService {
@Autowired
UserMapper userMapper;
@Override
public List<User> selectAllUsers() {
return userMapper.selectAllUsers();
}
}
五、Controller层代码
将集合直接返回即可(注:如果注解用的是@Controller 则需要加@ResponseBody注解,否则会报错)
@RestController
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/easyUIshowUsers2")
public List<User> easyUIshowUsers2() {
List<User> list = userService.selectAllUsers();
return list;
}
}
四、结果图
结果将数据库数据直接展示再表格中。