EasyUI DataGrid 后端数据交互简单使用 -- 柚子真好吃

EasyUI DataGrid 后端数据交互简单使用 -- 柚子真好吃

    • 一、环境准备
    • 二、前端html代码
    • 三、数据准备
    • 四、Mapper与Service代码
        • 1.UserMapper.java
        • 2.UserMapper.xml
        • 3.UserService.java
        • 4.UserServiceImpl
    • 五、Controller层代码
    • 四、结果图

前言:该项目采用 SpringBoot + Mybatis 搭建。

一、环境准备

首先下载EasyUI — 官网:http://www.jeasyui.net/download
目录结构如下
EasyUI DataGrid 后端数据交互简单使用 -- 柚子真好吃_第1张图片

二、前端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;
    }
}

四、结果图

结果将数据库数据直接展示再表格中。
EasyUI DataGrid 后端数据交互简单使用 -- 柚子真好吃_第2张图片

你可能感兴趣的:(EasyUI)