SSH框架網(wǎng)上商城項(xiàng)目第6戰(zhàn)之基于DataGrid的數(shù)據(jù)顯示

更新時(shí)間：2016年05月27日 09:38:28 作者：eson_15

SSH框架網(wǎng)上商城項(xiàng)目第6戰(zhàn)之基于DataGrid的數(shù)據(jù)顯示,提供了豐富的選擇、排序、分組和編輯數(shù)據(jù)的功能支持,感興趣的小伙伴們可以參考一下

EasyUI中DataGrid以表格形式展示數(shù)據(jù)，并提供了豐富的選擇、排序、分組和編輯數(shù)據(jù)的功能支持。DataGrid的設(shè)計(jì)用于縮短開(kāi)發(fā)時(shí)間，并且使開(kāi)發(fā)人員不需要具備特定的知識(shí)。它是輕量級(jí)的且功能豐富。單元格合并、多列標(biāo)題、凍結(jié)列和頁(yè)腳只是其中的一小部分功能。

1. 回顧一下第4節(jié)內(nèi)容

在第4節(jié)中，我們使用EasyUI搭建好了左側(cè)菜單欄，并且通過(guò)點(diǎn)擊菜單選項(xiàng)在右邊彈出對(duì)應(yīng)的選項(xiàng)卡。這節(jié)我們來(lái)使用DataGrid把右邊的選項(xiàng)卡部分做好。先看一下第4節(jié)中最后的aindex.jsp文件（也可參見(jiàn)第4節(jié)中的內(nèi)容）：

2. 創(chuàng)建DataGrid控件的幾種方式

DataGrid顯示數(shù)據(jù)是json格式的，所以我們首先要把從后臺(tái)獲取到的數(shù)據(jù)打包成Jason格式，然后傳到前臺(tái)來(lái)讓DataGrid來(lái)顯示，這一節(jié)我們先不從后臺(tái)獲取數(shù)據(jù)，先自己準(zhǔn)備一個(gè).json文件，里面有ison格式的數(shù)據(jù)，然后我們來(lái)讓DataGird顯示，先把顯示功能做好，再請(qǐng)求后臺(tái)數(shù)據(jù)。

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

我們沿著參考文檔往下看，我們發(fā)現(xiàn)DataGrid空間是通過(guò)<table>來(lái)創(chuàng)建的，有三種創(chuàng)建方式：

第一種：從現(xiàn)有的表格元素創(chuàng)建DataGrid，在HTML中定義列、行和數(shù)據(jù)。

第二種：通過(guò)<table>標(biāo)簽創(chuàng)建DataGrid控件。在表格內(nèi)使用<th>標(biāo)簽定義列。

第三種：使用Javascript去創(chuàng)建DataGrid控件。

我們采取第三種，用js去創(chuàng)建DataGrid控件，首先我們得先準(zhǔn)備一個(gè)存儲(chǔ)了json格式數(shù)據(jù)的文件，在WebRoot/jquery-easyui-1.3.5/demo/datagrid/下面有幾個(gè)json文件，我們選擇一個(gè)datagrid_data1.json，拷貝到WebRoot目錄下，修改一下參數(shù)，等會(huì)我們要來(lái)顯示這個(gè)json文件里的數(shù)據(jù)。如下：

{"total":10,"rows":[ 
 {"code":"FI-SW-01","productname":"Koi","price":10.00}, 
 {"code":"K9-DL-01","productname":"Dalmation","price":12.00}, 
 {"code":"RP-SN-01","productname":"Rattlesnake","price":12.00}, 
 {"code":"RP-LI-02","productname":"Iguana","price":12.00}, 
 {"code":"FL-DSH-01","productname":"Manx","price":12.00}, 
 {"code":"FL-DSH-01","productname":"Manx","price":12.00}, 
 {"code":"FL-DLH-02","productname":"Persian","price":12.00}, 
 {"code":"FL-DLH-02","productname":"Persian","price":12.00}, 
 {"code":"AV-CB-01","productname":"Amazon Parrot","price":92.00}, 
 {"code":"AV-CB-03","productname":"Amazon Parrot","price":92.00} 
]}

我們可以看到，json數(shù)據(jù)格式是："key1": value1, "key2":value2。每個(gè)value里面又可以是數(shù)組，數(shù)組中保存新的Jason數(shù)據(jù)。
有了json文件，我們接下來(lái)就可以設(shè)計(jì)DataGrid控件了，整個(gè)DataGrid都是在query.jsp中設(shè)計(jì)的，因?yàn)橐@示的內(nèi)容就是query.jsp中的內(nèi)容。我們來(lái)看看query.jsp頁(yè)面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
 <%@ include file="/public/head.jspf" %> 
 <script type="text/javascript"> 
 $(function(){ 
  $('#dg').datagrid({ 
  //請(qǐng)求數(shù)據(jù)的url地址，后面會(huì)改成請(qǐng)求我們自己的url 
  url:'datagrid_data.json', 
  loadMsg:'Loading......', 
  queryParams:{type:''},//參數(shù) 
  //width:300, 
  fitColumns:true,//水平自動(dòng)展開(kāi)，如果設(shè)置此屬性，則不會(huì)有水平滾動(dòng)條，演示凍結(jié)列時(shí)，該參數(shù)不要設(shè)置 
  //顯示斑馬線 
  striped:true, 
  //當(dāng)數(shù)據(jù)多的時(shí)候不換行 
  nowrap:true, 
  singleSelect:true, //如果為真，只允許單行顯示，全顯功能失效 
  //設(shè)置分頁(yè) 
  pagination:true, 
  rowStyler: function(index,row){ 
   console.info("index" + index + "," + row) 
   if(index % 2 == 0) { 
   return 'background-color:#fff;'; 
   } else { 
   return 'background-color:#ff0;'; 
   } 
   
  }, 
  //同列屬性，但是這些列將會(huì)凍結(jié)在左側(cè),大小不會(huì)改變，當(dāng)寬度大于250時(shí)，會(huì)顯示滾動(dòng)條，但是凍結(jié)的列不在滾動(dòng)條內(nèi) 
  frozenColumns:[[ 
   {field:'checkbox',checkbox:true}, 
   {field:'code',title:'編號(hào)',width:200}   
  ]], 
  //配置datagrid的列字段 
  //field：列字段的名稱，與json的key捆綁 
  //title：列標(biāo)題，是顯示給人看的 
  columns:[[   
   {field:'productname',title:'類別名稱',width:100, 
   //用來(lái)格式化當(dāng)前列的值，返回的是最終的數(shù)據(jù) 
   formatter: function(value,row,index){ 
   return "<span title=" +　value + ">" + value + "</span>"; 
   } 
  }, 
   {field:'price',title:'價(jià)格',width:100, 
   styler: function(value,row,index){ 
   //設(shè)置當(dāng)前單元格的樣式，返回的字符串直接交給 style屬性 
   //console.info("val:" + value + ",row:" + row + ",index:" + index) 
   if (value < 20){ 
    return 'color:red;'; 
   } 
   } 
   } 
  ]] 
  }); 
 }); 
 </script> 
 </head> 
 
 <body> 
 <table id="dg"></table> 
 </body> 
</html>

3. DataGrid控件的屬性

我們可以看到，使用js去創(chuàng)建DataGrid控件的話，只要一個(gè)<table>標(biāo)簽即可，主要都是在js中完成。DataGrid的控件很強(qiáng)大，這里我們主要做一下基本的顯示，更多其他的功能可以參照EasyUI的開(kāi)發(fā)文檔。我們現(xiàn)在針對(duì)上面的query.jsp文件做一下分析：

首先DataGrid控件有兩種屬性：一個(gè)是DataGrid屬性，還有一個(gè)是列屬性。顧名思義，DataGrid屬性是給整個(gè)DataGrid控件添加的屬性，而列屬性是針對(duì)某一列的。每中屬性有很多，這里只做了一些基本的常用的屬性。

DataGrid屬性里最重要的是columns屬性，它是一個(gè)數(shù)組，可以創(chuàng)建多列，見(jiàn)下面的截圖：

我們來(lái)看下columns屬性中有哪些細(xì)節(jié)：

列屬性中，field表示字段名稱，對(duì)應(yīng)與json數(shù)據(jù)的key，然后title是要顯示給用戶看的標(biāo)題，見(jiàn)query.jsp文件中，還有其他一些基本屬性可以參照EasyUI文檔。列屬性中比較重要的也比較常用的兩個(gè)屬性是formatter和styler，分別是用來(lái)格式化當(dāng)前列的值和設(shè)置單元格樣式的，我們主要來(lái)看一下這兩個(gè)屬性：

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

{field:'productname',title:'類別名稱',width:100, 
 //用來(lái)格式化當(dāng)前列的值，返回的是最終的數(shù)據(jù) 
 formatter: function(value,row,index){ 
  return "<span title=" +　value + ">" + value + "</span>";//設(shè)置為鼠標(biāo)放上去顯示value值 
 } 
},  
{field:'price',title:'價(jià)格',width:100, 
 styler: function(value,row,index){ 
  //設(shè)置當(dāng)前單元格的樣式，返回的字符串直接交給 style屬性 
   //console.info("val:" + value + ",row:" + row + ",index:" + index) 
  if (value < 20){ //如果value值小于20 
   return 'color:red;'; //將value值顯示為紅色 
  } 
 }  
}

然后我們?cè)倏纯碊ataGrid控件的一些屬性：

url表示要顯示的數(shù)據(jù)來(lái)源，這里設(shè)置成datagrid_data.json表示數(shù)據(jù)來(lái)源是這個(gè)json文件，放在WebRoot目錄下了；

loadMsg表示加載數(shù)據(jù)過(guò)程中顯示的信息；

queryParams表示傳給后臺(tái)的參數(shù)，在這里用不到，因?yàn)槲覀兡壳斑€沒(méi)有和后臺(tái)關(guān)聯(lián)上，只是顯示一個(gè)json文件，后面會(huì)用到；

fitColums設(shè)置為true后表示水平自動(dòng)展開(kāi)，自適應(yīng)網(wǎng)格的寬度，如此設(shè)置，水平方向就不會(huì)有滾動(dòng)條了，也不用設(shè)置寬度了；

width是寬度，如果數(shù)據(jù)過(guò)長(zhǎng)顯示不下，水平方向就會(huì)出現(xiàn)滾動(dòng)條；

striped設(shè)置為true后表示顯示斑馬線，這是一個(gè)顯示樣式，試一下便知；

nowrap設(shè)置為true后表示當(dāng)數(shù)據(jù)多的時(shí)候不換行，否則某一行數(shù)據(jù)多的時(shí)候會(huì)換行，會(huì)比較難看；

pagination設(shè)置為true后表示開(kāi)啟分頁(yè)功能；

singleSelect設(shè)置為true時(shí)，只允許勾選單行，全選功能失效，主要用于最前面一列的復(fù)選框；

frozenColums是為了設(shè)置凍結(jié)列，在frozenColums中設(shè)置的列，不會(huì)改變大小。里面如果設(shè)置了{(lán)field:'checkbox',checkbox:true},表示這是個(gè)復(fù)選框列，給用戶勾選用的，如果設(shè)置了上面的singleSelect，那么只能選擇一項(xiàng)，不能全選；

rowStyler是設(shè)置所有行的樣式的，兩個(gè)參數(shù)為行索引和行，上面設(shè)置的是偶數(shù)行是白色，奇數(shù)行是黃色。

等等……還有其他DataGrid控件的屬性，可以參考EasyUI的技術(shù)文檔，在這里就不一一解說(shuō)了。

4. DataGrid數(shù)據(jù)顯示的效果

好了，完成了query.jsp后，我們重啟tomcat，然后進(jìn)入到后臺(tái)，點(diǎn)擊左側(cè)菜單欄的類別管理，就會(huì)在右邊出現(xiàn)一個(gè)類別管理的選項(xiàng)卡，然后就會(huì)顯示我們指定的json數(shù)據(jù)，這個(gè)Jason數(shù)據(jù)是我們自己放在WebRoot目錄下的，后面我們將會(huì)把json和struts整合，動(dòng)態(tài)的獲取從后臺(tái)傳過(guò)來(lái)的json數(shù)據(jù)。