Spring Boot 系列教程7-EasyUI-datagrid

jQueryEasyUI

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

案例使用EasyUI插件

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

对user表进行CRUD，分页，简单查询

• 列表
  
  
• 新增
  
  
• 修改
  
  

项目图片

InitApplicationListener

在启动服务器的时候，插入默认数据

package com.jege.spring.boot.controller;

import org.springframework.context.ApplicationContext;

import org.springframework.context.ApplicationListener;

import org.springframework.context.event.ContextRefreshedEvent;

import org.springframework.stereotype.Component;

import com.jege.spring.boot.data.jpa.entity.User;

import com.jege.spring.boot.data.jpa.repository.UserRepository;

/**

 * @author JE哥

 * @email [email protected]

 * @description:spring的事件监听器的处理机制：在启动服务器的时候，插入默认数据

 */

@Component

public class InitApplicationListener implements ApplicationListener<ContextRefreshedEvent> {

  @Override

  public void onApplicationEvent(ContextRefreshedEvent event) {

    ApplicationContext context = event.getApplicationContext();

    UserRepository userRepository = context.getBean("userRepository", UserRepository.class);

    for (int i = 1; i < 21; i++) {

      User user = new User("user" + i, 25 + i);

      userRepository.save(user);

    }

  }

}

CommonExceptionAdvice

package com.jege.spring.boot.exception;

import java.util.Set;

import javax.validation.ConstraintViolation;

import javax.validation.ConstraintViolationException;

import javax.validation.ValidationException;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.dao.DataIntegrityViolationException;

import org.springframework.http.HttpStatus;

import org.springframework.http.converter.HttpMessageNotReadableException;

import org.springframework.validation.BindException;

import org.springframework.validation.BindingResult;

import org.springframework.validation.FieldError;

import org.springframework.web.HttpMediaTypeNotSupportedException;

import org.springframework.web.HttpRequestMethodNotSupportedException;

import org.springframework.web.bind.MethodArgumentNotValidException;

import org.springframework.web.bind.MissingServletRequestParameterException;

import org.springframework.web.bind.annotation.ControllerAdvice;

import org.springframework.web.bind.annotation.ExceptionHandler;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.ResponseStatus;

import com.jege.spring.boot.json.AjaxResult;

/**

 * @author JE哥

 * @email [email protected]

 * @description:全局异常处理

 */

@ControllerAdvice

@ResponseBody

public class CommonExceptionAdvice {

  private static Logger logger = LoggerFactory.getLogger(CommonExceptionAdvice.class);

  /**

   * 400 - Bad Request

   */

  @ResponseStatus(HttpStatus.BAD_REQUEST)

  @ExceptionHandler(MissingServletRequestParameterException.class)

  public AjaxResult handleMissingServletRequestParameterException(MissingServletRequestParameterException e) {

    logger.error("缺少请求参数", e);

    return new AjaxResult().failure("required_parameter_is_not_present");

  }

  /**

   * 400 - Bad Request

   */

  @ResponseStatus(HttpStatus.BAD_REQUEST)

  @ExceptionHandler(HttpMessageNotReadableException.class)

  public AjaxResult handleHttpMessageNotReadableException(HttpMessageNotReadableException e) {

    logger.error("参数解析失败", e);

    return new AjaxResult().failure("could_not_read_json");

  }

  /**

   * 400 - Bad Request

   */

  @ResponseStatus(HttpStatus.BAD_REQUEST)

  @ExceptionHandler(MethodArgumentNotValidException.class)

  public AjaxResult handleMethodArgumentNotValidException(MethodArgumentNotValidException e) {

    logger.error("参数验证失败", e);

    BindingResult result = e.getBindingResult();

    FieldError error = result.getFieldError();

    String field = error.getField();

    String code = error.getDefaultMessage();

    String message = String.format("%s:%s", field, code);

    return new AjaxResult().failure(message);

  }

  /**

   * 400 - Bad Request

   */

  @ResponseStatus(HttpStatus.BAD_REQUEST)

  @ExceptionHandler(BindException.class)

  public AjaxResult handleBindException(BindException e) {

    logger.error("参数绑定失败", e);

    BindingResult result = e.getBindingResult();

    FieldError error = result.getFieldError();

    String field = error.getField();

    String code = error.getDefaultMessage();

    String message = String.format("%s:%s", field, code);

    return new AjaxResult().failure(message);

  }

  /**

   * 400 - Bad Request

   */

  @ResponseStatus(HttpStatus.BAD_REQUEST)

  @ExceptionHandler(ConstraintViolationException.class)

  public AjaxResult handleServiceException(ConstraintViolationException e) {

    logger.error("参数验证失败", e);

    Set<ConstraintViolation<?>> violations = e.getConstraintViolations();

    ConstraintViolation<?> violation = violations.iterator().next();

    String message = violation.getMessage();

    return new AjaxResult().failure("parameter:" + message);

  }

  /**

   * 400 - Bad Request

   */

  @ResponseStatus(HttpStatus.BAD_REQUEST)

  @ExceptionHandler(ValidationException.class)

  public AjaxResult handleValidationException(ValidationException e) {

    logger.error("参数验证失败", e);

    return new AjaxResult().failure("validation_exception");

  }

  /**

   * 405 - Method Not Allowed

   */

  @ResponseStatus(HttpStatus.METHOD_NOT_ALLOWED)

  @ExceptionHandler(HttpRequestMethodNotSupportedException.class)

  public AjaxResult handleHttpRequestMethodNotSupportedException(HttpRequestMethodNotSupportedException e) {

    logger.error("不支持当前请求方法", e);

    return new AjaxResult().failure("request_method_not_supported");

  }

  /**

   * 415 - Unsupported Media Type

   */

  @ResponseStatus(HttpStatus.UNSUPPORTED_MEDIA_TYPE)

  @ExceptionHandler(HttpMediaTypeNotSupportedException.class)

  public AjaxResult handleHttpMediaTypeNotSupportedException(Exception e) {

    logger.error("不支持当前媒体类型", e);

    return new AjaxResult().failure("content_type_not_supported");

  }

  /**

   * 500 - Internal Server Error

   */

  @ResponseStatus(HttpStatus.OK)

  @ExceptionHandler(ServiceException.class)

  public AjaxResult handleServiceException(ServiceException e) {

    logger.error("业务逻辑异常", e);

    return new AjaxResult().failure("业务逻辑异常：" + e.getMessage());

  }

  /**

   * 500 - Internal Server Error

   */

  @ResponseStatus(HttpStatus.OK)

  @ExceptionHandler(Exception.class)

  public AjaxResult handleException(Exception e) {

    logger.error("通用异常", e);

    return new AjaxResult().failure("通用异常：" + e.getMessage());

  }

  /**

   * 操作数据库出现异常:名称重复，外键关联

   */

  @ResponseStatus(HttpStatus.OK)

  @ExceptionHandler(DataIntegrityViolationException.class)

  public AjaxResult handleException(DataIntegrityViolationException e) {

    logger.error("操作数据库出现异常:", e);

    return new AjaxResult().failure("操作数据库出现异常：字段重复、有外键关联等");

  }

}

user.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户管理</title>

<%@include file="/WEB-INF/page/common.jsp"%>

<script type="text/javascript">

    // 页面加载完毕之后才能写jQuery的代码

    $(function() {

        // 声明并缓存easyui组件

        var userDatagrid = $("#userDatagrid");

        var userDialog = $("#userDialog");

        var userForm = $("#userForm");

        var userSearchForm = $("#userSearchForm");

        // 表单的添加方法

        userForm.form({

            url : "/user/save",

            onSubmit : function() {

                // 在表单提交前，做一下验证

                return userForm.form("validate");

            },

            //data是后台save方法返回的json字符串

            success : function(data) {

                // 需要自己把字符串转变成json对象，easyiui没有提供转换

                data = $.parseJSON(data);

                // 判断保存是否成功

                if (data.meta.success) {

                    // 成功就关掉对话框

                    userDialog.dialog("close");

                    //重新加载最新的数据

                    userDatagrid.datagrid("reload");

                } else {

                    $.messager.alert('错误提示', data.meta.message, 'error');

                }

            }

        });

        // 创建操作data-url的json对象，把页面所有linkbutton组件的操作都统一添加到此对象上面

        var urlObjectUser = {

            addUser : function() {

                // 清空对话框里面的表单内容，防止原来的数据有缓存

                userForm.form("clear");

                // 打开对话框，修改标题，然后居中

                userDialog.dialog("open").dialog("setTitle", "添加用户");

            },

            updateUser : function() {

                // 获取选中行数据

                var selectedRow = userDatagrid.datagrid("getSelected");

                // 判断是否选中行

                if (!selectedRow) {

                    $.messager.alert("操作提示", "请先选中一行数据，在修改！！", "info");

                    return;

                }

                // 清空对话框里面的表单内容

                userForm.form("clear");

                //修改的时候才查询上级null数据

                $('#parentCombotree').combotree({

                    url : '${ctx}/user/getTreeByParent'

                });

                // 使用easyui的form组件load方法，只要是相同的名称，会自动回显数据

                userForm.form("load", selectedRow);

                // 打开对话框

                userDialog.dialog("open").dialog("setTitle", "编辑用户");

            },

            removeUser : function() {

                // 获取选中行数据

                var row = userDatagrid.datagrid("getSelected");

                // 判断是否选中行

                if (!row) {

                    $.messager.alert("操作提示", "请选中一行数据，在删除！！", "info");

                    return;

                }

                $.get("/user/delete?id=" + row.id, function(data) {

                    if (data.meta.success) {//删除成功

                        userDatagrid.datagrid("reload");

                    } else {

                        $.messager.alert('错误提示', data.meta.message, 'error');

                    }

                }, 'json');

            },

            reloadUser : function() {//调用重新加载数据的方法

                userDatagrid.datagrid("reload");

            },

            saveUser : function() {//提交表单

                userForm.submit();

            },

            cancelUser : function() {//关闭对话框

                userDialog.dialog("close");

            },

            searchUser : function() {//简单搜索

                userDatagrid.datagrid("load", {

                    q : $("input[name=q]").val()

                });

            }

        };

        // 对页面所有linkbutton组件，统一监听

        $("a[data-url]").on("click", function() {

            // 获取linkbutton的data-url信息

            var url = $(this).data("url");

            //如果此目标方法是存在的并且linkbutton组件没有被禁用，才可以点击

            if (urlObjectUser[url] && !$(this).linkbutton('options').disabled) {

                //调用动态的方法

                urlObjectUser[url]();

            }

        });

    });

</script>

</head>

<body>

    <!-- 数据表格组件 -->

    <table id="userDatagrid" class="easyui-datagrid" url="/user/json" title="用户管理" fit="true" border="false"

        fitColumns="true" singleSelect="true" pagination="true" rownumbers="true" toolbar="#userDatagridToolbar">

        <thead>

            <tr>

                <th data-options="field:'id'">编号</th>

                <th data-options="field:'name',width:10">名称</th>

                <th data-options="field:'age',width:10">年龄</th>

            </tr>

        </thead>

    </table>

    <!-- 数据表格组件工具栏 -->

    <div class="easyui-layout" fit="true">

        <div id="userDatagridToolbar" region="north" border="false"

            style="border-bottom: 1px solid #ddd; height: 32px; padding: 2px 5px; background: #fafafa;">

            <div style="float: left;">

                <a data-url="addUser" href="javascript:void(0)" class="easyui-linkbutton c1" iconCls="icon-add">添加</a> <a

                    data-url="updateUser" href="javascript:void(0)" class="easyui-linkbutton c2" iconCls="icon-edit">编辑</a> <a

                    data-url="removeUser" href="javascript:void(0)" class="easyui-linkbutton c3" iconCls="icon-remove">删除</a>

                <a data-url="reloadUser" href="javascript:void(0)" class="easyui-linkbutton c4" iconCls="icon-reload">刷新</a>

                <a href="javascript:void(0)" class="easyui-linkbutton c8" iconCls="icon-search" data-url="searchUser"

                    disabled="true">不能点击的按钮,点击了也没有事件处理</a>

            </div>

            <div style="float: right">

                <form method="post">

                    关键字：<input name="q" size="10" /> <a data-url="searchUser" href="javascript:void(0)"

                        class="easyui-linkbutton c5" iconCls="icon-search">搜索</a>

                </form>

            </div>

        </div>

    </div>

    <!-- 添加/编辑用户对话框 -->

    <div id="userDialog" class="easyui-dialog" style="width: 360px; height: 260px; padding: 10px 20px"

        title="管理用户对话框" data-options="closed:true,modal:true,buttons:'#userDialogButtons',resizable:true">

        <form id="userForm" method="post">

            <input type="hidden" name="id" />

            <div class="ftitle">用户信息</div>

            <table align="center">

                <tr>

                    <td>名称:</td>

                    <td><input class='easyui-validatebox' required="true" type='text' name='name'></input></td>

                </tr>

                <tr>

                    <td>年龄:</td>

                    <td><input class='easyui-numberbox' required="true" min="20" max="80" precision="0" type='text'

                        name='age'></input></td>

                </tr>

            </table>

        </form>

    </div>

    <!-- 对话框按钮组件 -->

    <div id="userDialogButtons">

        <a data-url="saveUser" href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok"

            style="width: 90px">保存</a> <a data-url="cancelUser" href="javascript:void(0)" class="easyui-linkbutton c7"

            iconCls="icon-cancel" style="width: 90px">取消</a>

    </div>

</body>

</html>

其他关联代码

• Spring Boot 系列教程7-EasyUI-datagrid
  
  http://blog.csdn.net/je_ge/article/details/5332652599999999
• Spring Boot 系列教程5-热部署-devtools模块
  
  http://blog.csdn.net/je_ge/article/details/53326525
• Spring Boot 系列教程2-Data JPA
  
  http://blog.csdn.net/je_ge/article/details/53294949

删除异常运行流程

• 修改UserController.delete,添加int a = 1 / 0;出现通用异常：/ by zero

源码地址

https://github.com/je-ge/spring-boot

如果觉得我的文章对您有帮助,请予以打赏。您的支持将鼓励我继续创作!谢谢！