EasyUI之DataGrid使用

時間  2019-12-01
標籤 easyui datagrid 使用 简体版
原文   原文鏈接

EasyUI之DataGrid使用

2013-06-25 22:28 6438人閱讀 評論(4) 收藏 舉報
分類：

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。javascript

背景介紹：php

       原先項目採用普通的jsp頁面來作爲前端顯示,用戶體驗差,而且爲了實現某一種效果須要編寫大量的js代碼。所以尋找能夠逐步替代前端顯示的框架，逐漸轉變爲富客戶端開發。經過上網查閱資料，並結合業務須要，發現extjs過於龐大，而easyui小巧而且功能也很強大。因而採用EasyUI的方式嘗試在一個功能上使用。功能以下：css

            用戶點擊提交時，彈出模態窗口，該模態窗口內容支持異步獲取表格內容，同時支持某個表格的單元格進行編輯。而且支持複選，最後將選擇的內容提交到後臺。html

1、引入EasyUI框架前端

       Easyui的引入很是簡單。只須要在頁面中加入以下js即可以工做。java

             

[javascript] view plain copy
print ?
  1. <span style="font-family:SimHei;font-size:18px;"><script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.js"></script>jquery包  
  2. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> easyui開發包  
  3. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>解決中文亂碼包，不一樣的語言只要加入local下對應的js  
  4. <link  rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/themes/default/easyui.css"> 全局easyui css樣式包  
  5. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/themes/icon.css">全局easyui 圖標樣式包</span>  

2、使用dialog實現模態彈出框jquery

        代碼以下:json

[html] view plain copy
print ?
  1. <div id="dlg" <span style="color:#ff0000;">class="easyui-dialog"</span> title="詳細信息" style="width:730px;height:340px;padding:10px"  
  2.             data-options="  
  3.                 buttons: [{  
  4.                     text:'提交',  
  5.                     iconCls:'icon-ok',  
  6.                     handler:function(){  
  7.                         alert('ok');  
  8.                     }  
  9.                 },{  
  10.                     text:'取消',  
  11.                     handler:function(){  
  12.                         $('#dlg').dialog('close');  
  13.                     }  
  14.                 }]  
  15.             ">  
  16.     </div>  

  請你們注意上述代碼紅色部分,必定要寫成easyui-dialog，easyui會根據該標識初始化一個dialog對象 。   api

   效果以下:微信

           

3、採用Datagrid實現表格數據綁定

       代碼以下:

             

[html] view plain copy
print ?
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Insert title here</title>  
  8. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.js"></script>  
  9. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>  
  10. <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>  
  11. <link  rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/themes/default/easyui.css">  
  12. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/themes/icon.css">  
  13. </head>  
  14. <body>  
  15.       
  16.      <div id="dlg" <span style="color:#ff0000;">class="easyui-dialog"</span> title="詳細信息" style="width:740px;height:350px;padding:10px"  
  17.             data-options="  
  18.                 buttons: [{  
  19.                     text:'提交',  
  20.                     iconCls:'icon-ok',  
  21.                     handler:function(){  
  22.                         alert('ok');  
  23.                     }  
  24.                 },{  
  25.                     text:'取消',  
  26.                     handler:function(){  
  27.                         $('#dlg').dialog('close');  
  28.                     }  
  29.                 }]  
  30.             ">  
  31.         <table id="dg" class="easyui-datagrid" title="數據" style="width:700px;height:250px"  
  32.             data-options="  
  33.             rownumbers:true,  
  34.             singleSelect:false,  
  35.             url:'<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/demo/datagrid/datagrid_data1.json'  
  36.             ">  
  37.             <thead>  
  38.                 <tr>  
  39.                     <th data-options="field:'ck',checkbox:true"></th>  
  40.                     <th data-options="field:'itemid',width:80">Item ID</th>  
  41.                     <th data-options="field:'productid',width:100">Product</th>  
  42.                     <th data-options="field:'listprice',width:80,align:'right'">List Price</th>  
  43.                     <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>  
  44.                     <th data-options="field:'attr1',width:220">Attribute</th>  
  45.                     <th data-options="field:'status',width:60,align:'center'">Status</th>  
  46.                 </tr>  
  47.             </thead>  
  48.         </table>  
  49.     </div>  
  50. </body>  
  51. </html>  

請你們注意上面代碼紅色部分,告訴easyui初始化一個datagrid對象。

效果以下:

                       

4、實現編輯Product列

         使用easyui內置formatter函數，在表示datagrid表格對應product列頭增長以下代碼:

[javascript] view plain copy
print ?
  1. <span style="font-size:18px;"><th data-options="field:'productid',width:100, formatter:formatProduct">Product</th></span>  
                 編寫formatProduct回調函數，代碼以下：

[javascript] view plain copy
print ?
  1. <span style="font-size:18px;">function formatProduct(val,row,index){  
  2. return "<input type='text' id='ch'"+row.itemid+" value='0' ></input>"</span>  
[javascript] view plain copy
print ?
  1. <span style="font-size:18px;">}</span>  
              效果以下：

                       

5、爲DataGrid添加footer

        該footer至關於表格底部信息，通常作統計信息,須要給datagrid的data-options增長一個顯示footer的屬性，這裏須要注意：因爲datagrid綁定的是json數據，所以json格式須要包含footer信息。代碼以下，注意紅色部分和json數據（後面會補充上）：

[html] view plain copy
print ?
  1. <span style="font-size:18px;"><table id="dg" class="easyui-datagrid" title="數據" style="width:700px;height:250px"  
  2.             data-options="  
  3.             rownumbers:true,  
  4.             singleSelect:false,  
  5.             <span style="color:#ff0000;">showFooter: true,</span>  
  6.             url:'<%=request.getContextPath() %>/js/jquery-easyui-1.3.3/demo/datagrid/datagrid_data2.json'  
  7.             ">  
  8.             <thead>  
  9.                 <tr>  
  10.                     <th data-options="field:'ck',checkbox:true"></th>  
  11.                     <th data-options="field:'itemid',width:80">Item ID</th>  
  12.                     <th data-options="field:'productid',width:150, formatter:formatProduct">Product</th>  
  13.                     <th data-options="field:'listprice',width:80,align:'right'">List Price</th>  
  14.                     <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>  
  15.                     <th data-options="field:'attr1',width:170">Attribute</th>  
  16.                     <th data-options="field:'status',width:60,align:'center'">Status</th>  
  17.                 </tr>  
  18.             </thead>  
  19.         </table></span>  

效果以下：


                           

你們能夠看到多出來了footer可是好像不是很美觀，咱們稍微做下處理，將formatProduct函數內容改寫下，代碼以下：

[javascript] view plain copy
print ?
  1. <span style="font-size:18px;">function formatProduct(val,row,index){  
  2.     if(<span style="color:#ff0000;">"undefined" != typeof(row.productid)</span>){  
  3.         return "<input type='text' id='ch'"+row.itemid+" value='0' ></input>";  
  4.     }  
  5. }</span>  
請注意紅色部分,因爲footer中沒有productid，因此判斷當數據定義了productid格式化爲編輯框，不然不格式化爲編輯框。

效果以下：

                    

總結

      本實例中省略了一些內容,包括提交,取消,選擇checkbox時，進行product的求和，同後臺的交互（徹底jQuery異步請求）。作爲EasyUI入門的因子，但願對初學的人能有所幫助。

            有footer的json數據以下，這個也很重要，若是json數據格式不正確將沒法出現上述效果:

[plain] view plain copy
print ?
  1. {"total":28,"rows":[  
  2.     {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},  
  3.     {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},  
  4.     {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},  
  5.     {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},  
  6.     {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},  
  7.     {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},  
  8.     {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},  
  9.     {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},  
  10.     {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},  
  11.     {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}  
  12. ],"footer":[  
  13.     {"unitcost":19.80,"listprice":60.40,"itemid":"Average:"},  
  14.     {"unitcost":198.00,"listprice":604.00,"itemid":"Total:"}  
  15. ]}  

另外你們能夠去EasyUI的官網學習：http://www.jeasyui.com/,最新的api提供了更簡便的操做。

偶爾會出現官網上不去的狀況，請參看國內的網址，缺點是api不是最新：http://www.phptogether.com/juidoc/


後續會補充上datagrid的分頁，datagrid掌握後並有jquery的基礎能夠說easyui就會用了，期待學習EasyUI的朋友可以發掘更多實用的技術。


頂
4
踩
0
 
 

個人同類文章

http://blog.csdn.net
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程