easyui是博主最喜欢的前端框架#xff0c;没有之一#xff0c;因为它提供了多种主题#xff0c;而且有圆润的各种组件。

一、快速开始

easyui的官网地址通过创建一个crud应用来带大家快速掌握easyui的使用。

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

一、快速开始

EasyUI中文网https://www.jeasyui.net/点击上方链接访问easyui中文官网下载easyui。

easyui

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

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

三、开始使用

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

常用组件

easyui里用的最多的莫过于数据表格了datagrid是easyui的表格组件支持分页功能。

只需要在表格渲染的js代码中添加选项pagenation:

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

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

为了方便快速学会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/

后端代码

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配置类*

{registry.addMapping(/**).allowedOriginPatterns(*).allowedMethods(*).allowedHeaders(*).allowCredentials(true).maxAge(5000);}}

添加controller接口

songService.selectList();return

list);}

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

ListSong

在前端的easyui项目下创建html下创建index.html。

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

!DOCTYPE

charsetutf-8titledatagrid案例代码/titlelink

relstylesheet

href../css/***mes/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()

http://localhost:8083/song/selectList,columns:

[[{field:

align:right}]]});});/script/body

/html

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

post请求加载数据.

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

method属性

charsetutf-8titledatagrid案例代码/titlelink

relstylesheet

href../css/***mes/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()

http://localhost:8083/song/selectList,method:

get,columns:

align:right}]]});});/script/body

/html

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

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

所以这里要对返回的数据进行简单的处理得到data里的list。

loadFilter属性

就是它了loadFilter属性是一个方法用于请求url过滤返回的数据。

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

loadFilter:

charsetutf-8titledatagrid案例代码/titlelink

relstylesheet

href../css/***mes/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()

http://localhost:8083/song/selectList,method:

get,loadFilter:

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

于是在原来的代码基础上添加fitColumns属性并设置为true

!DOCTYPE

charsetutf-8titledatagrid案例代码/titlelink

relstylesheet

href../css/***mes/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()

http://localhost:8083/song/selectList,method:

get,fitColumns:

页面看起来差不多了但是总感觉表格也太单调了全是一种颜色看起来总感觉怪怪的能不能再美化一下呢。

答案是当然可以上面的页面很单调是表格全部数据都是一个颜色如果能给表格的行记录颜色不一样那就完美了。

于是striped属性腾空出世这个属性的作用就是显示条纹不出所料这个属性默认值也是false。

!DOCTYPE

charsetutf-8titledatagrid案例代码/titlelink

relstylesheet

href../css/***mes/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()

http://localhost:8083/song/selectList,method:

get,striped:

修改页面之后视觉效果还不错有了一点bootstrap的感觉了~

pagination属性

上面的表格外观已经很完美了作为一个后端开发人员来说这样的样式已经无可挑剔但是之前已经说过了一共有800多条数据这还算少的了假如有几万条数据呢如果一次性全部查询出来每次查询的时候后端服务的压力是很大的。

easyui的datagrid支持分页功能只需要设置pagination属性为true而常用的分页属性还有另外两个pageSize和pageList。

!DOCTYPE

charsetutf-8titledatagrid案例代码/titlelink

relstylesheet

href../css/***mes/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()

http://localhost:8083/song/selectList,method:

get,striped:

其实页面已经变了只是在当前页面可浏览范围之外页面滚动到末尾会发现表格底部多了一个分页栏。

height属性

基于上面的的问题需要拉到页面底部才能看到分页栏现在给表格设置一个固定的高度让它刚好够显示10条数据。

通过不断调整发现高度400比较适合。

!DOCTYPE

charsetutf-8titledatagrid案例代码/titlelink

relstylesheet

href../css/***mes/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()

http://localhost:8083/song/selectList,method:

get,height:

上个章节已经完成了基本的页面样式的调整但是能发现其实并没有分页这是因为后端没有处理easyui框架传的两个参数page和rows。

这个部分首先需要解决的就是这个问题要使用mybatis-plus的分页功能需要添加分页插件。

后端代码

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配置类*/

防全表更新与删除插件interceptor.addInnerInterceptor(new

BlockAttackInnerInterceptor());//

分页插件interceptor.addInnerInterceptor(new

PaginationInnerInterceptor(DbType.MYSQL));return

interceptor;}}

charsetutf-8titledatagrid案例代码/titlelink

relstylesheet

href../css/***mes/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()

http://localhost:8083/song/selectByPage,method:

get,height:

charsetutf-8titledatagrid案例代码/titlelink

relstylesheet

href../css/***mes/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

//td/tr/table/form/divscriptlet

requestUrl;let

http://localhost:8083;$(document).ready(function()

150,required:

true});$(#singer).textbox({width:

150,required:

true});$(#note).textbox({width:

366,height:

true});$(#song_dialog).dialog({title:

歌曲信息,closed:

$(#song_form).form(validate);if

(!bool)

$(#song_form).serialize();$.post(base

requestUrl,

res.message,});$(#song_dialog).dialog(close);$(#song_list).datagrid(reload);},

json);}}},

{$(#song_form).form(clear);$(#song_dialog).dialog(close);}}]});$(#song_list).datagrid({url:

base

/song/insert;$(#song_dialog).dialog(open);}},

{iconCls:

$(#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

$(#song_list).datagrid(getSelected);if

(rowData)

res.message,});$(#song_list).datagrid(reload);},

json);}});}

https://gitcode.net/heyl163_/easyui.githttps://gitcode.net/heyl163_/easyui.git