Spring Boot 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;/*** spring的事件监听器的处理机制:在启动服务器的时候,插入默认数据*/
@Component
public class InitApplicationListener implements ApplicationListener<ContextRefreshedEvent> {@Overridepublic 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;/*** 全局异常处理*/
@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> <adata-url="updateUser" href="javascript:void(0)" class="easyui-linkbutton c2" iconCls="icon-edit">编辑</a> <adata-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>

扫一扫关注和我共同进步哟!!!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565227.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB使用教程(三)——在文件中编程

1.把matlab编码调整为utf-8编码 首先&#xff0c;删除这个部分&#xff08;一定先备份这个lcdata.xml文件&#xff0c;备份就是拷贝一个副本&#xff09;&#xff0c;我的是2016版&#xff0c;大概在这里&#xff0c;你们可以搜索以下&#xff1a; 然后&#xff0c;找到这个部分…

Spring Boot EasyUI edatagrid 扩展

edatagrid扩展组件详解 edatagrid组件是datagrid的扩展组件&#xff0c;增加了统一处理CRUD的功能&#xff0c;可以用在数据比较简单的页面。使用的时候需要额外引入jquery.edatagrid.js为了能够把后台自动捕获的异常显示到前台这里必须使用最新版本的jquery.edatagrid.js文件能…

MATLAB使用教程(4)——悄悄滴上手项目

目录 1.计算一元二次方程 2.看一元方程的图形 有个小疑问&#xff1f; 惊喜&#xff1a; 总结 1.计算一元二次方程 这一讲我们以科学计算开始&#xff0c;使用matlab计算精确度很高&#xff0c;我们可以尝试来计算一下黄金分割率&#xff08;定义大家可以自行百度一下&am…

两万字详细爬虫知识储备,数据采集与清洗基础习题(一)头歌参考答案

数据采集习题参考答案&#xff0c;会持续更新&#xff0c;点个关注防丢失。为了方便寻找&#xff0c;按照头歌的门类从新整理了实训的分类&#xff0c;朋友们记得看标题哦&#xff0c;按标题寻找&#xff01; 该篇为爬虫知识储备&#xff01; 文章目录 实训一&#xff1a;HTM…

Spring Boot swagger之前后端分离

前后端分离详解 现在的趋势发展&#xff0c;需要把前后端开发和部署做到真正的分离做前端的谁也不想用Maven或者Gradle作为构建工具做后端的谁也不想要用Grunt或者Gulp作为构建工具前后端需要通过接口来协作 可能是JSON格式的RESTFul的接口可能是XML的接口重点是后台只负责数据…

MATLAB基础教程(5)——斐波那契数列

目录 前言 正文开始啦&#xff1a; 总体思路&#xff1a; 首先创建文件&#xff1a; 编写 fibo_use.m 文件的内容代码 编写 fibonacci_mine.m 文件中的代码 代码运行 总结&#xff1a; 前言 斐波那契数列是一个很有趣的数列&#xff0c;有趣的地方在两点&#xff0c;在…

数据采集与清洗基础习题(二)Python爬虫常用模块,头歌参考答案

数据采集习题参考答案&#xff0c;会持续更新&#xff0c;点个关注防丢失。为了方便查找&#xff0c;已按照头歌重新排版&#xff0c;朋友们按照头歌所属门类查找实训哦&#xff0c;该篇为Python爬虫常用模块。 创作不易&#xff0c;一键三连给博主一个支持呗。 文章目录 实…

Spring Boot freemarker导出word下载

freemarker详解 FreeMarker是一款模板引擎&#xff1a; 即一种基于模板和要改变的数据&#xff0c; 并用来生成输出文本&#xff08;HTML网页、电子邮件、配置文件、源代码等&#xff09;的通用工具。 它不是面向最终用户的&#xff0c;而是一个Java类库&#xff0c;是一款程序…

学生用计算机怎么累加,计算机一级OFFICE辅导:累加小技巧

我们在工作中常常需要在已有数值的单元格中再增加或减去另一个数。一般是在计算器中计算后再覆盖原有的数据。这样操作起来很不方便。考试大编辑推荐一个小技巧&#xff0c;可以有效地简化老式的工作过程。(1).创建一个宏&#xff1a;选择Excel选单下的“工具→宏→录制新宏”选…

不同进制之间的转化

将二进制、八进制、十六进制转换为十进制 二进制、八进制和十六进制向十进制转换都非常容易&#xff0c;就是“按权相加”。所谓“权”&#xff0c;也即“位权”。 假设当前数字是 N 进制&#xff0c;那么&#xff1a; 对于整数部分&#xff0c;从右往左看&#xff0c;第 i 位…

[刨根问底] 五分钟搞懂组合评价模型—模糊Borda (以2021 年大学生数模国赛C题为例)

组合评价模型—模糊Borda(Matlab) 我们的征途是星辰大海&#xff0c;而并非烟尘人间。 目录 组合评价模型—模糊Borda(Matlab) 一、模糊Borda法简介 二、模糊Borda法主要步骤 &#xff08;1&#xff09;计算隶属度 &#xff08;2&#xff09;计算模糊频数 &#xff08;…

计算机桌面右键新建展不开,Win10右键新建不见了怎么办?Win10电脑桌面右键新建没有了解决方法...

近期有Win10用户遇到一个问题&#xff0c;也就是电脑桌面右键新建没有了&#xff0c;比如想要创建一个文本文档、文件夹、Word&#xff0c;没有新建功能无法创建&#xff0c;那么Win10右键新建不见了怎么办&#xff1f;下面装机之家分享一下Win10电脑桌面右键新建没有了解决方法…

最常用的客观赋权方法——熵权法

我们的征途是星辰大海&#xff0c;而并非烟尘人间。 文章目录 一、熵权法的原理 1.1 信息熵 1.2 熵权法 二、熵权法的主要步骤 2.1 数据标准化 2.2 求各指标在各方案下的比值 2.3 求各指标的信息熵。 2.4 确定各指标的权重 2.4.1 通过信息熵计算各指标的权重&#…

2017韩老师计算机网络,2017年计算机等考三级网络技术辅导:计算机网络拓扑结构...

1&#xff0e;计算机网络拓扑的定义计算机网络设计的第一步就是网络拓扑设计。拓扑学是几何学的一个分支。计算机网络拓扑是通过网中结点与通信线路之间的几何关系表示网络结构&#xff0c;反映出网络各实体之间的结构关系。2&#xff0e;网络拓扑的分类网络拓扑可以根据通信子…

Spring Boot html页面解析之jsoup

目的 我们要对一个页面进行数据抓取&#xff0c;并导出doc文档 html解析器 jsoup 直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API&#xff0c;可通过DOM&#xff0c;CSS以及类似于JQuery的操作方法来取出和操作数据。 htmlparser 提供了线性和嵌套两种方…

2021年五一杯数学建模A题(疫苗生产调度问题)详细分析

目录 一、基本介绍 1.1 题目描述 1.2 待解决问题 二、问题分析与求解 2.1 问题一分析与求解 2.2 问题二分析与求解 2.3 问题三分析与求解 2.4 问题四分析与求解 2.5 问题五分析与求解 三、完整代码 四、总结 一、基本介绍 1.1 题目描述 新冠肺炎肆虐全球&#xff0…

Spring Boot EasyPoi导出Excel下载

Java关于excel的操作 Java Excel俗称jxl&#xff0c;可以读取Excel文件的内容、创建新的Excel文件、更新已经存在的Excel文件&#xff0c;现在基本没有更新了 Apache POI是Apache基金组织Jakarta项目的子项目&#xff0c;它包括一系列的API&#xff0c;可以操作多种格式的Mic…

2021年华中杯A题(马赛克瓷砖选色问题)详细分析

目录 一、基本介绍 1.1 题目描述 1.2 待解决问题 二、问题分析与求解 2.1 问题一分析与求解 2.2 问题二分析与求解 2.3 问题三分析与求解 三、完整代码 四、总结 一、基本介绍 1.1 题目描述 马赛克瓷砖是一种尺寸较小&#xff08;常见规格为边长不超过 5cm&#xff09…

计算机无法连接无线信号,win7系统连接无线信号时提示Windows无法连接到路由器名称的四种解决方法...

现如今网络发展速度非常快&#xff0c;无线网络已经普及了&#xff0c;使用率高了遇到的问题也就多了。比如有时候笔记本win7系统连接无线信号时出现“Windows无法连接到路由器名称”(如下图所示)&#xff0c;该如何解决此问题呢&#xff1f;下面脚本之家的小编介绍几种解决方法…

数据采集与清洗基础习题(四)Pandas初体验,头歌参考答案

数据采集习题参考答案&#xff0c;会持续更新&#xff0c;点个关注防丢失。 创作不易&#xff0c;一键三连给博主一个支持呗。 为了方便查找&#xff0c;已按照头歌重新排版&#xff0c;朋友们按照头歌所属门类查找实训哦&#xff0c;该篇为Pandas。 文章目录 实训一&#…