JQueryEasyUI學習簡單Demo

時間 2019-12-02

原文原文鏈接

一.Layout佈局

聲明：此文檔參考了jQuery EasyUI官方文檔javascript

佈局容器有5個區域：北、南、東、西和中間。中間區域面板是必須的，邊緣的面板都是可選的。每一個邊緣區域面板均可以經過拖拽其邊框改變大小，也能夠點擊摺疊按鈕將面板摺疊起來。佈局能夠進行嵌套，用戶能夠經過組合佈局構建複雜的佈局結構。css

1.經過如下代碼能夠構建下圖的效果：java

<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>

2.摺疊佈局面板jquery

1 //得到id=‘cc’的佈局面板
2 $('#cc').layout();    
3 // collapse the west panel    
4 //coolapse表示摺疊佈局方法，west表示那個方向的面板
5 $('#cc').layout('collapse','west');

3.佈局屬性json

fit屬性：若是設置爲true，佈局組件將自適應父容器。當使用'body'標籤建立佈局的時候，整個頁面會自動最大。默認falsejsp

4.區域面板屬性工具

5.用tree的形式佈局west區域的菜單佈局

代碼以下：ui

 1 <ul id="tt" class="easyui-tree">   
 2     <li>   
 3         <span>Folder</span>   
 4         <ul>   
 5            <li>   
 6                         <span>部門管理</span>   
 7                         <ul>   
 8                             <li>   
 9                                 <span><a href="#" onclick="doclickMenu('deplist.jsp','部門列表')">部門列表</a></span>
10                             </li>   
11                             <li>   
12                                  <span><a href="#" onclick="doclickMenu('depadd.jsp','部門添加')">部門添加</a></span>    
13                             </li>   
14                             <li>   
15                                 <span><a href="#">部門審覈</a></span>     
16                             </li>   
17                             <li>   
18                                 <span><a href="#">部門統計</a></span>       
19                             </li>   
20                         </ul>   
21                     </li>   
22                     <li>   
23                         <span>員工管理</span>   
24                         <ul>   
25                             <li>   
26                                 <span><a href="#">員工列表</a></span>
27                             </li>   
28                             <li>   
29                                  <span><a href="#">員工添加</a></span>    
30                             </li>   
31                             <li>   
32                                 <span><a href="#">今日打卡</a></span>     
33                             </li>   
34                             <li>   
35                                 <span><a href="#">我的統計</a></span>       
36                             </li>   
37                         </ul>   
38                     </li>   
39                     <li>   
40                         <span>郵箱管理</span>   
41                         <ul>   
42                             <li>   
43                                 <span><a href="#">郵件列表</a></span>
44                             </li>   
45                             <li>   
46                                  <span><a href="#">編寫郵件</a></span>    
47                             </li>   
48                             <li>   
49                                 <span><a href="#">接收郵件</a></span>     
50                             </li>   
51                             <li>   
52                                 <span><a href="#">垃圾箱</a></span>       
53                             </li>   
54                         </ul>   
55                     </li>   
56                     <li>   
57                         <span>請假管理</span>   
58                         <ul>   
59                             <li>   
60                                 <span><a href="#">請假列表</a></span>
61                             </li>   
62                             <li>   
63                                  <span><a href="#">請假申請</a></span>    
64                             </li>   
65                             <li>   
66                                 <span><a href="#">請假審覈</a></span>     
67                             </li>   
68                             <li>   
69                                 <span><a href="#">請假統計</a></span>       
70                             </li>   
71                         </ul>   
72                     </li>   
73         </ul>   
74     </li>   
75     <li>   
76         <span>File21</span>   
77     </li>   
78 </ul>

6.選項卡以下圖：url

代碼以下：

 1 /********點擊west區域的菜單欄，在center區域添加新標籤******/
 2          function doclickMenu(surl, title) {
 3              //判斷選項卡是否選中
 4              if($('#tt1').tabs('exists',title)) {
 5                  $('#tt1').tabs('select',title);//選中title這個選項卡
 6              } else {
 7                  
 8                  $('#tt1').tabs('add',{    
 9                                 title:title,    
10                                 content:'<iframe id="myfrm" src="'+surl+'" frameborder="0" height="100%" width="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe>',    
11                                  
12                 });
13             } 
14          }
15 
16  <li>   
17 ----------------------------------------------------------------------------------
18 <span><a href="#" onclick="doclickMenu('deplist.jsp','部門列表')">部門列表 </a></span>
19  </li>  
20 
21 ---------------------------------------------------------------------------------
22 <div id="tt1" class="easyui-tabs" fit='true' style="width:500px;height:250px;">   
23              
24 </div>

7.datagrid（數據表格樹）

以下圖：

代碼：

 1 <link rel="stylesheet" href="easyui/themes/default/easyui.css"
 2     type="text/css"></link>
 3 <link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
 4 <script type="text/javascript" src="easyui/jquery-1.9.1.js"></script>
 5 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 6 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
 7 <script>
 8     $(function() {
 9         
10         var data = [
11                         {'sid':'1','uname':'張飛','sex':'男','address':'西安','birthday':'1990-01-01'},
12                         {'sid':'2','uname':'關羽','sex':'男','address':'西安','birthday':'1990-01-01'},
13                         {'sid':'3','uname':'魏延','sex':'男','address':'西安','birthday':'1990-01-01'},
14                         {'sid':'4','uname':'趙雲','sex':'男','address':'西安','birthday':'1990-01-01'},
15                         {'sid':'5','uname':'黃忠','sex':'男','address':'西安','birthday':'1990-01-01'}
16                     ];
17     
18         $("#tt").datagrid({
19              data:data, //設置json格式數據
20              width:'fit',  //設置面板寬度爲父容器的寬度
21              singleSelect:true, //這容許選中一行
22              pagination:true,//若是爲true，則在DataGrid控件底部顯示分頁工具欄
23              pageList:[5,10,15,20],//在設置分頁屬性的時候 初始化頁面大小選擇列表 24              pageSize:5,//在設置分頁屬性的時候初始化頁面大小 25              loadMsg:'正在加載數據...',
26              columns:[[    
27                         {field:'sid',title:'編號',width:100,checkbox:true},    
28                         {field:'uname',title:'姓名',width:100},    
29                         {field:'sex',title:'性別',width:100,align:'right'},    
30                         {field:'address',title:'地址',width:100,align:'right'},    
31                         {field:'birthday',title:'生日',width:100,align:'right'},    
32                         {field:'option',title:'操做',width:100,align:'right',
33                             formatter:function(value,row,index){
34                                 return '<input type="button" name="button" id="button" value="刪除" onclick="doDel('+ row.sid +')"/><input type="button" name="button" id="button" value="更新" />';
35                             }}
36                         
37                     ]]   
38         });
39     
40     });
41     //刪除
42     function doDel(sid) {
43         alert(sid);
44     }
45 </script>
46 </head>
47 
48 <body>
49     部門列表
50     <table id="tt">
51 
52     </table>
53 
54 </body>

說明：formatter是datagrid的列屬性，用法：

 1 $('#dg').datagrid({
 2     columns:[[
 3         {field:'userId',title:'User', width:80,
 4             formatter: function(value,row,index){
 5                 if (row.user){
 6                     return row.user.name;
 7                 } else {
 8                     return value;
 9                 }
10             }
11         }
12     ]]
13 });

相關標籤/搜索

每日一句

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