使用easyui前端框架快速构建一个crud应用

news2024/11/27 10:19:37

本篇文章将会详细介绍jquery easyui前端框架的使用，通过创建一个crud应用来带大家快速掌握easyui的使用。

easyui是博主最喜欢的前端框架，没有之一，因为它提供了多种主题，而且圆润可爱的组件吸引了我。

快速开始

easyui的官网地址：

JQuery EasyUI中文网icon-default.png?t=N7T8https://www.jeasyui.net/点击上方链接访问easyui中文官网，下载easyui。

在下载页面点击下载对应的版本，本篇文章将使用jquery easyui

选择下载免费版

准备工作

下载完成后，得到一个压缩包jquery-easyui-1.7.0.zip。

然后把这个压缩包解压出来，我们需要的是红框内的几个文件及文件夹。

  • locale目录下是常用的一些js文件
  • themes目录下是easyui的样式文件

通过HBuilderx创建一个基本的html项目

接着，把themes文件夹复制到项目的css目录下，把locale/easyui-lang-zh_CN.js和红款内的两个js文件复制到项目的js目录下。

开始使用

完成前面两步之后，就可以开始愉快地使用easyui了。

主题资源

如图，themes下面提供了多种主题样式的资源文件，喜欢哪个主题，引入对应包下的easyui.css即可。

常用组件

datagrid

easyui里用的最多的莫过于数据表格了，datagrid是easyui的表格组件，支持分页功能。只需要在表格渲染的js代码中添加选项pagenation: true即可开启分页功能。

打开easyui的文档页面，找到通过javascript渲染表格的案例代码。

官网提供的渲染easyui datagrid的javascript代码为，url是加载表格数据的地址，columns是表格的列信息。#dg表示的是表格元素的选择器，这是id选择器，表示id为dg的DOM对象。

    $('#dg').datagrid({
        url:'datagrid_data.json',
        columns:[[
    		{field:'code',title:'Code',width:100},
    		{field:'name',title:'Name',width:100},
    		{field:'price',title:'Price',width:100,align:'right'}
        ]]
    });

textbox

文本框，就是带了easyui样式的input输入框，与之对应的还有passwordbox。

passwordbox

密码框，带了easyui样式的input密码框<input type="password"></input>

构建应用

为了方便快速学会datagird的使用，这里就直接拿之前写的springboot crud案例项目作为后端项目，演示datagird通过ajax异步加载表格数据。

项目git地址如下：

https://gitee.com/he-yunlin/springboot-crud/tree/springboot-crud1.0/icon-default.png?t=N7T8https://gitee.com/he-yunlin/springboot-crud/tree/springboot-crud1.0/

后端代码

添加跨域配置

首先要添加跨域配置，防止使用过程中出现cors问题。

package com.example.springboot.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * springmvc配置类
 * @author heyunlin
 * @version 1.0
 */
@Configuration
public class SpringMvcConfig implements WebMvcConfigurer {

    /**
     * 解决跨域问题
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(5000);
    }

}

添加controller接口

然后在SongController中添加一个接口方法

    @RequestMapping(value = "/selectList", method = RequestMethod.GET)
    public JsonResult<List<Song>> selectList() {
        List<Song> list = songService.selectList();

        return JsonResult.success("查询成功", list);
    }

对应地，在SongService接口添加selectList()方法

List<Song> selectList();

SongServiceImpl

    @Override
    public List<Song> selectList() {
        return songMapper.selectList(null);
    }

前端代码

在前端的easyui项目下创建html目录，在目录下创建datagrid.html。

修改表格的数据加载地址为selectList接口的访问地址http://localhost:8083/song/selectList

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>datagrid案例代码</title>
		<link rel="stylesheet" href="../css/themes/icon.css" />
		<link rel="stylesheet" href="../css/themes/material/easyui.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.easyui.min.js"></script>
		<script src="../js/easyui-lang-zh_CN.js"></script>
	</head>
	
	<body>
		<div id="song_list"></div>
		
		<script>
			$(document).ready(function() {
				$("#song_list").datagrid({
					url: "http://localhost:8083/song/selectList",
					columns: [[
						{field: 'code', title:'Code', width:100},
						{field: 'name', title:'Name', width:100},
						{field: 'price', title:'Price', width:100, align:'right'}
					]]
				});
			});
		</script>
	</body>
</html>

然后选择通过firefox运行，打开看到一个空白页面

F12打开浏览器控制台，刷新页面，发现请求接口发生了异常，不支持post请求。

这是因为easyui的datagrid默认是通过post请求加载数据的，打开之前的文档页面，往下滚动，找到数据网格属性。

如图，method属性就是设置请求的类型，而这个属性的默认值是post，我们把它设置成get

修改method属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>datagrid案例代码</title>
		<link rel="stylesheet" href="../css/themes/icon.css" />
		<link rel="stylesheet" href="../css/themes/material/easyui.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.easyui.min.js"></script>
		<script src="../js/easyui-lang-zh_CN.js"></script>
	</head>
	
	<body>
		<div id="song_list"></div>
		
		<script>
			$(document).ready(function() {
				$("#song_list").datagrid({
					url: "http://localhost:8083/song/selectList",
					method: "get",
					columns: [[
						{field: 'code', title:'Code', width:100},
						{field: 'name', title:'Name', width:100},
						{field: 'price', title:'Price', width:100, align:'right'}
					]]
				});
			});
		</script>
	</body>
</html>

页面代码修改完成之后，发现只显示了表头，表格数据没有显示出来，而且报了一个错，rows is undefined。

为什么会这样呢，其实问题就在于后端返回的数据不是一个list，而是封装的一个JsonResult对象，list放到这个对象的data里了。

修改loadFilter属性

所以，这里要对返回的数据进行简单的处理，得到data里的list。就是它了，loadFilter属性是一个方法，用于请求url过滤返回的数据。

注意：我们在后端封装一个JsonResult对象返回是为了能够带上一个请求的状态码code，当这个状态码为200时，表示请求被正确地执行了。

因此，这个过滤方法应该是下面这样：

loadFilter: function(res) {
    if (res.code == 200) {
        return res.data;
    } else {
        return null;
    }
},

最后，正确的页面代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>datagrid案例代码</title>
		<link rel="stylesheet" href="../css/themes/icon.css" />
		<link rel="stylesheet" href="../css/themes/material/easyui.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.easyui.min.js"></script>
		<script src="../js/easyui-lang-zh_CN.js"></script>
	</head>
	
	<body>
		<div id="song_list"></div>
		
		<script>
			$(document).ready(function() {
				$("#song_list").datagrid({
					url: "http://localhost:8083/song/selectList",
					method: "get",
					loadFilter: function(res) {
						if (res.code == 200) {
							return res.data;
						} else {
							return null;
						}
					},
					columns: [[
						{field: 'id', title: 'id', width: 200},
						{field: 'name', title: 'name', width: 200},
						{field: 'singer', title: 'singer', width: 200},
						{field: 'note', title: 'note', width: 200},
						{field: 'lastUpdateTime', title: 'lastUpdateTime', width: 200},
					]]
				});
			});
		</script>
	</body>
</html>

而此时，页面的数据终于显示出来了，一共800多条数据。

 

修改fitColumns属性

上面的页面看起来非常丑，如果表格能占满整个页面会更好看一点，因此，easyui也实现了这种效果，只需要设置fitColumns属性的值为true即可，表格的列宽会自适应当前页面。

于是，再添加属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>datagrid案例代码</title>
		<link rel="stylesheet" href="../css/themes/icon.css" />
		<link rel="stylesheet" href="../css/themes/material/easyui.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.easyui.min.js"></script>
		<script src="../js/easyui-lang-zh_CN.js"></script>
	</head>
	
	<body>
		<div id="song_list"></div>
		
		<script>
			$(document).ready(function() {
				$("#song_list").datagrid({
					url: "http://localhost:8083/song/selectList",
					method: "get",
					fitColumns: true,
					loadFilter: function(res) {
						if (res.code == 200) {
							return res.data;
						} else {
							return null;
						}
					},
					columns: [[
						{field: 'id', title: 'id', width: 200},
						{field: 'name', title: 'name', width: 200},
						{field: 'singer', title: 'singer', width: 200},
						{field: 'note', title: 'note', width: 200},
						{field: 'lastUpdateTime', title: 'lastUpdateTime', width: 200},
					]]
				});
			});
		</script>
	</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

相交链表~

相交链表~

题目描述 给你两个单链表的头节点 headA和headB&#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null。图示两个链表在节点 c1 开始相交&#xff1a; 题目数据保证整个链式结构中不存在环。注意&#xff0c;函数返回结果后&…
阅读更多...
文本标注工具doccano 中上传dataset无法成功

文本标注工具doccano 中上传dataset无法成功

问题描述 文本标注工具doccano 中上传dataset无法成功&#xff0c;一直处于加载界面 解决方法 没有执行这个方法 doccano task
阅读更多...
CorelDRAW2023绿色版免安装

CorelDRAW2023绿色版免安装

我们都知道最新的画笔库和画笔搜索&#xff1a;CorelDRAW 2023中新增了最新的画笔库和画笔搜索功能&#xff0c;使用者能够轻松查找和应用各种画笔和笔刷。根据软件大数据显示 CorelDRAW? Graphics Suite 专为提高您的工作效率而设计&#xff0c;受到全球数百万图形专业人员和…
阅读更多...
GEO地图数据分布处理

GEO地图数据分布处理

需求 已知访问用户经纬度数据&#xff0c;根据经纬度统计每个省的访问总数 地区经纬度分布表 CREATE TABLE area_geo (id int(11) NOT NULL,name varchar(250) NOT NULL COMMENT 地区名,ext_name varchar(255) NOT NULL COMMENT 地区扩展名,geo geometry NOT NULL COMMENT 地…
阅读更多...
【修车案例】一波形一案例（7）

【修车案例】一波形一案例（7）

背景介绍&#xff1a;由于间歇性短路导致车厢内的照明灯不亮了&#xff0c;客户自己购买了廉价保险丝替换原装10A保险丝。但是线束却发生了着火事故&#xff0c;这条线束从车厢内保险丝盒 一直延伸到遮阳板处的梳妆灯。短路的原因后面确定是梳妆灯组件故障&#xff0c;但是客户…
阅读更多...
PHP网站源码 知识付费分站代理自助下单系统花粥商城放墙带知识付费模版

PHP网站源码 知识付费分站代理自助下单系统花粥商城放墙带知识付费模版

花粥商城&#xff0c;自带防墙&#xff0c;本人一直在用&#xff0c;没有被墙过&#xff0c;自带知识付费模版美化版&#xff0c;用户登录的页面也很好看 上传商城源码&#xff0c;再把知识付费模版上传到根目录 访问域名&#xff0c;后台地址&#xff1a;域名/admin 登录账…
阅读更多...
关于炒股融资的条件，3个你不知道的小知识

关于炒股融资的条件，3个你不知道的小知识

随着投资者对股市的关注度不断提高&#xff0c;炒股融资成为了常见的投资方式&#xff0c;但是很多投资者对炒股融资的条件了解不够。下面给大家介绍三个你可能不知道的小知识。 融资比例的计算方式 融资比例指的是投资者可以借的资金比例&#xff0c;其计算方式是融资金额除以…
阅读更多...
库存预占架构升级方案设计-交易库存中心

库存预占架构升级方案设计-交易库存中心

背景介绍 &#xfeff; 伴随物流行业的迅猛发展&#xff0c;一体化供应链模式的落地&#xff0c;对系统吞吐、系统稳定发出巨大挑战&#xff0c;库存作为供应链的重中之重表现更为明显。近三年数据可以看出&#xff1a; &#xfeff;&#xfeff; 接入商家同比增长37.64%、货…
阅读更多...
【广州华锐互动】蔬菜生鲜运输3D虚拟仿真实验系统

【广州华锐互动】蔬菜生鲜运输3D虚拟仿真实验系统

随着科技的不断发展&#xff0c;现代农业已经逐渐摆脱了传统的生产方式&#xff0c;转向了更加智能化、自动化的方向。在这个过程中&#xff0c;农场品运输作为农业生产的重要环节&#xff0c;其效率和安全性直接关系到农产品的质量和市场竞争力。为了解决这一问题&#xff0c;…
阅读更多...
GPT-4.0网页平台-ChatYY

GPT-4.0网页平台-ChatYY

ChatYY的优势&#xff1a; 1. 支持大部分AI模型&#xff0c;且支持AI绘画&#xff1a; 2. 问答响应速度极快&#xff1a; 3. 代码解析&#xff1a; 4. 支持文档解读&#xff1a; 5. PC、移动端均支持&#xff1a; 访问直达&#xff1a;ChatYY.com
阅读更多...
SOME/IP 协议介绍（二）

SOME/IP 协议介绍（二）

1. SOME/IP header 出于互操作性的原因&#xff0c;所有SOME/IP的实现都应具有相同的标头布局如图1中显示。字段按传输顺序呈现&#xff0c;即左上方的字段首先进行传输。在接下来的章节中&#xff0c;将描述不同的标头字段及其用途。 1.1. IP地址/端口号 图1中的布局显示了在…
阅读更多...
Vue3.0 声明式导航，编程式导航，路由，路由拦截案例

Vue3.0 声明式导航，编程式导航，路由，路由拦截案例

项目结构 App.vue&#xff1a;根组件 <template><div><router-view></router-view><Tabbar></Tabbar></div> </template> <script setup> import Tabbar from ../src/views/Tabbar.vue; //底部选项卡 import Home from…
阅读更多...
Linux快速搭建网站，并利用内网穿透实现宝塔面板的公网访问

Linux快速搭建网站，并利用内网穿透实现宝塔面板的公网访问

文章目录 前言1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面 前言 宝塔面板作为简单好用的服务器运维管理面板&#xff0c;它支持Linux/Windows系统&#xff0c;我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等&…
阅读更多...
什么是浏览器指纹？指纹浏览器如何避免浏览器指纹的追踪识别？

什么是浏览器指纹？指纹浏览器如何避免浏览器指纹的追踪识别？

在做独立站跨境电商的过程中&#xff0c;海外社交媒体平台已成为我们必不可少的交易渠道。但是&#xff0c;由于各大平台对账号管理极其严格&#xff0c;对账户进行严密监控也成为了常态。这当然与浏览器指纹识别有关&#xff0c;今天龙哥就给大家科普一下什么是浏览器指纹&…
阅读更多...
TikTok文学探秘：短视频背后的故事之美

TikTok文学探秘：短视频背后的故事之美

在数字时代的冲击下&#xff0c;传统的娱乐形式正经历着翻天覆地的变革。社交媒体平台正在催生新的艺术表达形式&#xff0c;其中TikTok以其短视频分享功能引领了这一浪潮。 然而&#xff0c;TikTok不仅仅是短视频的集结地&#xff0c;它也是文字、情感和故事的沃土。本文将深…
阅读更多...
Python - Windows下使用Python脚本同步一个文件夹下的所有文件到另一个文件夹下

Python - Windows下使用Python脚本同步一个文件夹下的所有文件到另一个文件夹下

Python同步文件 在Windows下使用Python脚本同步一个文件夹下的所有文件到另一个文件夹下 示例代码 import logging import os import shutildef sync_files(src_file_path, dst_dir_path, exclude_list):try:if not os.path.exists(src_file_path):os.makedirs(src_file_pat…
阅读更多...
ER图理论知识掌握了吗？新手必看！

ER图理论知识掌握了吗？新手必看！

在数据库设计和管理中&#xff0c;ER图&#xff08;Entity-Relationship Diagram&#xff09;是一个不可或缺的工具。它以图形的方式呈现了数据实体之间的关系&#xff0c;为数据库设计和维护提供了重要的帮助。无论你是数据库新手还是有经验的专业人士&#xff0c;了解ER图的理…
阅读更多...
【hcie-cloud】【4】华为云Stack规划设计之华为云Stack标准组网【中】

【hcie-cloud】【4】华为云Stack规划设计之华为云Stack标准组网【中】

文章目录 前言、华为云Stack交付综述华为云Stack标准组网标准组网架构HCS标准组网架构单核心VS双核心组网二层组网VS三层组网 单核心和双核心组网单核心组网设计和配置单核心组网 - 计算节点2网口单核心组网 - 计算节点4网口单核心组网 - 计算节点6网口单核心架构 - 多Region组…
阅读更多...
Android T窗口动画显示和退出流程（更新中）

Android T窗口动画显示和退出流程（更新中）

序 如何创建一个窗口动画&#xff1f;我们通过先从APP创建一个窗口&#xff0c;以这个窗口的创建过程的窗口动画为例 这个demo就是点击BUTTON显示窗口&#xff0c;点击CLOSE WINDOW关闭窗口&#xff0c;下面简述关键代码 //定义WindowManager和LayoutParams private Window…
阅读更多...
小米智能电视投屏方法

小米智能电视投屏方法

小米智能电视也提供了投屏功能。 使用遥控器&#xff0c;在应用中找到它&#xff0c;点击进入。 小米电视支持windows笔记本&#xff0c;macbook笔记本&#xff0c;iphone手机&#xff0c;安卓手机投屏。 windows笔记本投屏 在投屏应用中找到windows投屏&#xff0c;选中开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023