2. 程式人生 > >【SSH網上商城專案實戰06】基於DataGrid的資料顯示

【SSH網上商城專案實戰06】基於DataGrid的資料顯示

阿新 • • 發佈：2018-11-05

 

轉自：https://blog.csdn.net/eson_15/article/details/51322262

1. 回顧一下第4節內容

        在第4節中，我們使用EasyUI搭建好了左側選單欄，並且通過點選選單選項在右邊彈出對應的選項卡。這節我們來使用DataGrid把右邊的選項卡部分做好。先看一下第4節中最後的aindex.jsp檔案（也可參見第4節中的內容）：

2. 建立DataGrid控制元件的幾種方式

        DataGrid顯示資料是json格式的，所以我們首先要把從後臺獲取到的資料打包成Jason格式，然後傳到前臺來讓DataGrid來顯示，這一節我們先不從後臺獲取資料，先自己準備一個.json檔案，裡面有ison格式的資料，然後我們來讓DataGird顯示，先把顯示功能做好，再請求後臺資料。

        我們先從EasyUI的參考文件中看一下DataGrid顯示的格式是什麼樣的，如下圖所示：

 

       我們沿著參考文件往下看，我們發現DataGrid空間是通過<table>來建立的，有三種建立方式：

 

       第一種：從現有的表格元素建立DataGrid，在HTML中定義列、行和資料。

        第二種：通過<table>標籤建立DataGrid控制元件。在表格內使用<th>標籤定義列。 

        第三種：使用Javascript去建立DataGrid控制元件。

        我們採取第三種，用js去建立DataGrid控制元件，首先我們得先準備一個儲存了json格式資料的檔案，在WebRoot/jquery-easyui-1.3.5/demo/datagrid/下面有幾個json檔案，我們選擇一個datagrid_data1.json，拷貝到WebRoot目錄下，修改一下引數，等會我們要來顯示這個json檔案裡的資料。如下：

 

  1.   { "total":10,"rows":[
  2.   { "code":"FI-SW-01","productname":"Koi","price":10.00},
  3.   { "code":"K9-DL-01","productname":"Dalmation","price":12.00},
  4.   { "code":"RP-SN-01","productname":"Rattlesnake","price":12.00},
  5.   { "code":"RP-LI-02","productname":"Iguana","price":12.00},
  6.   { "code":"FL-DSH-01","productname":"Manx","price":12.00},
  7.   { "code":"FL-DSH-01","productname":"Manx","price":12.00},
  8.   { "code":"FL-DLH-02","productname":"Persian","price":12.00},
  9.   { "code":"FL-DLH-02","productname":"Persian","price":12.00},
  10.   { "code":"AV-CB-01","productname":"Amazon Parrot","price":92.00},
  11.   { "code":"AV-CB-03","productname":"Amazon Parrot","price":92.00}
  12.   ]}

        我們可以看到，json資料格式是："key1": value1, "key2":value2。每個value裡面又可以是陣列，陣列中儲存新的Jason資料。
        有了json檔案，我們接下來就可以設計DataGrid控制元件了，整個DataGrid都是在query.jsp中設計的，因為要顯示的內容就是query.jsp中的內容。我們來看看query.jsp頁面：

  1.   <%@ page language= "java" import="java.util.*" pageEncoding="UTF-8"%>
  2.   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3.   <html>
  4.   <head>
  5.   <%@ include file="/public/head.jspf" %>
  6.   <script type="text/javascript">
  7.   $( function(){
  8.   $( '#dg').datagrid({
  9.   //請求資料的url地址，後面會改成請求我們自己的url
  10.   url: 'datagrid_data.json',
  11.   loadMsg:'Loading......',
  12.   queryParams:{type:''},//引數
  13.   //width:300,
  14.   fitColumns: true,//水平自動展開，如果設定此屬性，則不會有水平滾動條，演示凍結列時，該引數不要設定
  15.   //顯示斑馬線
  16.   striped: true,
  17.   //當資料多的時候不換行
  18.   nowrap: true,
  19.   singleSelect:true, //如果為真，只允許單行顯示，全顯功能失效
  20.   //設定分頁
  21.   pagination: true,
  22.   rowStyler: function(index,row){
  23.   console.info("index" + index + "," + row)
  24.   if(index % 2 == 0) {
  25.   return '';
  26.   } else {
  27.   return '';
  28.   }
  29.    
  30.   },
  31.   //同列屬性，但是這些列將會凍結在左側,大小不會改變，當寬度大於250時，會顯示滾動條，但是凍結的列不在滾動條內
  32.   frozenColumns:[[
  33.   { field:'checkbox',checkbox:true},
  34.   { field:'code',title:'編號',width:200}
  35.   ]],
  36.   //配置datagrid的列欄位
  37.   //field：列欄位的名稱，與json的key捆綁
  38.   //title：列標題，是顯示給人看的
  39.   columns:[[
  40.   { field:'productname',title:'類別名稱',width:100,
  41.   //用來格式化當前列的值，返回的是最終的資料
  42.   formatter: function(value,row,index){
  43.   return "<span title=" +　value + ">" + value + "</span>";
  44.   }
  45.   },
  46.   { field:'price',title:'價格',width:100,
  47.   styler: function(value,row,index){
  48.   //設定當前單元格的樣式，返回的字串直接交給 style屬性
  49.   //console.info("val:" + value + ",row:" + row + ",index:" + index)
  50.   if (value < 20){
  51.   return 'color:red;';
  52.   }
  53.   }
  54.   }
  55.   ]]
  56.   });
  57.   });
  58.   </script>
  59.   </head>
  60.    
  61.   <body>
  62.   <table id="dg"></table>
  63.   </body>
  64.   </html>

 

3. DataGrid控制元件的屬性

        我們可以看到，使用js去建立DataGrid控制元件的話，只要一個<table>標籤即可，主要都是在js中完成。DataGrid的控制元件很強大，這裡我們主要做一下基本的顯示，更多其他的功能可以參照EasyUI的開發文件。我們現在針對上面的query.jsp檔案做一下分析：

        首先DataGrid控制元件有兩種屬性：一個是DataGrid屬性，還有一個是列屬性。顧名思義，DataGrid屬性是給整個DataGrid控制元件新增的屬性，而列屬性是針對某一列的。每中屬性有很多，這裡只做了一些基本的常用的屬性。

        DataGrid屬性裡最重要的是columns屬性，它是一個數組，可以建立多列，見下面的截圖：

 

        我們來看下columns屬性中有哪些細節：

        列屬性中，field表示欄位名稱，對應與json資料的key，然後title是要顯示給使用者看的標題，見query.jsp檔案中，還有其他一些基本屬性可以參照EasyUI文件。列屬性中比較重要的也比較常用的兩個屬性是formatter和styler，分別是用來格式化當前列的值和設定單元格樣式的，我們主要來看一下這兩個屬性：

        我們具體來分析一下上面query.jsp中的columns屬性中，如何使用這兩個列屬性的：

 

  1.   { field:'productname',title:'類別名稱',width:100,
  2.   //用來格式化當前列的值，返回的是最終的資料
  3.   formatter: function(value,row,index){
  4.   return "<span title=" +　value + ">" + value + "</span>";//設定為滑鼠放上去顯示value值
  5.   }
  6.   },
  7.   { field:'price',title:'價格',width:100,
  8.   styler: function(value,row,index){
  9.   //設定當前單元格的樣式，返回的字串直接交給 style屬性
  10.   //console.info("val:" + value + ",row:" + row + ",index:" + index)
  11.   if (value < 20){ //如果value值小於20
  12.   return 'color:red;'; //將value值顯示為紅色
  13.   }
  14.   }
  15.   }

 

 

        然後我們再看看DataGrid控制元件的一些屬性：

 

        url表示要顯示的資料來源，這裡設定成datagrid_data.json表示資料來源是這個json檔案，放在WebRoot目錄下了；

        loadMsg表示載入資料過程中顯示的資訊；

        queryParams表示傳給後臺的引數，在這裡用不到，因為我們目前還沒有和後臺關聯上，只是顯示一個json檔案，後面會用到；

        fitColums設定為true後表示水平自動展開，自適應網格的寬度，如此設定，水平方向就不會有滾動條了，也不用設定寬度了；

        width是寬度，如果資料過長顯示不下，水平方向就會出現滾動條；

        striped設定為true後表示顯示斑馬線，這是一個顯示樣式，試一下便知；

        nowrap設定為true後表示當資料多的時候不換行，否則某一行資料多的時候會換行，會比較難看；

        pagination設定為true後表示開啟分頁功能；

        singleSelect設定為true時，只允許勾選單行，全選功能失效，主要用於最前面一列的複選框；

        frozenColums是為了設定凍結列，在frozenColums中設定的列，不會改變大小。裡面如果設定了{field:'checkbox',checkbox:true},表示這是個複選框列，給使用者勾選用的，如果設定了上面的singleSelect，那麼只能選擇一項，不能全選；

        rowStyler是設定所有行的樣式的，兩個引數為行索引和行，上面設定的是偶數行是白色，奇數行是黃色。

        等等……還有其他DataGrid控制元件的屬性，可以參考EasyUI的技術文件，在這裡就不一一解說了。

4. DataGrid資料顯示的效果

        好了，完成了query.jsp後，我們重啟tomcat，然後進入到後臺，點選左側選單欄的類別管理，就會在右邊出現一個類別管理的選項卡，然後就會顯示我們指定的json資料，這個Jason資料是我們自己放在WebRoot目錄下的，後面我們將會把json和struts整合，動態的獲取從後臺傳過來的json資料。

相關推薦

【SSH網上商城專案實戰06】基於DataGrid的資料顯示

  轉自：https://blog.csdn.net/eson_15/article/details/51322262 1. 回顧一下第4節內容         在第4節中，我們使用Eas

SSH學習02 【SSH網上商城專案實戰02】基本增刪查改、Service和Action的抽取以及使用註解替換xml

【SSH網上商城專案實戰02】基本增刪查改、Service和Action的抽取以及使用註解替換xml 轉自：https://blog.csdn.net/eson_15/article/details/51297698 上一節我們搭建好了Struts2、Hibernate和Spring的開

【SSH網上商城專案實戰05】完成資料庫的級聯查詢和分頁

  轉自：https://blog.csdn.net/eson_15/article/details/51320212 上一節我們完成了EasyUI選單的實現。這一節我們主要來寫一下CategoryServiceImpl實現類，完成資料庫的級聯查詢。一般專案從後往前做，先做se

【SSH網上商城專案實戰08】查詢和刪除商品類別功能的實現

  轉自：https://blog.csdn.net/eson_15/article/details/51338991 上一節我們完成了使用DataGrid顯示所有商品資訊，這節我們開始新增幾個功能：新增、更新、刪除和查詢。首先我們實現下前臺的顯示，然後再做後臺獲取資料。

【SSH網上商城專案實戰07】Struts2和Json的整合

    轉自：https://blog.csdn.net/eson_15/article/details/51332758   上一節我們完成了DataGrid顯示jason資料，但是沒有和後臺聯絡在一起，只是單純地顯示了我們自己弄的json資

【SSH網上商城專案實戰11】查詢和刪除商品功能的實現

  轉自：https://blog.csdn.net/eson_15/article/details/51360804   在第8節我們完成了查詢和刪除商品類別的功能，那麼現在實現查詢和刪除商品的功能就很好做了，原理和第8節一模一樣，只是修改一些引數，比如請求不同的a

【SSH網上商城專案實戰10】商品類基本模組的搭建

      前面我們完成了與商品類別相關的業務邏輯，接下來我們開始做具體商品部分。 1. 資料庫建表並對映Model         首先我們在資料庫中新建一張表，然後使用逆

【SSH網上商城專案實戰17】購物車基本功能的實現

  轉自：https://blog.csdn.net/eson_15/article/details/51418350 上一節我們將商品的詳細頁面做完了，並使用了Hibernate的二級快取載入詳細頁面來提高系統的效能。這節我們開始做購物車部分。 1. 新增新的表

【SSH網上商城專案實戰16】Hibernate的二級快取處理首頁的熱門顯示

    轉自：https://blog.csdn.net/eson_15/article/details/51405911   網上商城首頁都有熱門商品，那麼這些商品的點選率是很高的，當用戶點選某個熱門商品後需要進入商品的詳細資訊頁面，就像淘寶裡面

【SSH網上商城專案實戰15】執行緒、定時器同步首頁資料（類似於部落格定期更新排名）

  轉自：https://blog.csdn.net/eson_15/article/details/51387378   上一節我們做完了首頁UI介面，但是有個問題：如果我在後臺添加了一個商品，那麼我必須重啟一下伺服器才能重新同步後臺資料，然後重新整理首頁才能同步資

【SSH網上商城專案實戰14】商城首頁UI的設計

  轉自：https://blog.csdn.net/eson_15/article/details/51373403 前面我們利用EasyUI和SSH搭建好了後臺的基本框架，做好了後臺的基本功能，包括對商品類別的管理和商品的管理等，這一節我們開始搭建前臺頁面。 做首頁的思

【SSH網上商城專案實戰13】Struts2實現檔案上傳功能

  轉自：https://blog.csdn.net/eson_15/article/details/51366384 上一節我們做完了新增和更新商品的功能，這兩個部分裡有涉及到商品圖片的上傳，並沒有詳細解說。為此，這篇文章詳細介紹一下Struts2實現檔案上傳的功能。 1

【SSH網上商城專案實戰12】新增和更新商品功能的實現

  新增商品部分原理和新增商品類別是一樣的，不過要比商品類別複雜，因為商品的屬性有很多，對應的資料庫中的欄位也就多了，新增商品還有個選項是上傳圖片，這一小塊內容會在下一篇部落格中單獨說明，因為這涉及到一個知識點，就是Struts2實現檔案上傳功能。其他廢話不多說了，現在開始完善新增

【SSH網上商城專案實戰18】過濾器實現購物登入功能的判斷

    轉自：https://blog.csdn.net/eson_15/article/details/51425010     上一節我們做完了購物車的基本操作，但是有個問題是：當用戶點選結算

【SSH網上商城專案實戰21】從Demo中看易寶支付的流程

      　　這一節我們先寫一個簡單點的Demo來測試易寶支付的流程，熟悉這個流程後，再做實際的開發，因為是一個Demo，所以我沒有考慮一些設計模

【SSH網上商城專案實戰23】完成線上支付功能

  　 轉自： https://blog.csdn.net/eson_15/article/details/51464415　 上一節我們做好了支付頁面的顯示，從上一節支付頁面顯示的jsp程式碼中可以看出，當用戶點選

【SSH網上商城專案實戰25】使用java email給使用者傳送郵件

    　　當用戶購買完商品後，我們應該向使用者傳送一封郵件，告訴他訂單已生成之類的資訊，郵箱地址是從使用者的基本資訊中獲取，好了，首先我們來看一下java中傳送郵件的方法。

【SSH網上商城專案實戰24】Struts2中如何處理多個Model請求

    1. 問題的提出 　　Struts2中如果實現了ModelDriven<model>介面

【SSH網上商城專案實戰26】完成訂單支付後的簡訊傳送功能

  　　上一節我們使用了Java mail完成了給買家傳送郵件的功能，還遺留一個功能，就是給買家傳送簡訊，告訴他訂單已經生成之類的。這一節主要介紹一下如何在使用者支付完成後自動給使用者傳送簡訊。

【SSH網上商城專案實戰30】專案總結（附原始碼下載地址）

0. 寫在前面 友情提示：文末有免費視訊資源贈送。 專案基本完成了，加上這個總結，與這個專案相關的部落格也寫了30篇了，積少成多，寫部落格的過程是固化思路的一個過程，對自己很有用，同時也能幫助別人。順便說個題外話，在學習的過程中肯定會遇到很多異常出現，我們要做