jQueryEasyUI应用 – datagrid之CRUD应用
本文 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: root
password: 123456
dbcp2:
min-idle: 5
initial-size: 10
max-total: 10
max-wait-millis: 200
resources:
static-locations: ["classpath:/static/","classpath:/templates/demo/datagrid","classpath:/","classpath:/templates"]
pagehelper:
helper-dialect: mysql
reasonable: true
support-methods-arguments: true
params: count=countSql
offset-as-page-num: true
row-bounds-with-count: true
d)、mybatis.cfg.xml配置文件
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//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; } @Override public 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 { @Autowired private DatagridService datagridService; /** * 获取所有用户列表 * * @return */ @RequestMapping("/list") @ResponseBody public 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(); @Transactional public boolean saveOrUpdate(Datagrid datagrid); @Transactional public 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 { @Autowired private DatagridDao datagridDao; @Override public List<Datagrid> list() { return datagridDao.findAll(); } @Override public boolean saveOrUpdate(Datagrid datagrid) { return datagridDao.saveOrUpdate(datagrid); } @Override public 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 mapper PUBLIC "-//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 { @Autowired private DatagridService datagridService; /** * 获取所有用户列表 * * @return */ @RequestMapping("/list") @ResponseBody public List<Datagrid> list() { List<Datagrid> datagridList = datagridService.list(); return datagridList; } /** * 保存或修改用户 * * @param id * @param firstname * @param lastname * @param phone * @param email * @return */ @PostMapping("/saveOrUpdate") @ResponseBody public 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(); @Transactional public boolean saveOrUpdate(Datagrid datagrid); @Transactional public 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 { @Autowired private DatagridDao datagridDao; @Override public List<Datagrid> list() { return datagridDao.findAll(); } @Override public boolean saveOrUpdate(Datagrid datagrid) { return datagridDao.saveOrUpdate(datagrid); } @Override public 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 mapper PUBLIC "-//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 users set 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" 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 } }, }); } <!-- 删除用户 --> 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 msg title: "Error", msg: result.errorMsg }); } },'json'); } }); } } </script> </html>
b)、后台交互代码
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//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 users set 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)、页面展示