Spring Boot 菜鳥教程 7 EasyUI datagrid

阿新 • • 發佈：2019-01-01

GitHub

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>

其他關聯程式碼

刪除異常執行流程

修改UserController.delete,新增int a = 1 / 0;出現通用異常：/ by zero

原始碼地址

如果覺得我的文章或者程式碼對您有幫助,可以請我喝杯咖啡。
您的支援將鼓勵我繼續創作!謝謝！
微信打賞
支付寶打賞

Spring Boot 菜鳥教程 7 EasyUI datagrid

GitHub jQueryEasyUI jQuery EasyUI是一組基於jQuery的UI外掛集合體，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI介面。開發者不需要編寫複雜的javascript，

Spring Boot 菜鳥教程 24 返回XML

GitHub 需求產生一般RESTful都是返回json，有時候可能需要返回xml，那又怎樣操作呢？方案1-Jackson Maven增加jar檔案匯入 <dependency> <groupId>

Spring Boot 菜鳥教程 application.properties 常用配置

SPRING CONFIG (ConfigFileApplicationListener) spring.config.name 配置檔名稱，預設為application spring.config.location 配置檔案存放位置

Spring Boot 菜鳥教程 5 熱部署 devtools模組

GitHub devtools模組 devtools模組，是為開發者服務的一個模組。主要的功能就是程式碼修改後一般在5秒之內就會自動重新載入至伺服器，相當於restart成功。原理分析簡單原理在發現程式碼有更改之後，自動重新啟動應

Spring Boot 菜鳥教程 17 Cache-快取

GitHub 快取快取就是資料交換的緩衝區（稱作Cache），當某一硬體要讀取資料時，會首先從快取中查詢需要的資料，如果找到了則直接執行，找不到的話則從記憶體中找。由於快取的執行速度比記憶體快得多，故快取的作用就是幫助硬體更快地執行。因為快取往

Spring Boot 菜鳥教程 6 全域性異常處理

GitHub @ControllerAdvice原始碼 package org.springframework.web.bind.annotation; import java.lang.annotation.Annotation; impor

Spring Boot 菜鳥教程 27 內建tomcat訪問https

GitHub HTTPS HTTPS（全稱：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全為目標的HTTP通道，簡單講是HTTP的安全版。即HTTP下加入SSL層，HTTPS

Spring Boot 菜鳥教程 28 多配置檔案

GitHub 需求產生開發過程中可能會有如下需求：開發和部署的配置資訊可能不同，常規的方式就是在配置檔案裡面先寫好開發配置，在部署的時候再去修改這些配置，這樣可能會出現很多問題，比如使用者名稱、密碼忘記了修改或者改錯了等問題。專案結構圖片

Spring Boot 菜鳥教程 1 HelloWorld

GitHub 技能要求最好對Spring有一定認識最好對Maven有一定認識簡介 Spring Boot是由Pivotal團隊提供的全新框架，其設計目的是用來簡化新Spring應用的初始搭建以及開發過程。該框架使用了特定的方式來進行

菜鳥教程之工具使用（五）——JRebel與Windows服務的Tomcat集成

-m end 個人再見 proc key pre 安裝 target 之前寫過一篇Tomcat借助JRebel支持熱部署的文章——《借助JRebel使Tomcat支持熱部署》。介紹的是在開發、測試環境中的配置。可是正式的部署環境。我們不會通過命令行來啟動Tomcat，

Angular js 過濾器筆記（轉自菜鳥教程）

per test 筆記 ring ood filter 子集 true 貨幣格式 1、uppercase，lowercase 大小寫轉換 {{ "lower cap string" | uppercase }} // 結果：LOWER CAP STRING {{ "TA

菜鳥教程-練習實例答案I

core 其中a是一個數字再落下乘法 white 超過 -1 英文字母三位數題目：有四個數字：1、2、3、4，能組成多少個互不相同且無重復數字的三位數？各是多少？ 1 #coding=utf-8 2 3 from itertools import permuta

菜鳥教程 Python 手記 1

報錯信息數據類型字符串表 ring max last pda 每次 none Python是一種解釋型、面向對象、動態數據類型的高級程序設計語言。編碼編碼默認情況下，Python 3 源碼文件以 UTF-8 編碼，所有字符串都是 unicode 字符串。當然你

sphinx 菜鳥教程

edt cool lis file lpad 抽象 mage settings length 簡介 Sphinx 是一種工具，它允許開發人員以純文本格式編寫文檔，以便采用滿足不同需求的格式輕松生成輸出。這在使用 Version Control System 追蹤變更時非常有

JPA 菜鳥教程 15 繼承-一個表-SINGLE_TABLE

column turn rate pre school fill 技術一個表 tor 原地址：http://blog.csdn.net/JE_GE/article/details/53678422 繼承映射策略一個類繼承結構一個表的策略，最終只生成一個表，這是繼承映射的

Java 8 新特性-菜鳥教程 (3) -Java 8 函數式接口

但是 style vax arr 結果友好 face todo 兩個 Java 8 函數式接口函數式接口(Functional Interface)就是一個有且僅有一個抽象方法，但是可以有多個非抽象方法的接口。函數式接口可以被隱式轉換為lambda表達式。函數式接口

Linux學習_菜鳥教程_1

ssh sync 起點計算機 16px 指令 span 語句完成 Linux系統啟動過程：內核的引導、運行init、系統初始化、建立終端、用戶登錄系統內核引導：計算機開機，然後BIOS開機自檢，按照BIOS中設置的啟動設備（通常是硬盤）來啟動。操作系統接管硬件以後

Java菜鳥教程———學習筆記

class this 關鍵字多繼承之間字母 ext javac 多個編譯錯誤（1）Java中的繼承有兩種：extends 和 implements extends 類的繼承是單一繼承，也就是說，一個子類只能擁有一個父類，所以 extends 只能繼承一個類。使用

【菜鳥教程】小白接觸白鷺引擎4天，成功做了一款足球小遊戲

下一步發現 https sta 圖片 sce 變量名找到是否寫在前面：隨著越來越多的新人開始接觸白鷺引擎，創作屬於自己的遊戲。考慮到初學者會遇到一些實際操作問題，我們近期整理推出“菜鳥”系列技術文檔，以便更好的讓這些開發者們快速上手，Egret大神們可以自動忽略此類

PHP Ajax 跨域問題最佳解決方案【摘自菜鳥教程】

set color ray quest origin tty 所有 $origin con PHP Ajax 跨域問題最佳解決方案分類編程技術 http://www.runoob.com/w3cnote/php-ajax-cross-border.html 本文

Spring Boot 菜鳥教程 7 EasyUI datagrid

GitHub

jQueryEasyUI

案例使用EasyUI外掛

對user表進行CRUD，分頁，簡單查詢

專案圖片

初始化類InitApplicationListener

全域性異常處理CommonExceptionAdvice

user.jsp頁面

其他關聯程式碼

刪除異常執行流程

原始碼地址

相關推薦