jQueryEasyUI应用 – datagrid之CRUD应用

最新推荐文章于 2021-06-19 15:14:51 发布
最新推荐文章于 2021-06-19 15:14:51 发布
阅读量170 收藏
点赞数
文章标签： javascript java 数据库 ViewUI
原文链接：http://www.cnblogs.com/JohnEricCheng/p/9706284.html
版权

本文 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" ο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 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)、页面展示

 

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

dongdi1986
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用easyui的DataGrid实现即时编辑(CRUD)
smwhotjay的专栏
05-10 603
首先来个Basic DataGrid，只显示列表。如图tag_cloud.sql /* Navicat MySQL Data Transfer Source Server         : code Source Server Version : 50538 Source Host           : localhost:3306 Source Database       : blog...
使用easyUI创建一个CRUD DataGrid
YHC
08-08 4121
@author YHC 在以前的示例中我们创建crud应用使用对话框(dialog)组件创建和编辑用户信息,这个教程将告诉你如何创建一个crud datagrid,我们将使用可编辑的datagrid插件做这些crud操作动作. 查看DEMO 步骤1:在HTML标记中定义一个DataGrid <table id="dg" title="My Users" style="w
雷林鹏分享：jQuery EasyUI 应用 - 创建 CRUD 数据网格
weixin_30267697的博客
05-16 128
　　jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid) 　　在上一章节中，我们使用对话框(dialog)组件创建了 CRUD 应用来创建和编辑用户信息。本教程我们将告诉您如何创建一个 CRUD 数据网格(DataGrid)。 我们将使用 可编辑的数据网格(DataGrid)插件 来完成这些 CRUD 操作动作。 　　步骤 1：在 HTML 标签中定义数据网格...
struts2 easyui实现datagrid的crud
程序员小董的专栏
03-12 2750
最近两天因为项目需要,接触了easyui,要用它的datagrid实现crud。第一次做,花了一天时间才完成所有功能,昨天做另外一个模块,同样的功能只用了两个小时。 现在把第一次做datagrid时遇到的问题记录下来,帮助自己记忆。同时也帮助其他第一次接触easyui的朋友。 问题 json到底有多少种? 当时项目里json的jar包是我直接从别的项目里拷过来的。结果在下面的语句里报错
easyui的crud（datagrid、dialog、form）
qq_43226989的博客
10-08 225
基本操作（如果需要详细了解请去jQuery EasyUI API 里了解） 1、datagrid（数据表格） 数据表格是基于table标签的 $(’#dg’).datagrid({ url:‘datagrid_data.json’, columns:[[ {field:‘code’,title:‘代码’,width:100}, {field:‘name’,title:‘名称’,width:1...
easyui crud java_jquery easyui利用DataGrid实现CRUD操作
weixin_34902464的博客
02-23 128
在easyui中，DataGrid可以通过detailview实现行的展开和收缩，利用这个特性可以实现基本的CRUD操作。如下图：展开行时，动态加载表单并装载数据，保存或取消表单操作时再收缩行。首先，建立表格基本框架：复制代码 代码示例:First NameLast NamePhoneEmailNewDestroy以上代码把DataGrid和工具栏都建好了，不用再编写JS代码。2，接着，应用det...
easyui-datagrid crud 表格
yuxiaoc的博客
06-19 104
方法1 <%-- Created by IntelliJ IDEA. User: 22531 Date: 2021/6/2 Time: 15:56 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head>
jQuery EasyUI 框架实现一个 CRUD DataGrid
ancientear的博客
09-18 303
创建CRUD应用（ jQuery EasyUI 框架实现一个 CRUD DataGrid） crud是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。crud主要被用在描述软件系统中数据库或者持久层的基本操作功能。 在这里需要四个插件： • datagrid：向用户展示列表数据。 • dialog：创建或编辑一条...
jQuery EasyUI使用教程之构建CRUD DataGrid
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-22 720
在本教程中，我们将为大家展示如何创建一个CRUD DataGrid。在这期间将使用到可编辑的datagrid插件来同这些crud操作一起工作。 Step 1：在HTML标记中定义DataGrid 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
jQuery 1.6 API 中文版 CHM
01-13
这是我自己整理的jquery1.6的中文帮助文档，CHM版的。所以分数可能高一点。此文档包含了jquery官方1.6的接口，CHM排版遵循了jquery 1.4的中文版的CHM帮助文档。下载把，如果感觉好，请在留言中夸奖一下，给我更大的动力。本人也会不断的更新jquery1.6的中文版帮助文档CHM，欢迎关注本人微博http://weibo.com/702434409
easyui datagrid自定义按钮列,即最后面的操作列
热门推荐
axe的专栏
12-13 10万+
做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jquery easyUI 1.3.2 这里我的实现方式是采用HTML形式,js方式暂时还没用到 首先是HTML部分 <table id="dg" title="学生信息" class="easyui-datagrid" url="${ctx}listStu
jQuery EasyUI教程之datagrid应用（三）
hegz
03-18 418
jQuery EasyUI教程之datagrid应用（三）   三、设定或定制各种功能   1、增加分页   创建DataGrid数据表格   设置“url”属性，用来装入远端服务器数据，服务器返回JSON格式数据。 &lt;table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url=...
学习Jquery EasyUI的添加，修改，删除，查询等基本操作
weixin_34279246的博客
04-22 160
初识Jquery EasyUI看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例。写了一些基本的增删改查功能，算是对该控件的基本入门。后续有时间继续深入学习。 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后...
jQuery EasyUI教程之datagrid应用
幻羽公子的博客
02-04 841
一、利用jQuery EasyUI的DataGrid创建CRUD应用       对网页应用程序来说，正确采集和管理数据通常很有必要，DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。 我们会用到如下插件: · datagrid: 列表显示数据。 · d
easy-ui
05-28 391
原来的网址： 先看一下运行后的页面 1、列表展示 2、新增页面 3、修改页面 把jquery easyui下载好之后，一般引用下页几个文件 复制代码 代码如下:             type="text/css" /> //页面图标样式         //jquery easyui主要的js     首先是列表展
第04章节-Python3.5-组件BootStrap、EasyUI、JQueryUI1用法 3
weixin_34220623的博客
07-20 91
EasyUI用法: 把EasyUI下载到本地,然后看文档找到自己想要的样式,然后写到自己的代码里(推荐看源码里的demo文件里的源码)[但存在大量的Ajax操作]{不推荐用} 打开 (http://www.jeasyui.net/)或(http://www.jeasyui.com/download/v155...
使用 EasyUI+MySQL+Servlet 实现用户数据维护功能
IT小村
11-25 8095
一、前言 用过 EasyUI 的人都知道，它是一个很好的显示数据的框架，如 SQLyog 这种非客户人员使用的页面，是不需要追求太多的特效的页面，只需要 ①方便地对数据进行分页显示、操作 ②方便数据地进行增删改查地处理。 ③写一个简单的信息管理系统，如课程设计、毕业设计、小型的外包。 EasyUI 无疑是最好的选择了。 下面是笔者写的一个简单的增删改的页面，也方便大家的理解，大家可以以...
BootStrap实例
weixin_34060299的博客
06-02 356
S1.html <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Checkbox in DataList - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css"...
jQuery EasyUI API 中文文档 – DataGrid数据表格
12-11
"jQuery EasyUI API 中文文档 – DataGrid数据表格" jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的组件，如 DataGrid，用于创建交互式的数据表格。DataGrid 是一个功能强大的表格控件，它可以显示、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值