网站设计深圳联系电话?,女生做ui设计师好吗,电脑的网页打不开是咋回事,性价比高seo网站优化本篇文章将会详细介绍jquery easyui前端框架的使用#xff0c;通过创建一个crud应用来带大家快速掌握easyui的使用。 easyui是博主最喜欢的前端框架#xff0c;没有之一#xff0c;因为它提供了多种主题#xff0c;而且有圆润的各种组件。 一、快速开始
easyui的官网地址通过创建一个crud应用来带大家快速掌握easyui的使用。 easyui是博主最喜欢的前端框架没有之一因为它提供了多种主题而且有圆润的各种组件。 一、快速开始
easyui的官网地址
JQuery EasyUI中文网https://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 typepassword/input dialog
对话框通常会在对话框内嵌表单实现数据的添加和修改功能。 四、表格渲染
为了方便快速学会datagird的使用这里就直接拿之前写的springboot crud案例项目作为后端项目演示datagird通过ajax异步加载表格数据。
项目git地址如下
https://gitee.com/he-yunlin/springboot-crud/tree/springboot-crud1.0/https://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 {/*** 解决跨域问题*/Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**).allowedOriginPatterns(*).allowedMethods(*).allowedHeaders(*).allowCredentials(true).maxAge(5000);}} 添加controller接口
然后在SongController中添加一个接口方法 RequestMapping(value /selectList, method RequestMethod.GET)public JsonResultListSong selectList() {ListSong list songService.selectList();return JsonResult.success(查询成功, list);}
对应地在SongService接口添加selectList()方法
ListSong selectList();
SongServiceImpl Overridepublic ListSong selectList() {return songMapper.selectList(null);} 前端代码
在前端的easyui项目下创建html目录在html目录下创建index.html。
修改表格的数据加载地址url为selectList接口的访问地址http://localhost:8083/song/selectList
!DOCTYPE html
htmlheadmeta charsetutf-8titledatagrid案例代码/titlelink relstylesheet href../css/themes/icon.css /link relstylesheet href../css/themes/material/easyui.css /script src../js/jquery.min.js/scriptscript src../js/jquery.easyui.min.js/scriptscript src../js/easyui-lang-zh_CN.js/script/headbodydiv idsong_list/divscript$(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默认是通过ajax post请求加载数据. 打开之前的文档页面往下滚动找到数据网格属性。 如图method属性就是设置请求的类型而这个属性的默认值是post我们把它设置成get method属性
!DOCTYPE html
htmlheadmeta charsetutf-8titledatagrid案例代码/titlelink relstylesheet href../css/themes/icon.css /link relstylesheet href../css/themes/material/easyui.css /script src../js/jquery.min.js/scriptscript src../js/jquery.easyui.min.js/scriptscript src../js/easyui-lang-zh_CN.js/script/headbodydiv idsong_list/divscript$(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里了。所以这里要对返回的数据进行简单的处理得到data里的list。 loadFilter属性
就是它了loadFilter属性是一个方法用于请求url过滤返回的数据。 注意我们在后端封装一个JsonResult对象返回是为了能够带上一个请求的状态码code当这个状态码为200时表示请求被正确地执行了。 因此这个过滤方法应该是下面这样
loadFilter: function(res) {if (res.code 200) {return res.data;} else {return null;}
},
最后正确的页面代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8titledatagrid案例代码/titlelink relstylesheet href../css/themes/icon.css /link relstylesheet href../css/themes/material/easyui.css /script src../js/jquery.min.js/scriptscript src../js/jquery.easyui.min.js/scriptscript src../js/easyui-lang-zh_CN.js/script/headbodydiv idsong_list/divscript$(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即可表格的列宽会自适应当前页面。 于是在原来的代码基础上添加fitColumns属性并设置为true
!DOCTYPE html
htmlheadmeta charsetutf-8titledatagrid案例代码/titlelink relstylesheet href../css/themes/icon.css /link relstylesheet href../css/themes/material/easyui.css /script src../js/jquery.min.js/scriptscript src../js/jquery.easyui.min.js/scriptscript src../js/easyui-lang-zh_CN.js/script/headbodydiv idsong_list/divscript$(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
修改页面代码后的效果比原来看起来舒服的多。 striped属性
页面看起来差不多了但是总感觉表格也太单调了全是一种颜色看起来总感觉怪怪的能不能再美化一下呢。
答案是当然可以上面的页面很单调是表格全部数据都是一个颜色如果能给表格的行记录颜色不一样那就完美了。
于是striped属性腾空出世这个属性的作用就是显示条纹不出所料这个属性默认值也是false。 把它设置成true看一下效果。
!DOCTYPE html
htmlheadmeta charsetutf-8titledatagrid案例代码/titlelink relstylesheet href../css/themes/icon.css /link relstylesheet href../css/themes/material/easyui.css /script src../js/jquery.min.js/scriptscript src../js/jquery.easyui.min.js/scriptscript src../js/easyui-lang-zh_CN.js/script/headbodydiv idsong_list/divscript$(document).ready(function() {$(#song_list).datagrid({url: http://localhost:8083/song/selectList,method: get,striped: true,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
修改页面之后视觉效果还不错有了一点bootstrap的感觉了~ pagination属性 上面的表格外观已经很完美了作为一个后端开发人员来说这样的样式已经无可挑剔但是之前已经说过了一共有800多条数据这还算少的了假如有几万条数据呢如果一次性全部查询出来每次查询的时候后端服务的压力是很大的。 所以一般数据量大的时候都会分页查询每次只查询一部分数据。
easyui的datagrid支持分页功能只需要设置pagination属性为true而常用的分页属性还有另外两个pageSize和pageList。 修改前端页面代码添加pagination属性为true。
!DOCTYPE html
htmlheadmeta charsetutf-8titledatagrid案例代码/titlelink relstylesheet href../css/themes/icon.css /link relstylesheet href../css/themes/material/easyui.css /script src../js/jquery.min.js/scriptscript src../js/jquery.easyui.min.js/scriptscript src../js/easyui-lang-zh_CN.js/script/headbodydiv idsong_list/divscript$(document).ready(function() {$(#song_list).datagrid({url: http://localhost:8083/song/selectList,method: get,striped: true,fitColumns: true,pagination: 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
此时页面好像没有什么区别好像也没有分页 其实页面已经变了只是在当前页面可浏览范围之外页面滚动到末尾会发现表格底部多了一个分页栏。 并且请求携带了额外的参数page和rows height属性
基于上面的的问题需要拉到页面底部才能看到分页栏现在给表格设置一个固定的高度让它刚好够显示10条数据。通过不断调整发现高度400比较适合。
!DOCTYPE html
htmlheadmeta charsetutf-8titledatagrid案例代码/titlelink relstylesheet href../css/themes/icon.css /link relstylesheet href../css/themes/material/easyui.css /script src../js/jquery.min.js/scriptscript src../js/jquery.easyui.min.js/scriptscript src../js/easyui-lang-zh_CN.js/script/headbodydiv idsong_list/divscript$(document).ready(function() {$(#song_list).datagrid({url: http://localhost:8083/song/selectList,method: get,height: 400,striped: true,fitColumns: true,pagination: 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
再次查看页面效果 五、构建应用
完成分页功能
上个章节已经完成了基本的页面样式的调整但是能发现其实并没有分页这是因为后端没有处理easyui框架传的两个参数page和rows。
这个部分首先需要解决的就是这个问题要使用mybatis-plus的分页功能需要添加分页插件。 后端代码
新增mp配置类添加mybatis-plus分页插件。
package com.example.springboot.config;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.BlockAttackInnerInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;/*** MP配置类*/
Configuration
EnableTransactionManagement
MapperScan(basePackages com.example.springboot.mapper)
public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor new MybatisPlusInterceptor();// 防全表更新与删除插件interceptor.addInnerInterceptor(new BlockAttackInnerInterceptor());// 分页插件interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}} 前端代码
我们把请求数据的接口改一下改成selectByPage。
!DOCTYPE html
htmlheadmeta charsetutf-8titledatagrid案例代码/titlelink relstylesheet href../css/themes/icon.css /link relstylesheet href../css/themes/material/easyui.css /script src../js/jquery.min.js/scriptscript src../js/jquery.easyui.min.js/scriptscript src../js/easyui-lang-zh_CN.js/script/headbodydiv idsong_list/divscript$(document).ready(function() {$(#song_list).datagrid({url: http://localhost:8083/song/selectByPage,method: get,height: 400,striped: true,fitColumns: true,pagination: 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
页面效果 至此分页功能完成~ 增删查改功能
接下来完成数据的增删改功能。 给表格添加头部工具栏新增添加、修改、删除三个按钮。
!DOCTYPE html
htmlheadmeta charsetutf-8titledatagrid案例代码/titlelink relstylesheet href../css/themes/icon.css /link relstylesheet href../css/themes/material/easyui.css /script src../js/jquery.min.js/scriptscript src../js/jquery.easyui.min.js/scriptscript src../js/easyui-lang-zh_CN.js/script/headbodydiv idsong_list/divdiv idsong_dialog styledisplay: none;form idsong_forminput typehidden idid nameid /tabletrtdname/tdtdinput idname namename //tdtdsinger/tdtdinput idsinger namesinger //td/trtrtdnote/tdtd colspan3input idnote namenote //td/tr/table/form/divscriptlet requestUrl;let base http://localhost:8083;$(document).ready(function() {$(#name).textbox({width: 150,required: true});$(#singer).textbox({width: 150,required: true});$(#note).textbox({width: 366,height: 100,required: true,multiline: true});$(#song_dialog).dialog({title: 歌曲信息,closed: true,cache: false,modal: true,toolbar:[{text: 保存,iconCls: icon-save,handler: function() {let bool $(#song_form).form(validate);if (!bool) {$.messager.alert(系统提示, 请填写正确的表单项, warning);} else {let data $(#song_form).serialize();$.post(base requestUrl, data, function(res) {$.messager.show({title: 系统消息,timeout: 5000,showType: slide,msg: res.message,});$(#song_dialog).dialog(close);$(#song_list).datagrid(reload);}, json);}}}, {text: 取消,iconCls: icon-cancel,handler: function() {$(#song_form).form(clear);$(#song_dialog).dialog(close);}}]});$(#song_list).datagrid({url: base /song/selectByPage,method: get,height: 432,striped: true,filterBtnIconCls: icon-filter,fitColumns: true,pagination: true,loadFilter: function(res) {if (res.code 200) {return res.data;} else {return null;}},toolbar: [{iconCls: icon-add,text: 添加,handler: function() {requestUrl /song/insert;$(#song_dialog).dialog(open);}}, -, {iconCls: icon-edit,text: 修改,handler: function() {let row $(#song_list).datagrid(getSelected);if(row) {requestUrl /song/updateById;$(#id).val(row.id);$(#name).textbox(setValue, row.name);$(#singer).textbox(setValue, row.singer);$(#note).textbox(setValue, row.note);$(#song_dialog).dialog(open);} else {$.messager.alert(系统提示, 请选择要修改的数据, warning);}}}, -, {iconCls: icon-delete,text: 删除,handler: function() {let rowData $(#song_list).datagrid(getSelected);if (rowData) {$.messager.confirm(提示, 删除后数据无法恢复是否确认删除, function(bool) {if (bool) {$.get(base /song/deleteById/ rowData.id, {}, function(res) {$.messager.show({title: 系统消息,timeout: 5000,showType: slide,msg: res.message,});$(#song_list).datagrid(reload);}, json);}});} else {$.messager.alert(请选择要删除的数据, warning);}}}],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 好了文章就分享到这里了前端项目地址如下可按需获取~
https://gitcode.net/heyl163_/easyui.githttps://gitcode.net/heyl163_/easyui.git
