下载地址
http://download.csdn.net/album/detail/343
我使用的环境
操作系统：windows/linux(deepin)
数据库：mysql 5.6 / mariadb 10.0.x.x
jdk : 8
ide : spring tool suite 3.9.2 【不是不想用idea而是频繁的找注册码实在太麻烦了】
maven : 3.5.2
tomcat : 7
easyui : 1.5.2
参考资料
JQuery EasyUI 中文网 ： http://www.jeasyui.net/
http://download.csdn.net/album/detail/343 中的中文文档
百度及各大论坛等
Hello World
目录结构
代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>easyui one</title> 6 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/default/easyui.css" /> 7 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/icon.css" /> 8 </head> 9 <body> 10 <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a> 11 12 <script type="text/javascript" charset="utf-8" src="assets/jquery-2.1.4/jquery.min.js"></script> 13 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/jquery.easyui.min.js"></script> 14 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script> 15 <script type="text/javascript" charset="utf-8"> 16 $(function(){ 17 $('#btn').click(function(){ 18 $.messager.confirm('确认','您确认删除记录么？',function(r){ 19 if(r){ 20 console.log('删除!'); 21 }else{ 22 console.log('取消！'); 23 } 24 }); 25 }); 26 }); 27 </script> 28 </body> 29 </html>
easyui 组件依赖关系
easyui 自定义图标
推荐使用淘宝的icon库：http://www.iconfont.cn/
注意下载16 X 16的。然后将你下载的图片放在 jquery-easyui-x.x.x hemesicons中，并在jquery-easyui-x.x.x hemesicon.css中添加如下代码：
1 /* mine */ 2 .icon-mine-search{ 3 background:url('icons/mine-search.png') no-repeat center center; 4 }
效果 ：
panel
===最简单的panel
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>easyui one panel</title> 6 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/default/easyui.css" /> 7 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/icon.css" /> 8 </head> 9 <body> 10 <div id="panel01"></div> 11 12 <script type="text/javascript" charset="utf-8" src="assets/jquery-2.1.4/jquery.min.js"></script> 13 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/jquery.easyui.min.js"></script> 14 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script> 15 <script type="text/javascript" charset="utf-8"> 16 $(function(){ 17 $('#panel01').panel({ 18 width : 500, 19 height : 150, 20 title : '我的面板' 21 22 }); 23 }); 24 </script> 25 </body> 26 </html>
效果
===常用属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>easyui one panel</title> 6 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/default/easyui.css" /> 7 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/icon.css" /> 8 <style type="text/css"> 9 #box{ 10 width: 700px; 11 height: 300px; 12 margin: 0 auto; 13 border: 1px solid red; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="box"> 19 <div id="panel01"></div> 20 </div> 21 22 23 <script type="text/javascript" charset="utf-8" src="assets/jquery-2.1.4/jquery.min.js"></script> 24 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/jquery.easyui.min.js"></script> 25 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script> 26 <script type="text/javascript" charset="utf-8"> 27 $(function(){ 28 var panel01 = $('#panel01').panel({ 29 width : 500, 30 height : 150, 31 title : '我的面板', 32 collapsible : true, // 是否显示可折叠按钮，默认 false 33 minimizable : true, // 是否显示最小化按钮，默认 false 34 maximizable : true, // 是否显示最大化按钮，false 35 closable : true, // 是否显示关闭按钮，默认 fasle 36 content : '<h1>Hello World!</h1>', 37 onBeforeOpen : function(){ 38 console.log('onBeforeOpen'); 39 var self = $(this); 40 var parentWidth = self.parent().parent().width(); 41 var parentHeight = self.parent().parent().height(); 42 console.log(parentWidth); 43 console.log(parentHeight); 44 45 var width = self.parent().width(); 46 var height = self.parent().height(); 47 48 var left = (parentWidth - width) / 2; 49 var top = (parentHeight - height) / 2; 50 self.parent().css({ 51 marginLeft : left, 52 marginTop : top 53 }); 54 if( parentHeight < height ){ 55 self.parent().css({ 56 marginLeft : left, 57 marginTop : 0 58 }); 59 } 60 } 61 }); 62 console.log(panel01.panel('options')); 63 64 }); 65 </script> 66 </body> 67 </html>
效果：
其中比较重要的是：onBeforeOpen：在打开面板之前触发，返回false可以取消打开操作。
在这个方法中的代码是进行面板居中操作。参考自：https://www.cnblogs.com/AaronYang/p/3465315.html。不过原代码写的不对，原因如下：
可以在easyui生成的代码中看到，除了我们自己写的div之外，还增加了一个 <div class="panel-header">和一个<div class='panel panel-htop'>。其中的标签父子关系已经很明显了。原文中设置的是left与top属性，然而<div class='panel panel-htop'>的display属性为：block。
所以应该修改的是margin-left与margin-top属性。
===加载远程数据
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>easyui one panel</title> 6 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/default/easyui.css" /> 7 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/icon.css" /> 8 <style type="text/css"> 9 #box{ 10 width: 700px; 11 height: 300px; 12 margin: 0 auto; 13 border: 1px solid red; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="box"> 19 <div id="panel01"></div> 20 </div> 21 22 23 <script type="text/javascript" charset="utf-8" src="assets/jquery-2.1.4/jquery.min.js"></script> 24 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/jquery.easyui.min.js"></script> 25 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script> 26 <script type="text/javascript" charset="utf-8"> 27 $(function(){ 28 var panel01 = $('#panel01').panel({ 29 width : 500, 30 height : 150, 31 title : '我的面板', 32 collapsible : true, // 是否显示可折叠按钮，默认 false 33 minimizable : true, // 是否显示最小化按钮，默认 false 34 maximizable : true, // 是否显示最大化按钮，false 35 closable : true, // 是否显示关闭按钮，默认 fasle 36 loadingMessage : '正在加载', // 在加载远程数据的时候在面板内显示一条消息。 37 cache : false, // 如果为true，在超链接载入时缓存面板内容。 38 href : 'panel-href.html', 39 40 }); 41 42 }); 43 </script> 44 </body> 45 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>panel href</title> 6 <style type="text/css"> 7 p{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>panel 内容！</p> 14 <script type="text/javascript" charset="utf-8"> 15 $(function(){ 16 console.log('panel 内容！'); 17 }); 18 </script> 19 </body> 20 </html>
效果
可以看到，panel-href.html中的样式并没有起作用。但是js代码确执行了。这说明panel在加载远程页面的时候，只会加载body体重的内容。解决方式是把CSS代码直接写在body体内或者把link标签写在body体内。而关于把style和link放在body体中会有什么影响，可参考：
style标签写在body后与body前有什么区别? - 贺师俊的回答 - 知乎 https://www.zhihu.com/question/39840003/answer/181308294
window
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>easyui one window</title> 7 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/default/easyui.css" /> 8 <link type="text/css" rel="stylesheet" href="assets/jquery-easyui-1.5.2/themes/icon.css" /> 9 <style type="text/css"> 10 #box { 11 width: 1200px; 12 height: 600px; 13 margin: 0 auto; 14 border: 1px solid red; 15 } 16 17 </style> 18 </head> 19 20 <body> 21 <div id="box"> 22 <div id="window01"></div> 23 <div id="window02"></div> 24 <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-mine-search'">easyui</a> 25 </div> 26 27 28 <script type="text/javascript" charset="utf-8" src="assets/jquery-2.1.4/jquery.min.js"></script> 29 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/jquery.easyui.min.js"></script> 30 <script type="text/javascript" charset="utf-8" src="assets/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script> 31 <script type="text/javascript" charset="utf-8"> 32 $(function() { 33 $('#btn').click(function() { 34 $.messager.confirm('确认', '您确认删除记录么？', function(r) { 35 if (r) { 36 console.log('删除!'); 37 } else { 38 console.log('取消！'); 39 } 40 }); 41 }); 42 43 var window01 = $('#window01').window({ 44 300, 45 height: 150, 46 title: '第一个window', 47 collapsible: true, // 是否显示可折叠按钮，默认 false 48 minimizable: true, // 是否显示最小化按钮，默认 false 49 maximizable: true, // 是否显示最大化按钮，false 50 closable: true, // 是否显示关闭按钮，默认 fasle 51 loadingMessage: '正在加载', // 在加载远程数据的时候在面板内显示一条消息。 52 cache: false, // 如果为true，在超链接载入时缓存面板内容。 53 href: 'panel-href.html', 54 modal: true, // 定义是否将窗体显示为模式化窗口。默认为：false 55 zIndex : 2, // 窗口Z轴坐标。默认：9000 56 inline : true, // 定义如何布局窗口，如果设置为true，窗口将显示在它的父容器中，否则将显示在所有元素的上面。默认：fasle 57 58 }); 59 window01.window('center'); 60 61 var window02 = $('#window02').window({ 62 500, 63 height: 250, 64 title: '第二个window', 65 collapsible: true, // 是否显示可折叠按钮，默认 false 66 minimizable: true, // 是否显示最小化按钮，默认 false 67 maximizable: true, // 是否显示最大化按钮，false 68 closable: true, // 是否显示关闭按钮，默认 fasle 69 loadingMessage: '正在加载', // 在加载远程数据的时候在面板内显示一条消息。 70 cache: false, // 如果为true，在超链接载入时缓存面板内容。 71 href: 'panel-href.html', 72 modal: true, 73 zIndex : 1, 74 border : 'thin' // 定义窗体边框的样式。可用值：true，false，'thin'，'thick'。（该方法自1.4.5版开始可用）。默认：true 75 }); 76 77 }); 78 79 </script> 80 </body> 81 82 </html>
效果：
其中center方法好像没有什么用。
布局
easyui中布局有：tabs、accordion、layout这三种方式【没算panel与自己定位position】。我目测这几种布局的每一个方法与属性都很重要，我就不再写摘要了，直接写一个例子好了。
所有的文件：
其中student目录中的文件内容与左侧树中的子节点文本相同，不再写出
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>easyui one</title> 7 <link type="text/css" rel="stylesheet" href="http://localhost:8081/static/assets/jquery-easyui-1.5.2/themes/default/easyui.css" /> 8 <link type="text/css" rel="stylesheet" href="http://localhost:8081/static/assets/jquery-easyui-1.5.2/themes/icon.css" /> 9 <link type="text/css" rel="stylesheet" href="http://localhost:8081/static/index.css" /> 10 </head> 11 12 <body class="easyui-layout"> 13 <div data-options="region:'north'" style="height:50px;"> 14 <h1 class="banner">学生信息管理系统</h1> 15 <div class="nav-top"> 16 菜单 17 </div> 18 </div> 19 <div data-options="region:'west',title:'系统菜单',split:true" style="180px;"> 20 <div id="accdion-left" class="easyui-accordion" data-options="fit:true"> 21 <div title="学生管理" data-options=""> 22 <ul id="stuManagerTree" class="easyui-tree" data-options='lines:true,animate:true'> 23 <li> 24 <span>基本管理</span> 25 <ul> 26 <li><span>学生基本信息</span></li> 27 <li><span>添加学生</span></li> 28 <li><span>成绩查询</span></li> 29 </ul> 30 </li> 31 <li> 32 <span>奖惩管理</span> 33 <ul> 34 <li><span>奖励查询</span></li> 35 <li><span>添加奖励</span></li> 36 <li><span>处罚查询</span></li> 37 <li><span>添加处罚</span></li> 38 </ul> 39 </li> 40 </ul> 41 </div> 42 <div title="教师管理" data-options="" style=""> 43 教师管理 44 </div> 45 <div title="课程管理"> 46 课程管理 47 </div> 48 </div> 49 50 51 </div> 52 <div data-options="region:'center',title:'center title'"> 53 <div id="tabs-center" class="easyui-tabs" data-options="fit:true"> 54 <div title="主 页"> 55 tab1 56 </div> 57 </div> 58 </div> 59 60 61 <script type="text/javascript" charset="utf-8" src="http://localhost:8081/static/assets/jquery-2.1.4/jquery.min.js"></script> 62 <script type="text/javascript" charset="utf-8" src="http://localhost:8081/static/assets/jquery-easyui-1.5.2/jquery.easyui.min.js"></script> 63 <script type="text/javascript" charset="utf-8" src="http://localhost:8081/static/assets/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script> 64 <script type="text/javascript" charset="utf-8" src="http://localhost:8081/static/assets/js/lib.js"></script> 65 <script type="text/javascript" charset="utf-8"> 66 $(function() { 67 var tabsCenter = $('#tabs-center'); 68 var stuManagerTree = $('#stuManagerTree'); 69 stuManagerTree.tree({ 70 onClick: function(node) { 71 if (stuManagerTree.tree('isLeaf', node.target)) { 72 var text = node.text; 73 if(tabsCenter.tabs('exists',text)){ 74 tabsCenter.tabs('select',text); 75 }else{ 76 tabsCenter.tabs('add',{ 77 title : text, 78 closable : true, 79 href : SM.convertTreeNodeToUrl(text) 80 }); 81 } 82 } 83 } 84 }); 85 }); 86 87 </script> 88 </body> 89 90 </html>
lib.js
1 var SM = { 2 /** 3 * 将树节点中的文本转换为URL 4 */ 5 convertTreeNodeToUrl: function (nodeText) { 6 var url = 'http://localhost:8081/static/'; 7 switch (nodeText) { 8 case '学生基本信息': 9 { 10 url += 'student/list.html'; 11 break; 12 } 13 case '添加学生': 14 { 15 url += 'student/add.html'; 16 break; 17 } 18 case '成绩查询': 19 { 20 url += 'student/scoreQuery.html'; 21 break; 22 } 23 case '奖励查询': 24 { 25 url += 'student/rewardQuery.html'; 26 break; 27 } 28 case '添加奖励': 29 { 30 url += 'student/rewardAdd.html'; 31 break; 32 } 33 case '处罚查询': 34 { 35 url += 'student/punishQuery.html'; 36 break; 37 } 38 case '添加处罚': 39 { 40 url += 'student/punishAdd.html'; 41 break; 42 } 43 default: 44 { 45 url = 'http:localhost:8081'; 46 break; 47 } 48 } 49 return url; 50 } 51 };
效果
现在这个布局只是简单的添加了点击事件，且树是硬编码在代码中的，目前tree组件还不是重点，之后写到了再说。而且easyui的布局确实没办法去写一个摘要，之后用到什么高级功能了再说【比如点击子页面中一个按钮，打开另一个子页面】。
其中tree组件与tabs的点击事件处理基本流程如下：
首先判断当前点击是否为叶子节点
如果是叶子节点，则根据节点的标题判断tabs容器中是否存在
如果存在
选中
如果不存在，
从node中提取其对应的URL【由于现在还没把tree保存到数据库中，这里用字符串替换】、标题、icon【如果有的话】、closable属性【其实这个可以设置为除了主页之外其它tab页面的closable属性均为true】，
创建对应的tab页面
选中
datagrid开始
开始datagrid
快速例子
本例使用的后台技术为：spring + spring mvc + mybatis，数据库为mysql，使用了mybatis通用mapper，可参考：https://gitee.com/free/Mapper。整体目录结构：
本想把静态页面与后台代码完全分离的，但是电脑的80端口被大量程序占用，想了想还是算了吧，就不搞那些对本例没用的东西了
===pom
此pom文件是我经常使用的一个，里面有很多东西可以去掉
1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 2 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> 3 <modelVersion>4.0.0</modelVersion> 4 <groupId>com.laolang.easyui</groupId> 5 <artifactId>easyui-one</artifactId> 6 <packaging>war</packaging> 7 <version>0.0.1-SNAPSHOT</version> 8 9 <!-- 集中定义依赖版本号 --> 10 <properties> 11 <!-- test --> 12 <junit.version>4.10</junit.version> 13 <hamcrest.version>1.3</hamcrest.version> 14 15 16 <!-- java ee --> 17 <javaee-api.version>7.0</javaee-api.version> 18 <servlet-api.version>3.0.1</servlet-api.version> 19 <persistence-api.version>1.0</persistence-api.version> 20 <jstl.version>1.2</jstl.version> 21 <standard.version>1.1.2</standard.version> 22 23 24 <!-- spring --> 25 <spring.version>4.2.0.RELEASE</spring.version> 26 27 <!-- mybatis --> 28 <mybatis.version>3.2.8</mybatis.version> 29 <mybatis.spring.version>1.2.2</mybatis.spring.version> 30 <mybatis.paginator.version>1.2.15</mybatis.paginator.version> 31 <pagehelper.version>4.0.3</pagehelper.version> 32 <tk.mapper.version>3.2.2</tk.mapper.version> 33 34 35 <mysql.version>5.1.32</mysql.version> 36 37 <!-- log --> 38 <slf4j.version>1.7.12</slf4j.version> 39 <logback.version>1.1.3</logback.version> 40 <logback.ext.version>0.1.2</logback.ext.version> 41 42 <!-- json --> 43 <jackson.version>2.4.2</jackson.version> 44 <jackson.mapper.version>1.9.13</jackson.mapper.version> 45 46 <!-- google --> 47 <gson.version>2.2.2</gson.version> 48 <guava.version>18.0</guava.version> 49 50 <!-- alibaba --> 51 <druid.version>1.0.12</druid.version> 52 53 <!-- ehcache --> 54 <ehcache.version>2.7.5</ehcache.version> 55 56 <!-- apache --> 57 <httpclient.version>4.5</httpclient.version> 58 <commons-lang3.version>3.3.2</commons-lang3.version> 59 <commons-io.version>2.5</commons-io.version> 60 <commons-fileupload.version>1.3.2</commons-fileupload.version> 61 <commons-net.version>3.3</commons-net.version> 62 <commons-codec.version>1.9</commons-codec.version> 63 64 <!-- beetl --> 65 <beetl.version>2.7.5</beetl.version> 66 67 <!-- JSR 303 --> 68 <hibernate-validator.version>5.1.3.Final</hibernate-validator.version> 69 <validator-api.version>1.1.0.Final</validator-api.version> 70 71 <joda-time.version>2.5</joda-time.version> 72 </properties> 73 74 <dependencies> 75 <!-- test --> 76 <dependency> 77 <groupId>junit</groupId> 78 <artifactId>junit</artifactId> 79 <version>${junit.version}</version> 80 <scope>test</scope> 81 </dependency> 82 <dependency> 83 <groupId>org.hamcrest</groupId> 84 <artifactId>hamcrest-all</artifactId> 85 <version>${hamcrest.version}</version> 86 <scope>test</scope> 87 </dependency> 88 89 <!-- java ee --> 90 <dependency> 91 <groupId>javax</groupId> 92 <artifactId>javaee-api</artifactId> 93 <version>${javaee-api.version}</version> 94 <scope>provided</scope> 95 </dependency> 96 <dependency> 97 <groupId>javax.servlet</groupId> 98 <artifactId>javax.servlet-api</artifactId> 99 <version>${servlet-api.version}</version> 100 <scope>provided</scope> 101 </dependency> 102 <dependency> 103 <groupId>javax.persistence</groupId> 104 <artifactId>persistence-api</artifactId> 105 <version>1.0</version> 106 </dependency> 107 <dependency> 108 <groupId>jstl</groupId> 109 <artifactId>jstl</artifactId> 110 <version>${jstl.version}</version> 111 </dependency> 112 <dependency> 113 <groupId>taglibs</groupId> 114 <artifactId>standard</artifactId> 115 <version>${standard.version}</version> 116 </dependency> 117 118 <!-- Spring --> 119 <dependency> 120 <groupId>org.springframework</groupId> 121 <artifactId>spring-context</artifactId> 122 <version>${spring.version}</version> 123 </dependency> 124 <dependency> 125 <groupId>org.springframework</groupId> 126 <artifactId>spring-oxm</artifactId> 127 <version>${spring.version}</version> 128 </dependency> 129 <dependency> 130 <groupId>org.springframework</groupId> 131 <artifactId>spring-tx</artifactId> 132 <version>${spring.version}</version> 133 </dependency> 134 <dependency> 135 <groupId>org.springframework</groupId> 136 <artifactId>spring-jdbc</artifactId> 137 <version>${spring.version}</version> 138 </dependency> 139 <dependency> 140 <groupId>org.springframework</groupId> 141 <artifactId>spring-beans</artifactId> 142 <version>${spring.version}</version> 143 </dependency> 144 <dependency> 145 <groupId>org.springframework</groupId> 146 <artifactId>spring-aop</artifactId> 147 <version>${spring.version}</version> 148 </dependency> 149 <dependency> 150 <groupId>org.springframework</groupId> 151 <artifactId>spring-test</artifactId> 152 <version>${spring.version}</version> 153 </dependency> 154 <dependency> 155 <groupId>org.springframework</groupId> 156 <artifactId>spring-aspects</artifactId> 157 <version>${spring.version}</version> 158 </dependency> 159 <dependency> 160 <groupId>org.springframework</groupId> 161 <artifactId>spring-web</artifactId> 162 <version>${spring.version}</version> 163 </dependency> 164 <dependency> 165 <groupId>org.springframework</groupId> 166 <artifactId>spring-webmvc</artifactId> 167 <version>${spring.version}</version> 168 </dependency> 169 <dependency> 170 <groupId>org.springframework</groupId> 171 <artifactId>spring-core</artifactId> 172 <version>${spring.version}</version> 173 </dependency> 174 <!--<dependency> --> 175 <!--<groupId>org.springframework</groupId> --> 176 <!--<artifactId>spring-jms</artifactId> --> 177 <!--</dependency> --> 178 <!--<dependency> --> 179 <!--<groupId>org.springframework</groupId> --> 180 <!--<artifactId>spring-context-support</artifactId> --> 181 <!--</dependency> --> 182 183 184 185 <!-- JSR 303 --> 186 <dependency> 187 <groupId>javax.validation</groupId> 188 <artifactId>validation-api</artifactId> 189 <version>${validator-api.version}</version> 190 </dependency> 191 192 <dependency> 193 <groupId>org.hibernate</groupId> 194 <artifactId>hibernate-validator</artifactId> 195 <version>${hibernate-validator.version}</version> 196 </dependency> 197 198 199 <!-- beetl --> 200 <dependency> 201 <groupId>com.ibeetl</groupId> 202 <artifactId>beetl</artifactId> 203 <version>${beetl.version}</version> 204 </dependency> 205 206 <!-- Mybatis --> 207 <dependency> 208 <groupId>org.mybatis</groupId> 209 <artifactId>mybatis</artifactId> 210 <version>${mybatis.version}</version> 211 </dependency> 212 <dependency> 213 <groupId>org.mybatis</groupId> 214 <artifactId>mybatis-spring</artifactId> 215 <version>${mybatis.spring.version}</version> 216 </dependency> 217 <dependency> 218 <groupId>com.github.pagehelper</groupId> 219 <artifactId>pagehelper</artifactId> 220 <version>${pagehelper.version}</version> 221 </dependency> 222 <dependency> 223 <groupId>tk.mybatis</groupId> 224 <artifactId>mapper</artifactId> 225 <version>${tk.mapper.version}</version> 226 </dependency> 227 228 229 <!-- MySql --> 230 <dependency> 231 <groupId>mysql</groupId> 232 <artifactId>mysql-connector-java</artifactId> 233 <version>${mysql.version}</version> 234 </dependency> 235 236 <!-- alibaba --> 237 <dependency> 238 <groupId>com.alibaba</groupId> 239 <artifactId>druid</artifactId> 240 <version>${druid.version}</version> 241 </dependency> 242 243 <!-- Jackson Json处理工具包 --> 244 <dependency> 245 <groupId>org.codehaus.jackson</groupId> 246 <artifactId>jackson-mapper-asl</artifactId> 247 <version>${jackson.mapper.version}</version> 248 </dependency> 249 <dependency> 250 <groupId>com.fasterxml.jackson.core</groupId> 251 <artifactId>jackson-core</artifactId> 252 <version>${jackson.version}</version> 253 </dependency> 254 <dependency> 255 <groupId>com.fasterxml.jackson.core</groupId> 256 <artifactId>jackson-databind</artifactId> 257 <version>${jackson.version}</version> 258 </dependency> 259 <dependency> 260 <groupId>com.fasterxml.jackson.core</groupId> 261 <artifactId>jackson-annotations</artifactId> 262 <version>${jackson.version}</version> 263 </dependency> 264 265 <!-- google --> 266 <dependency> 267 <groupId>com.google.code.gson</groupId> 268 <artifactId>gson</artifactId> 269 <version>${gson.version}</version> 270 </dependency> 271 <dependency> 272 <groupId>com.google.guava</groupId> 273 <artifactId>guava</artifactId> 274 <version>${guava.version}</version> 275 </dependency> 276 277 278 <!-- apache --> 279 <dependency> 280 <groupId>org.apache.commons</groupId> 281 <artifactId>commons-lang3</artifactId> 282 <version>${commons-lang3.version}</version> 283 </dependency> 284 <dependency> 285 <groupId>commons-io</groupId> 286 <artifactId>commons-io</artifactId> 287 <version>${commons-io.version}</version> 288 </dependency> 289 <dependency> 290 <groupId>commons-fileupload</groupId> 291 <artifactId>commons-fileupload</artifactId> 292 <version>${commons-fileupload.version}</version> 293 </dependency> 294 <dependency> 295 <groupId>org.apache.httpcomponents</groupId> 296 <artifactId>httpclient</artifactId> 297 <version>${httpclient.version}</version> 298 </dependency> 299 <dependency> 300 <groupId>commons-net</groupId> 301 <artifactId>commons-net</artifactId> 302 <version>${commons-net.version}</version> 303 </dependency> 304 <dependency> 305 <groupId>commons-codec</groupId> 306 <artifactId>commons-codec</artifactId> 307 <version>${commons-codec.version}</version> 308 </dependency> 309 310 311 312 313 <!-- logback --> 314 <dependency> 315 <groupId>org.slf4j</groupId> 316 <artifactId>slf4j-api</artifactId> 317 <version>${slf4j.version}</version> 318 </dependency> 319 <dependency> 320 <groupId>org.slf4j</groupId> 321 <artifactId>jcl-over-slf4j</artifactId> 322 <version>${slf4j.version}</version> 323 </dependency> 324 <dependency> 325 <groupId>ch.qos.logback</groupId> 326 <artifactId>logback-core</artifactId> 327 <version>${logback.version}</version> 328 </dependency> 329 <dependency> 330 <groupId>ch.qos.logback</groupId> 331 <artifactId>logback-classic</artifactId> 332 <version>${logback.version}</version> 333 </dependency> 334 <dependency> 335 <groupId>org.logback-extensions</groupId> 336 <artifactId>logback-ext-spring</artifactId> 337 <version>${logback.ext.version}</version> 338 </dependency> 339 340 341 <!-- 时间操作组件 --> 342 <dependency> 343 <groupId>joda-time</groupId> 344 <artifactId>joda-time</artifactId> 345 <version>${joda-time.version}</version> 346 </dependency> 347 348 349 350 351 </dependencies> 352 353 <build> 354 <finalName>${project.artifactId}</finalName> 355 <plugins> 356 <!-- 资源文件拷贝插件 --> 357 <plugin> 358 <groupId>org.apache.maven.plugins</groupId> 359 <artifactId>maven-resources-plugin</artifactId> 360 <version>2.7</version> 361 <configuration> 362 <encoding>UTF-8</encoding> 363 </configuration> 364 </plugin> 365 <!-- java编译插件 --> 366 <plugin> 367 <groupId>org.apache.maven.plugins</groupId> 368 <artifactId>maven-compiler-plugin</artifactId> 369 <version>3.2</version> 370 <configuration> 371 <source>1.7</source> 372 <target>1.7</target> 373 <encoding>UTF-8</encoding> 374 </configuration> 375 </plugin> 376 <!-- 运行 java 类 --> 377 <!-- 必须先使用 mvc compile 编译 --> 378 <!-- mvn exec:java --> 379 <plugin> 380 <groupId>org.codehaus.mojo</groupId> 381 <artifactId>exec-maven-plugin</artifactId> 382 <version>1.4.0</version> 383 </plugin> 384 385 <!-- 配置Tomcat插件 --> 386 <plugin> 387 <groupId>org.apache.tomcat.maven</groupId> 388 <artifactId>tomcat7-maven-plugin</artifactId> 389 <version>2.2</version> 390 <configuration> 391 <port>8081</port> 392 <path>/</path> 393 <!-- 防止GET中文乱码 --> 394 <uriEncoding>UTF-8</uriEncoding> 395 </configuration> 396 </plugin> 397 </plugins> 398 </build> 399 400 401 </project>
===controller
1 @RequestMapping(value="list",method = RequestMethod.GET, produces = "application/json; charset=utf-8") 2 public ResponseEntity<EasyuiGridListPojo<Student>> findPageList(@RequestParam(name = "page", defaultValue = "1") Integer page, 3 @RequestParam(name = "rows", defaultValue = "10") Integer size,Student record){ 4 try { 5 PageInfo<Student> pageInfo = studentService.findPageListByWhere(page, size, record); 6 List<Student> students = pageInfo.getList(); 7 EasyuiGridListPojo<Student> easyuiGridListPojo = new EasyuiGridListPojo<>(); 8 easyuiGridListPojo.setRows(students); 9 easyuiGridListPojo.setTotal(pageInfo.getTotal()); 10 return ResponseEntity.ok(easyuiGridListPojo); 11 }catch(Exception e) { 12 13 } 14 15 return ResponseEntity.status(HttpStatus.SC_INTERNAL_SERVER_ERROR).body(null); 16 }
===EasyuiGridListPojo
1 package com.laolang.easyui.one.pojo; 2 3 import java.util.List; 4 5 public class EasyuiGridListPojo<T> { 6 // 空构造函数，getter,setter,tostring等省略 7 8 9 private Long total; 10 11 private List<T> rows; 12 }
===BaseDomain
1 package com.laolang.easyui.one.domain; 2 3 import com.fasterxml.jackson.annotation.JsonFormat; 4 5 import java.util.Date; 6 7 /** 8 * 实体类基类 9 * @author laolang2016 10 * @version 1.0 11 */ 12 public class BaseDomain { 13 14 // 省略 getter,setter 15 16 /** 17 * 创建时间 18 */ 19 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss") 20 protected Date created; 21 22 /** 23 * 最后更新时间 24 */ 25 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss") 26 protected Date updated; 27 28 29 30 31 32 }
===Student
1 package com.laolang.easyui.one.domain; 2 3 import javax.persistence.*; 4 5 import com.fasterxml.jackson.annotation.JsonFormat; 6 7 import java.util.Date; 8 9 @Table(name = "tb_student") 10 public class Student extends BaseDomain { 11 12 // 空构造器，getter,setter,tostring等省略 13 14 /** 15 * ID 16 */ 17 @Id 18 @GeneratedValue(strategy = GenerationType.IDENTITY) 19 private Long id; 20 21 /** 22 * 学号 23 */ 24 @Column(name = "s_number") 25 private String sNumber; 26 27 /** 28 * 姓名 29 */ 30 private String name; 31 32 /** 33 * 身份证号 34 */ 35 @Column(name = "id_number") 36 private String idNumber; 37 38 /** 39 * 出生日期 40 */ 41 @JsonFormat(pattern = "yyyy-MM-dd") 42 private Date birthday; 43 44 /** 45 * 性别 46 */ 47 private String sex; 48 49 /** 50 * 头像地址 51 */ 52 @Column(name = "head_pic") 53 private String headPic; 54 55 /** 56 * 密码 57 */ 58 private String pwd; 59 60 /** 61 * 所在班级ID 62 */ 63 @Column(name = "classes_Id") 64 private Long classesId; 65 66 }
===html
接上面的布局代码，将student/list.html修改为如下代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>student list</title> 6 </head> 7 <body> 8 <div class="easyui-layout" data-options="fit:true"> 9 <div region="north" title="复杂查询" data-options="height:150,collapsible:true,collapsed:true"> 10 复杂查询 11 </div> 12 <div region="center" > 13 <table id="studentListTable" data-options="fit:true"></table> 14 </div> 15 </div> 16 <script type="text/javascript" charset="utf-8"> 17 $(function(){ 18 // 初始化表格 19 $('#studentListTable').datagrid({ 20 url : SM.url.student.list, 21 title : '学生基本信息', 22 pagination : true, // 如果为true，则在DataGrid控件底部显示分页工具栏。默认：false 23 pageSize : 25, // 在设置分页属性的时候初始化页面大小。默认：10 24 pageList : [25,50,100], // 在设置分页属性的时候 初始化页面大小选择列表。默认：[10,20,30,40,50]。注意：此列表中的数字必须为pageSize的整数倍 25 idField : 'id', // 指明哪一个字段是标识字段。 26 method : 'get', // 该方法类型请求远程数据。默认：post 27 rownumbers : true, // 如果为true，则显示一个行号列。默认：false, 28 striped : true, // 是否显示斑马线效果。默认：false 29 fit : true, 30 columns : [[{ 31 title : 'id', 32 field : 'id', 33 width : 100, 34 hidden : true 35 },{ 36 title : '学号', 37 field : 'sNumber', 38 width : 100, 39 checkbox : true 40 },{ 41 title : '姓名', 42 field : 'name', 43 width : 100 44 },{ 45 title : '身份证号', 46 field : 'idNumber', 47 width : 125 48 },{ 49 title : '出生日期', 50 field : 'birthday', 51 width : 100 52 },{ 53 title : '性别', 54 field : 'sex', 55 width : 100, 56 formatter : function(value,row,index){ 57 return SM.convertStudentSex(value); 58 } 59 },{ 60 title : '头像', 61 field : 'headPic', 62 width : 100 63 },{ 64 title : '所属性班级编号', 65 field : 'classesId', 66 width : 100 67 }]], 68 toolbar : [ { 69 text : '增加', 70 iconCls : 'icon-add', 71 handler : function() { 72 73 } 74 },'-',{ 75 text: '删除', 76 iconCls : 'icon-remove', 77 handler : function(){ 78 79 } 80 },'-',{ 81 text : '修改', 82 iconCls : 'icon-edit', 83 handler : function(){ 84 85 } 86 }] 87 88 }); 89 }); 90 </script> 91 </body> 92 </html>
===SM.convertStudentSex
1 /** 2 * 格式化学生性别信息 3 */ 4 convertStudentSex : function( sex ){ 5 if( 'MAIL' === sex ){ 6 return '男'; 7 }else if( 'FAMAIL' === sex ){ 8 return '女'; 9 } 10 }
===sql
1 CREATE TABLE `tb_student` ( 2 `id` bigint(11) NOT NULL AUTO_INCREMENT COMMENT '学生ID', 3 `name` varchar(20) NOT NULL comment '学生姓名', 4 s_number varchar(20) NOT NULL UNIQUE comment '学号', 5 id_number varchar(25) NOT NULL UNIQUE comment '身份证号', 6 birthday date NOT NULL comment '出生日期', 7 sex varchar(10) NOT NULL default 'MAIL' comment '性别。MAIL男,FAMIAL：女', 8 head_pic varchar(150) DEFAULT NULL comment '头像地址', 9 pwd varchar(30) NOT NULL comment '密码', 10 classes_id bigint(11) comment '所在班级ID', 11 `created` datetime DEFAULT NULL COMMENT '创建时间', 12 `updated` datetime DEFAULT NULL COMMENT '更新时间', 13 PRIMARY KEY (`id`) 14 15 ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='学生表';
===生成测试数据的代码
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 <script type="text/javascript" charset="utf-8"> 11 window.onload = function(){ 12 var createStudentSql = function(){ 13 var sql = "INSERT INTO `tb_student` (`name`,s_number,id_number,birthday,sex,pwd,classes_id,created,updated) VALUES ("; 14 var i = 1; 15 for( i = 1; i <= 456; i++ ){ 16 sql += "'" + createName(i) + "',"; 17 sql += "'" + createSnumber(i) + "',"; 18 sql += "'" + createIdNumber(i) + "',"; 19 sql += "'1991-12-06',"; 20 if( 0 === i % 3 ){ 21 sql += "'MAIL',"; 22 }else{ 23 sql += "'FAMAIL',"; 24 } 25 sql += "'123465',"; 26 var classesId = i % 4 + 1; 27 sql +=classesId + ","; 28 sql += "'2017-12-30 05:33:25', '2017-12-30 05:33:25');"; 29 console.log(sql); 30 sql = "INSERT INTO `tb_student` (`name`,s_number,id_number,birthday,sex,pwd,classes_id,created,updated) VALUES ("; 31 32 } 33 } 34 // INSERT INTO `tb_student` (`name`,s_number,id_number,birthday,sex,pwd,classes_id,created,updated) 35 //VALUES ('小代码', '1002', '4105221002', '1991-12-06', 'MAIL', '123456', '1', '2017-12-30 05:33:25', '2017-12-30 05:33:25'), 36 function createName( i ){ 37 var name = 'xiaodaima_' + i; 38 return name; 39 } 40 41 function createSnumber( i ){ 42 var sNumber = 1000 + i; 43 return sNumber; 44 } 45 46 function createIdNumber( i ){ 47 var idNumber = 4105221000 + i ; 48 return idNumber; 49 } 50 51 52 53 createStudentSql(); 54 }; 55 </script> 56 </html>
原本想用java写的，但是电脑忽然抽风，可以运行maven tomcat 插件，无法运行java main方法，且不知道什么原因，这个html文件输出中文的时候总是乱码，就先这么地吧。
===效果
===注意事项
1. 默认method为post，要根据实际情况进行修改
2. idField是否设置需要考虑清楚。因为这涉及到翻页选择的问题。
3. 注意pageSize与pageList的关系，pageList中的每一个值都是pageSize的整数倍
4. 传给datagreid的数据必须要有total与rows属性，其中total为数据库表的总记录数，rows为本次查询出的数据，具体原因：
在datagrid的属性中，有这样一个属性：loadFilter，其解释为：
1 返回过滤数据显示。该函数带一个参数'data'用来指向源数据（即：获取的数据源，比如Json对象）。您可以改变源数据的标准数据格式。这个函数必须返回包含'total'和'rows'属性的标准数据对象。
2 代码示例：
3
4 // 从Web Service（asp.net、java、php等）输出的JSON对象中移除'd'对象
5 $('#dg').datagrid({
6 loadFilter: function(data){
7 if (data.d){
8 return data.d;
9 } else {
10 return data;
11 }
12 }
13 });
这个属性的说明其实已经非常明确的解释了datagrid接收json数据的结构。这也就是说我们返回的json数据结构是可以自定义的，不一定必须包含total与rows，但是最终交给datagrid去渲染数据的时候，必须要满足如下结构：
1 { 2 total : 123, // 当前表中总记录数 3 rows : [{ // 当前页数据 4 ... 5 },{ 6 ... 7 }] 8 }
5. 复选框选项加在第一个显示的属性上即可
===BUG
我在datagrid上添加了一个面板，默认是折叠起来的，但是运行之后标题无法显示。解决方案已经找到，原因还不知道