km之路--002 easyui 一

時間 2019-11-30

標籤之路 easyui 简体版

原文原文鏈接

下載地址

http://download.csdn.net/album/detail/343javascript

我使用的環境

操做系統：windows/linux(deepin)php

數據庫：mysql 5.6 / mariadb 10.0.x.xcss

jdk : 8html

ide : spring tool suite 3.9.2 【不是不想用idea而是頻繁的找註冊碼實在太麻煩了】java

maven : 3.5.2 node

tomcat : 7mysql

easyui : 1.5.2jquery

參考資料

JQuery EasyUI 中文網： http://www.jeasyui.net/linux

http://download.csdn.net/album/detail/343 中的中文文檔git

百度及各大論壇等

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\themes\icons中，並在jquery-easyui-x.x.x\themes\icon.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能夠取消打開操做。

在這個方法中的代碼是進行面板居中操做。參考自：http://www.javashuo.com/article/p-gticjymv-bs.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                 width: 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                 width: 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="width: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上添加了一個面板，默認是摺疊起來的，可是運行以後標題沒法顯示。解決方案已經找到，緣由還不知道

參考：http://www.javashuo.com/article/p-zzrxelsu-cd.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。