SSH框架網上商城項目第6戰之基於DataGrid的數據顯示。本站提示廣大學習愛好者：（SSH框架網上商城項目第6戰之基於DataGrid的數據顯示）文章只能為提供參考，不一定能成為您想要的結果。以下是SSH框架網上商城項目第6戰之基於DataGrid的數據顯示正文
EasyUI中DataGrid以表格情勢展現數據，並供給了豐碩的選擇、排序、分組和編纂數據的功效支撐。DataGrid的設計用於延長開辟時光，而且使開辟人員不須要具有特定的常識。它是輕量級的且功效豐碩。單位格歸並、多列題目、解凍列和頁腳只是個中的一小部門功效。
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文件裡的數據。以下：
{"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數據格局是："key1": value1, "key2":value2。每一個value外面又可所以數組，數組中保留新的Jason數據。
有了json文件，我們接上去便可以設計DataGrid控件了，全部DataGrid都是在query.jsp中設計的，由於要顯示的內容就是query.jsp中的內容。我們來看看query.jsp頁面：
<%@ 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({
//要求數據的url地址，前面會改成要求我們本身的url
url:'datagrid_data.json',
loadMsg:'Loading......',
queryParams:{type:''},//參數
//width:300,
fitColumns:true,//程度主動睜開，假如設置此屬性，則不會有程度轉動條，演示解凍列時，該參數不要設置
//顯示斑馬線
striped:true,
//當數據多的時刻不換行
nowrap:true,
singleSelect:true, //假如為真，只許可單行顯示，全顯功效掉效
//設置分頁
pagination:true,
rowStyler: function(index,row){
console.info("index" + index + "," + row)
if(index % 2 == 0) {
return 'background-color:#fff;';
} else {
return 'background-color:#ff0;';
}
},
//同列屬性，然則這些列將會解凍在左邊,年夜小不會轉變，當寬度年夜於250時，會顯示轉動條，然則解凍的列不在轉動條內
frozenColumns:[[
{field:'checkbox',checkbox:true},
{field:'code',title:'編號',width:200}
]],
//設置裝備擺設datagrid的列字段
//field：列字段的稱號，與json的key綁縛
//title：列題目，是顯示給人看的
columns:[[
{field:'productname',title:'種別稱號',width:100,
//用來格局化以後列的值，前往的是終究的數據
formatter: function(value,row,index){
return "<span title=" + value + ">" + value + "</span>";
}
},
{field:'price',title:'價錢',width:100,
styler: function(value,row,index){
//設置以後單位格的款式，前往的字符串直接交給 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去創立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屬性中，若何應用這兩個列屬性的：
{field:'productname',title:'種別稱號',width:100,
//用來格局化以後列的值，前往的是終究的數據
formatter: function(value,row,index){
return "<span title=" + value + ">" + value + "</span>";//設置為鼠標放上去顯示value值
}
},
{field:'price',title:'價錢',width:100,
styler: function(value,row,index){
//設置以後單位格的款式，前往的字符串直接交給 style屬性
//console.info("val:" + value + ",row:" + row + ",index:" + index)
if (value < 20){ //假如value值小於20
return 'color:red;'; //將value值顯示為白色
}
}
}
然後我們再看看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數據。
（注：到最初我會供給全部項目標源碼下載！迎接年夜家珍藏或分享）
原文地址：http://blog.csdn.net/eson_15/article/details/51322262
以上就是本文的全體內容，願望對年夜家的進修有所贊助，也願望年夜家多多支撐。
