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;
    }
}

四、结果图

结果将数据库数据直接展示再表格中。
在这里插入图片描述

原文链接：https://blog.csdn.net/baidu_39265156/article/details/103043751