本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用

一、前言准备

1、我们将使用下面的插件：

datagrid：向用户展示列表数据。
dialog：创建或编辑一条单一的用户信息。
form：用于提交表单数据。
messager：显示一些操作信息。

2、数据库准备

CREATE TABLE `users` (`id` int(20) NOT NULL AUTO_INCREMENT COMMENT 'ID',`firstname` varchar(50) DEFAULT NULL COMMENT '姓',`lastname` varchar(50) DEFAULT NULL COMMENT '名',`phone` varchar(20) DEFAULT NULL COMMENT '电话',`email` varchar(40) DEFAULT NULL COMMENT '邮箱',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=27 DEFAULT CHARSET=utf8

3、下载jquery-easyui-1.6.3zip包

jquery-easyui-1.6.3包下：1、themes文件夹放到static目录下2、jquery.easyui.min.js、jquery.min.js放到static目录下3、demo.css放到template目录下4、相关页面放到template目录下

二、搭建项目并开发

1、搭建项目

　　a)、idea中创建SpringBoot项目

　　b)、编写pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.itcast</groupId><artifactId>jquery-ui</artifactId><version>0.0.1-SNAPSHOT</version><packaging>jar</packaging><name>jquery-ui</name><description>Demo project for Spring Boot</description><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.5.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version><junit.version>4.12</junit.version><log4j.version>1.2.17</log4j.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- mysql --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.0.4</version></dependency><!-- druid --><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.0.31</version></dependency><!-- mybatis --><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>1.3.2</version></dependency><!-- pagehelper-spring-boot-starter --><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.2.5</version></dependency><!-- junit --><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>${junit.version}</version><scope>test</scope></dependency><!-- logback --><dependency><groupId>ch.qos.logback</groupId><artifactId>logback-core</artifactId><version>1.2.3</version></dependency><!-- log4j --><dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>${log4j.version}</version></dependency><!-- https://mvnrepository.com/artifact/org.webjars.npm/jquery-easyui --><dependency><groupId>org.webjars.npm</groupId><artifactId>jquery-easyui</artifactId><version>1.5.21</version></dependency><!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.49</version></dependency><!-- https://mvnrepository.com/artifact/org.webjars/jquery --><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.3.1-1</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

　　c)、编写application.yml文件

server:port: 1111
mybatis:config-location: classpath:mybatis/mybatis.cfg.xml            type-aliases-package: com.itcast.jqueryui.entities        mapper-locations:- classpath:mybatis/mapper/**/*.xml                           spring:datasource:type: com.alibaba.druid.pool.DruidDataSource                driver-class-name: org.gjt.mm.mysql.Driver                  url: jdbc:mysql://localhost:3306/jquery_ui                  username: rootpassword: 123456dbcp2:min-idle: 5                                               initial-size: 10                                           max-total: 10                                              max-wait-millis: 200resources:static-locations: ["classpath:/static/","classpath:/templates/demo/datagrid","classpath:/","classpath:/templates"]                                pagehelper:helper-dialect: mysqlreasonable: truesupport-methods-arguments: trueparams: count=countSqloffset-as-page-num: truerow-bounds-with-count: true

　　d)、mybatis.cfg.xml配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration><settings><!-- 开启二级缓存 --><setting name="cacheEnabled" value="true"/></settings></configuration>

2、创建数据网格页面

　　a)、创建basic.html页面，并引入相关的js和css

<head><meta charset="UTF-8"><title>Basic DataGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../../static/themes/default/easyui.css" th:href="@{../../../static/themes/default/easyui.css}"><link rel="stylesheet" type="text/css" href="../../../static/themes/icon.css" th:href="@{../../../static/themes/icon.css}"><link rel="stylesheet" type="text/css" href="../demo.css" th:href="@{../demo.css}"><script type="text/javascript" src="../../../static/jquery.min.js" th:href="@{../../../static/jquery.min.js}"></script><script type="text/javascript" src="../../../static/jquery.easyui.min.js" th:href="@{../../../static/jquery.easyui.min.js}"></script>
</head>

　　b)、创建数据列表和工具按钮

<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin:20px 0;"></div><!-- 数据列表 start -->
<table id="dg" title="My Users" class="easyui-datagrid" style="width:580px;height:250px"url="/datagrid/list" toolbar="#toolbar" singleSelect="true"  method="get"><thead><tr><th field="id" width="60" align="center">ID</th><th field="firstname" width="100" align="center">First Name</th><th field="lastname" width="100" align="center">Last Name</th><th field="phone" width="160" align="center">Phone</th><th field="email" width="160" align="center">Email</th></tr></thead>
</table>
<!-- 数据列表 end --><!-- 工具按钮 start -->
<div id="toolbar"><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>
<!-- 工具按钮 end -->

　c)、java后台页面

实体类：/*** Copyright (C), 2015-2018, XXX有限公司* FileName: Datagrid* Author:   JohnEricCheng* Date:     2018/9/25 15:13* Description:* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.itcast.jqueryui.entities;import java.io.Serializable;public class Datagrid implements Serializable{private Integer id;private String firstname;private String lastname;private String phone;private String email;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getFirstname() {return firstname;}public void setFirstname(String firstname) {this.firstname = firstname;}public String getLastname() {return lastname;}public void setLastname(String lastname) {this.lastname = lastname;}public String getPhone() {return phone;}public void setPhone(String phone) {this.phone = phone;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}@Overridepublic String toString() {return "Datagrid{" +"id=" + id +", firstname='" + firstname + '\'' +", lastname='" + lastname + '\'' +", phone='" + phone + '\'' +", email='" + email + '\'' +'}';}
}

Controller层:/*** Copyright (C), 2015-2018, XXX有限公司* FileName: DatagridController* Author:   JohnEricCheng* Date:     2018/9/25 14:56* Description:* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.itcast.jqueryui.controller;import com.alibaba.fastjson.JSON;
import com.itcast.jqueryui.entities.Datagrid;
import com.itcast.jqueryui.service.DatagridService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;@Controller
@RequestMapping("/datagrid")
public class DatagridController {@Autowiredprivate DatagridService datagridService;/*** 获取所有用户列表** @return*/@RequestMapping("/list")@ResponseBodypublic List<Datagrid> list() {List<Datagrid> datagridList = datagridService.list();return datagridList;}
}

service层:/*** Copyright (C), 2015-2018, XXX有限公司* FileName: DatagridService* Author:   JohnEricCheng* Date:     2018/9/25 15:16* Description:* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.itcast.jqueryui.service;import com.itcast.jqueryui.entities.Datagrid;
import org.springframework.transaction.annotation.Transactional;import java.util.List;public interface DatagridService {public List<Datagrid> list();@Transactionalpublic boolean saveOrUpdate(Datagrid datagrid);@Transactionalpublic boolean delete(Integer id);
}

ServiceImpl层：/*** Copyright (C), 2015-2018, XXX有限公司* FileName: DatagridServiceImpl* Author:   JohnEricCheng* Date:     2018/9/25 15:17* Description:* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.itcast.jqueryui.service.impl;import com.itcast.jqueryui.dao.DatagridDao;
import com.itcast.jqueryui.entities.Datagrid;
import com.itcast.jqueryui.service.DatagridService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class DatagridServiceImpl implements DatagridService {@Autowiredprivate DatagridDao datagridDao;@Overridepublic List<Datagrid> list() {return datagridDao.findAll();}@Overridepublic boolean saveOrUpdate(Datagrid datagrid) {return datagridDao.saveOrUpdate(datagrid);}@Overridepublic boolean delete(Integer id) {return datagridDao.delete(id);}
}

Dao层：/*** Copyright (C), 2015-2018, XXX有限公司* FileName: DatagridDao* Author:   JohnEricCheng* Date:     2018/9/25 15:22* Description:* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.itcast.jqueryui.dao;import com.itcast.jqueryui.entities.Datagrid;
import org.apache.ibatis.annotations.Mapper;import java.util.List;@Mapper
public interface DatagridDao {public List<Datagrid> findAll();public boolean saveOrUpdate(Datagrid datagrid);public boolean delete(Integer id);
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itcast.jqueryui.dao.DatagridDao"><select id="findAll" resultType="Datagrid">select id,firstname,lastname,phone,email from users;</select>
</mapper>

　　d)、页面展示结果

3、新增编辑用户

　　a)、前台页面代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Basic DataGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../../static/themes/default/easyui.css" th:href="@{../../../static/themes/default/easyui.css}"><link rel="stylesheet" type="text/css" href="../../../static/themes/icon.css" th:href="@{../../../static/themes/icon.css}"><link rel="stylesheet" type="text/css" href="../demo.css" th:href="@{../demo.css}"><script type="text/javascript" src="../../../static/jquery.min.js" th:href="@{../../../static/jquery.min.js}"></script><script type="text/javascript" src="../../../static/jquery.easyui.min.js" th:href="@{../../../static/jquery.easyui.min.js}"></script>
</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin:20px 0;"></div><!--<table class="easyui-datagrid" title="Basic DataGrid" style="width:580px;height:250px"data-options="singleSelect:true,collapsible:true,url:'/datagrid/list',method:'get'">-->
<!-- 数据列表 start -->
<table id="dg" title="My Users" class="easyui-datagrid" style="width:580px;height:250px"url="/datagrid/list" toolbar="#toolbar" singleSelect="true"  method="get"><thead><tr><th field="id" width="60" align="center">ID</th><th field="firstname" width="100" align="center">First Name</th><th field="lastname" width="100" align="center">Last Name</th><th field="phone" width="160" align="center">Phone</th><th field="email" width="160" align="center">Email</th></tr></thead>
</table>
<!-- 数据列表 end --><!-- 工具按钮 start -->
<div id="toolbar"><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>
<!-- 工具按钮 end --><!--  新增(form表单) start  -->
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"closed="true" buttons="#dlg-buttons"><div class="ftitle">User Information</div><form id="fm" method="post"><div class="fitem"><label>First Name:</label><input type="hidden" name="id"></div><div class="fitem"><label>First Name:</label><input name="firstname" class="easyui-validatebox" required="true"></div><div class="fitem"><label>Last Name:</label><input name="lastname" class="easyui-validatebox" required="true"></div><div class="fitem"><label>Phone:</label><input name="phone"></div><div class="fitem"><label>Email:</label><input name="email" class="easyui-validatebox" validType="email"></div></form>
</div>
<!--  新增(form表单) end  --><!--  新增中保存和取消按钮 start  -->
<div id="dlg-buttons"><a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<!--  新增中保存和取消按钮 end  -->
</body><script type="text/javascript"><!-- 新增用户窗口 -->function newUser() {$("#dlg").dialog("open").dialog('setTitle','New User');$("#fm").form("clear");url = "/datagrid/saveOrUpdate";}

　　 <!-- 编辑用户窗口  -->    function editUser(){        var row = $("#dg").datagrid("getSelected");        if(row) {            $("#dlg").dialog("open").dialog("setTitle","Edit User");            $("#dlg").form("load",row);            url = "/datagrid/saveOrUpdate?id="+row.id;        }    }

    <!-- 保存用户 -->    function saveUser() {        $("#fm").form('submit',{            url: url,            method:"post",            onSubmit: function() {                return $(this).form('validate');            },            success: function (result) {                var result = eval('('+ result +')');                if (result.errorMsg){                    $.messager.show({                        title: 'Error',                        msg: result.errorMsg                    });                } else {                    $('#dlg').dialog('close');    // close the dialog                    $('#dg').datagrid('reload');   // reload the user data                }            },        });    }

</script>

　　b)、后台交互代码

/*** Copyright (C), 2015-2018, XXX有限公司* FileName: DatagridController* Author:   JohnEricCheng* Date:     2018/9/25 14:56* Description:* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.itcast.jqueryui.controller;import com.alibaba.fastjson.JSON;
import com.itcast.jqueryui.entities.Datagrid;
import com.itcast.jqueryui.service.DatagridService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;@Controller
@RequestMapping("/datagrid")
public class DatagridController {@Autowiredprivate DatagridService datagridService;/*** 获取所有用户列表** @return*/@RequestMapping("/list")@ResponseBodypublic List<Datagrid> list() {List<Datagrid> datagridList = datagridService.list();return datagridList;}/*** 保存或修改用户** @param id* @param firstname* @param lastname* @param phone* @param email* @return*/@PostMapping("/saveOrUpdate")@ResponseBodypublic boolean saveOrUpdate(@RequestParam Integer id, @RequestParam String firstname, @RequestParam String lastname, @RequestParam String phone, @RequestParam String email) {Datagrid datagrid = new Datagrid();datagrid.setId(id);datagrid.setFirstname(firstname);datagrid.setLastname(lastname);datagrid.setPhone(phone);datagrid.setEmail(email);return datagridService.saveOrUpdate(datagrid);}
}

/*** Copyright (C), 2015-2018, XXX有限公司* FileName: DatagridService* Author:   JohnEricCheng* Date:     2018/9/25 15:16* Description:* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.itcast.jqueryui.service;import com.itcast.jqueryui.entities.Datagrid;
import org.springframework.transaction.annotation.Transactional;import java.util.List;public interface DatagridService {public List<Datagrid> list();@Transactionalpublic boolean saveOrUpdate(Datagrid datagrid);@Transactionalpublic boolean delete(Integer id);
}

/*** Copyright (C), 2015-2018, XXX有限公司* FileName: DatagridServiceImpl* Author:   JohnEricCheng* Date:     2018/9/25 15:17* Description:* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.itcast.jqueryui.service.impl;import com.itcast.jqueryui.dao.DatagridDao;
import com.itcast.jqueryui.entities.Datagrid;
import com.itcast.jqueryui.service.DatagridService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class DatagridServiceImpl implements DatagridService {@Autowiredprivate DatagridDao datagridDao;@Overridepublic List<Datagrid> list() {return datagridDao.findAll();}@Overridepublic boolean saveOrUpdate(Datagrid datagrid) {return datagridDao.saveOrUpdate(datagrid);}@Overridepublic boolean delete(Integer id) {return datagridDao.delete(id);}
}

/*** Copyright (C), 2015-2018, XXX有限公司* FileName: DatagridDao* Author:   JohnEricCheng* Date:     2018/9/25 15:22* Description:* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.itcast.jqueryui.dao;import com.itcast.jqueryui.entities.Datagrid;
import org.apache.ibatis.annotations.Mapper;import java.util.List;@Mapper
public interface DatagridDao {public List<Datagrid> findAll();public boolean saveOrUpdate(Datagrid datagrid);public boolean delete(Integer id);
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itcast.jqueryui.dao.DatagridDao"><select id="findAll" resultType="Datagrid">select id,firstname,lastname,phone,email from users;</select><insert id="saveOrUpdate" ><!--    <selectKey keyProperty="id" resultType="int" order="BEFORE">select count(*) from users where id = #{id}</selectKey>--><if test="id != null">update usersset firstname = #{firstname},lastname = #{lastname},phone = #{phone},email = #{email}where id = #{id}</if><if test="id==null">insert into users values(#{id},#{firstname},#{lastname},#{phone},#{email})</if></insert>
</mapper>

　　d)、页面显示

3、删除用户

　　a)、前台代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Basic DataGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../../static/themes/default/easyui.css" th:href="@{../../../static/themes/default/easyui.css}"><link rel="stylesheet" type="text/css" href="../../../static/themes/icon.css" th:href="@{../../../static/themes/icon.css}"><link rel="stylesheet" type="text/css" href="../demo.css" th:href="@{../demo.css}"><script type="text/javascript" src="../../../static/jquery.min.js" th:href="@{../../../static/jquery.min.js}"></script><script type="text/javascript" src="../../../static/jquery.easyui.min.js" th:href="@{../../../static/jquery.easyui.min.js}"></script>
</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin:20px 0;"></div><!--<table class="easyui-datagrid" title="Basic DataGrid" style="width:580px;height:250px"data-options="singleSelect:true,collapsible:true,url:'/datagrid/list',method:'get'">-->
<!-- 数据列表 start -->
<table id="dg" title="My Users" class="easyui-datagrid" style="width:580px;height:250px"url="/datagrid/list" toolbar="#toolbar" singleSelect="true"  method="get"><thead><tr><th field="id" width="60" align="center">ID</th><th field="firstname" width="100" align="center">First Name</th><th field="lastname" width="100" align="center">Last Name</th><th field="phone" width="160" align="center">Phone</th><th field="email" width="160" align="center">Email</th></tr></thead>
</table>
<!-- 数据列表 end --><!-- 工具按钮 start -->
<div id="toolbar"><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
</div>
<!-- 工具按钮 end --><!--  新增(form表单) start  -->
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"closed="true" buttons="#dlg-buttons"><div class="ftitle">User Information</div><form id="fm" method="post"><div class="fitem"><label>First Name:</label><input type="hidden" name="id"></div><div class="fitem"><label>First Name:</label><input name="firstname" class="easyui-validatebox" required="true"></div><div class="fitem"><label>Last Name:</label><input name="lastname" class="easyui-validatebox" required="true"></div><div class="fitem"><label>Phone:</label><input name="phone"></div><div class="fitem"><label>Email:</label><input name="email" class="easyui-validatebox" validType="email"></div></form>
</div>
<!--  新增(form表单) end  --><!--  新增中保存和取消按钮 start  -->
<div id="dlg-buttons"><a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUser()">Save</a><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<!--  新增中保存和取消按钮 end  -->
</body><script type="text/javascript"><!-- 新增用户窗口 -->function newUser() {$("#dlg").dialog("open").dialog('setTitle','New User');$("#fm").form("clear");url = "/datagrid/saveOrUpdate";}<!-- 编辑用户窗口  -->function editUser(){var row = $("#dg").datagrid("getSelected");if(row) {$("#dlg").dialog("open").dialog("setTitle","Edit User");$("#dlg").form("load",row);url = "/datagrid/saveOrUpdate?id="+row.id;}}<!-- 保存用户 -->function saveUser() {$("#fm").form('submit',{url: url,method:"post",onSubmit: function() {return $(this).form('validate');},success: function (result) {var result = eval('('+ result +')');if (result.errorMsg){$.messager.show({title: 'Error',msg: result.errorMsg});} else {$('#dlg').dialog('close');        // close the dialog$('#dg').datagrid('reload');    // reload the user data
                }},});}<!-- 删除用户  -->function destroyUser() {var row = $("#dg").datagrid("getSelected");if(row) {$.messager.confirm("Confirm","Are you sure you want to destroy this user?",function(r) {if(r) {var url = "/datagrid/delete?id="+row.id;$.post(url,{id:row.id},function(result) {if(result) {$('#dg').datagrid('reload');     //reload the user data}else {$.messager.show({                //show error msgtitle: "Error",msg: result.errorMsg});}},'json');}});}}</script>
</html>

　　b)、后台交互代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itcast.jqueryui.dao.DatagridDao"><select id="findAll" resultType="Datagrid">select id,firstname,lastname,phone,email from users;</select><insert id="saveOrUpdate" ><!--    <selectKey keyProperty="id" resultType="int" order="BEFORE">select count(*) from users where id = #{id}</selectKey>--><if test="id != null">update usersset firstname = #{firstname},lastname = #{lastname},phone = #{phone},email = #{email}where id = #{id}</if><if test="id==null">insert into users values(#{id},#{firstname},#{lastname},#{phone},#{email})</if></insert><delete id="delete" parameterType="integer">delete from users where id = #{id}</delete>
</mapper>

　　c)、页面展示

转载于:https://www.cnblogs.com/JohnEricCheng/p/9706284.html

jQueryEasyUI应用 – datagrid之CRUD应用相关推荐

jquery-easyui中datagrid扩展，隐藏显示表头功能
今天,后台中需要新增一个功能,用户可以自由选择显示的列,之后保存到本地localStroage中.所以扩展了easyui中datagrid的onHeaderContextMenu方法. 使用方法: _ ...
jQuery EasyUI教程之datagrid应用-1
一.利用jQuery EasyUI的DataGrid创建CRUD应用对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
JqueryEasyUI 解决IE下datagrid无法刷新的问题
2019独角兽企业重金招聘Python工程师标准>>> 问题描述: 在使用JqueryEasyUI 时,发现在IE下$('#table').datagrid('reload');无效 ...
使用jquery-easyui写的CRUD插件(2)
首先定义变量代码var options = jQuery.extend({},jQuery.fn.crudUIGrid.defaults, options);var addTypeName = op ...
2、easyUI-创建 CRUD可编辑dataGrid（表格）
在介绍这节之前,我们先看一下效果图: 双击可以进入编辑点击添加可以在下一行显示应用场景,一般不用于这种用户添加(此处只是示例),一般用于多记录,如学历信息,工作经历等在这之前,我们要在index ...
JQueryEasyUI学习笔记（十一）datagrid 右键菜单，冻结列
欢迎大家转载,转载请注明出处! 希望这个笔记对自己和大家有用,但是本人水平有限,如果出错的地方,希望大家指出,多多批评,谢谢! 今天是datagrid框架的冻结列和右键菜单: 废话就不多说了,直接上代 ...
easyui datagrid 不分页_快递物流管理系统(SSM,JQUERY-EASYUI,MYSQL)
知乎视频www.zhihu.com 快递物流管理系统(SSM,JQUERY-EASYUI,MYSQL)(毕业论文27564字,共78页,程序代码,MySQL数据库) 项目源码woc.xin [运行 ...
JQueryEasyUI datagrid框架的基本使用
http://www.jb51.net/article/35348.htm 今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重 ...
Spring Boot EasyUI datagrid
jQueryEasyUI详解 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面. 开发者 ...

jQueryEasyUI应用 – datagrid之CRUD应用

本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用

一、前言准备

二、搭建项目并开发

jQueryEasyUI应用 – datagrid之CRUD应用相关推荐

最新文章

热门文章