版權聲明：尊重部落客原創文章，轉載請注明出處哦~http://blog.csdn.net/eson_15/article/details/51322262
easyui中datagrid以表格形式展示資料，并提供了豐富的選擇、排序、分組和編輯資料的功能支援。datagrid的設計用于縮短開發時間，并且使開發人員不需要具備特定的知識。它是輕量級的且功能豐富。單元格合并、多列标題、當機列和頁腳隻是其中的一小部分功能。
在第4節中，我們使用easyui搭建好了左側菜單欄，并且通過點選菜單選項在右邊彈出對應的頁籤。這節我們來使用datagrid把右邊的頁籤部分做好。先看一下第4節中最後的aindex.jsp檔案（也可參見第4節中的内容）：
datagrid顯示資料是json格式的，是以我們首先要把從背景擷取到的資料打包成jason格式，然後傳到前台來讓datagrid來顯示，這一節我們先不從背景擷取資料，先自己準備一個.json檔案，裡面有ison格式的資料，然後我們來讓datagird顯示，先把顯示功能做好，再請求背景資料。
我們先從easyui的參考文檔中看一下datagrid顯示的格式是什麼樣的，如下圖所示：
我們沿着參考文檔往下看，我們發現datagrid空間是通過<table>來建立的，有三種建立方式：
第一種：從現有的表格元素建立datagrid，在html中定義列、行和資料。
第二種：通過<table>标簽建立datagrid控件。在表格内使用<th>标簽定義列。
{"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-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>
我們可以看到，使用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的技術文檔，在這裡就不一一解說了。
好了，完成了query.jsp後，我們重新開機tomcat，然後進入到背景，點選左側菜單欄的類别管理，就會在右邊出現一個類别管理的頁籤，然後就會顯示我們指定的json資料，這個jason資料是我們自己放在webroot目錄下的，後面我們将會把json和struts整合，動态的擷取從背景傳過來的json資料。
（注：到最後我會提供整個項目的源碼下載下傳！歡迎大家收藏或關注）
_____________________________________________________________________________________________________________________________________________________
-----樂于分享，共同進步！