今天讓我倒騰半天的居然不是寫(xiě)我的javaEE框架，而是更換jqgrid的皮膚。我是相當的討厭jqgrid的默認皮膚，它總讓我想起一直想學(xué)而都沒(méi)學(xué)過(guò)的EXTJS，看多了那種淡藍色的皮膚太多了絕對視覺(jué)疲勞，所以這篇博文就從jqgrid換膚講起吧，這個(gè)過(guò)程在網(wǎng)絡(luò )上找到的資料比較少，因此我今天的博文還是很有實(shí)用價(jià)值的。不廢話(huà)了，下面開(kāi)始吧！
首先我們在瀏覽器地址欄里填入地址：
http://www.trirand.com/blog/?page_id=6，這是jqgrid的下載界面，如下圖：
點(diǎn)擊Demo files鏈接，下載最新的jqgrid_demo40.zip壓縮包，解壓后我把示例程序放到Apache Server的htdocs目錄下，啟動(dòng)apache web服務(wù)器。
然后我在瀏覽器地址欄里填入地址：
http://localhost/jqgrid_demo40/jqgrid.html，界面如下：
這就是我所說(shuō)的惡心皮膚了，我現在更換jqgrid的皮膚，這里使用到的是jquery的UI程序，我們在瀏覽器填入地址
http://jqueryui.com/themeroller，我們在這里選擇我們喜歡的皮膚，我比較喜歡baidu和google那種簡(jiǎn)潔的頁(yè)面風(fēng)格，所以我首先的UI是Smoothness和Overcast兩種，Smoothness以前我使用過(guò)，今天我選擇Overcast（顏色有點(diǎn)暗，但是和我博客的皮膚還是有點(diǎn)相配的），效果如下圖：
下載的UI壓縮包的名稱(chēng)是jquery-ui-1.8.16.custom.zip ，解壓后我們在jquery-ui-1.8.16.custom\development-bundle\themes路徑下找到overcast包，將這個(gè)包復制一下，拷貝到j(luò )qgrid_demo40\themes路徑下。
下面我們修改jqgrid_demo40示例代碼里導航頁(yè)面的代碼，這里要特別提醒下，我們從網(wǎng)站上下載的jqgrid demo代碼中的jqgrid.html頁(yè)面里面有一個(gè)javascript腳本引入文件：
<script src="js/jquery.js" type="text/javascript"></script>
而實(shí)際上js包下面沒(méi)有jquery.js文件，里面只有jquery.min.js文件，我們將這段代碼修改成：
<script src="js/jquery.min.js" type="text/javascript"></script>
那么apache web服務(wù)器下的示例代碼就會(huì )正確顯示了。
下面我們導入新的皮膚，很簡(jiǎn)單，只要將下面代碼替換進(jìn)去就可以了（上面是原代碼，下面是新添代碼，原代碼要被注釋掉）：
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
-----------------------------------------------------------------------------
<link rel="stylesheet" type="text/css" media="screen" href="themes/overcast/jquery-ui-1.8.16.custom.css" />
<!--<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />-->
我們再在瀏覽器地址欄里填入地址：
http://localhost/jqgrid_demo40/jqgrid.html，界面如下：
哈哈，終于換成我喜歡的皮膚了~~~。
我將在我的javaEE框架里加入jqgrid組件。我將jqgrid demo程序里的js包和themes包下的文件導入到工程里，如下圖：
在WebContent包下建立main.jsp頁(yè)面，這個(gè)將是我的工程里的主頁(yè)面，main.jsp代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主頁(yè)面</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/overcast/jquery-ui-1.8.16.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
</head>
<body>
<table id="dataGrid"></table>
</body>
</html>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#dataGrid").jqGrid({
datatype: "local",//數據類(lèi)型
height: 250,//高度
colNames:['編號','日期', '客戶(hù)', '數量','稅金','總金額','備注'],//列名
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,//支持多項選擇
caption: "jqgrid測試"http://列表標題
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];//測試數據
for(var i=0;i<=mydata.length;i++)
jQuery("#dataGrid").jqGrid('addRowData',i+1,mydata[i]);
});
</script>
我們在瀏覽器地址欄里填入地址：
http://localhost:8080/ssiprj/main.jsp，頁(yè)面顯示如下：
呵呵，效果不錯??！
下面我將從服務(wù)端取數據，然后用main.jsp頁(yè)面展示出來(lái)。修改后的main.jsp文件代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主頁(yè)面</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/overcast/jquery-ui-1.8.16.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
</head>
<body>
<br/>
<br/>
<table id="dataGrid"></table>
<div id="pager"></div>
</body>
</html>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#dataGrid").jqGrid({
url:'queryProductList.action',
datatype: "json",//數據類(lèi)型 服務(wù)端返回的值是json類(lèi)型
height: 250,//高度
colNames:['編號','名稱(chēng)', '描述', '創(chuàng )建時(shí)間','修改時(shí)間','狀態(tài)'],//列名
colModel:[
{name:'id',index:'id',align:'right',width:60, sorttype:"int"},
{name:'name',index:'name', width:120},
{name:'desc',index:'desc', width:130},
{name:'create_date',index:'create_date', width:150,sorttype:"date"},
{name:'modify_date',index:'modify_date', width:150,sorttype:"date"},
{name:'status',index:'status', width:80,sorttype:"int"}
],
rowNum:10,//默認顯示行數
rowList:[10,20,50],
jsonReader:{
root:'results',
repeatitems: false
},
pager: '#pager',//分頁(yè)
multiselect: true,//支持多項選擇
sortname: 'id',//排序字段
sortorder: "desc",//排序方式
caption: "jqgrid測試"http://列表標題
});
jQuery("#dataGrid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
});
</script>
我們還要修改下ProductAction.java類(lèi)下的queryProductList方法，代碼如下：
public String queryProductList() throws Exception
{
Map<String, Object> map = new HashMap<String, Object>();
// map.put("name", namequery);
// JSONObject jsonObject = new JSONObject(jsonQuery);//把查詢(xún)參數轉化為json對象
// map.put("name", jsonObject.get("namequery"));
results = this.productService.queryProductList(map);
flag = "success";
msg = "查詢(xún)操作成功！";
welcome = "你的查詢(xún)操作已經(jīng)完成！";
return SUCCESS;
}
將我昨天寫(xiě)的json解析代碼注釋掉，否則會(huì )報錯。
我們在瀏覽器地址欄里填入地址：
http://localhost:8080/ssiprj/main.jsp，頁(yè)面顯示如下圖：
數據正確顯示了，我想有些童鞋對jqgrid的用法不太熟悉吧，接下來(lái)我將jqgrid的基本屬性做做簡(jiǎn)單介紹，由于時(shí)間有限，想深入了解jqgrid的用法，可以查查baidu。
屬性說(shuō)明
url
jqGrid控件通過(guò)這個(gè)參數得到需要顯示的數據，具體的返回值可以使XML也可以是Json。
這個(gè)參數用于設定將要得到的數據類(lèi)型。我最常用的是“json”，其余的類(lèi)型還包括：xml、xmlstring、local、javascript、 function。
mtype
定義使用哪種方法發(fā)起請求，GET或者POST
height
Grid的高度，可以接受數字、%值、auto，默認值為150。
width
Grid的寬度，如果未設置，則寬度應為所有列寬的之和；如果設置了寬度，則每列的寬度將會(huì )根據shrinkToFit選項的設置，進(jìn)行設置。
shrinkToFit
此選項用于根據width計算每列寬度的算法。默認值為true。如果shrinkToFit為true且設置了width值，則每列寬度會(huì )根據 width成比例縮放；如果shrinkToFit為false且設置了width值，則每列的寬度不會(huì )成比例縮放，而是保持原有設置，而Grid將會(huì )有 水平滾動(dòng)條。
autowidth
默認值為false。如果設為true，則Grid的寬度會(huì )根據父容器的寬度自動(dòng)重算。重算僅發(fā)生在Grid初始化的階段；如果當父容器尺寸變化了，同 時(shí)也需要變化Grid的尺寸的話(huà)，則需要在自己的代碼中調用setGridWidth方法來(lái)完成。
pager
定義頁(yè)碼控制條Page Bar
sortname
指定默認的排序列，可以是列名也可以是數字。此參數會(huì )在被傳遞到Server端。
viewrecords
設置是否在Pager Bar顯示所有記錄的總數。
caption
設置Grid表格的標題，如果未設置，則標題區域不顯示。
caption
Grid的標題。如果設置了，則將顯示在Grid的Header層。
rowNum
用于設置Grid中一次顯示的行數，默認值為20。正是這個(gè)選項將參數rows（prmNames中設置的）通過(guò)url選項設置的鏈接傳遞到 Server。注意如果Server返回的數據行數超過(guò)了rowNum的設定，則Grid也只顯示rowNum設定的行數。
rowList
一個(gè)數組，用于設置Grid可以接受的rowNum值。例如[10,20,30]。
colNames
字符串數組，用于指定各列的題頭文本，與列的順序是對應的。
colModel
最重要的數組之一，用于設定各列的參數。（稍后詳述）
prmNames
這是一個(gè)數組，用于設置jqGrid將要向Server傳遞的參數名稱(chēng)。（稍后詳述）
jsonReader
這又是一個(gè)數組，用來(lái)設定如何解析從Server端發(fā)回來(lái)的json數據。（稍后詳述）
prmNames是jqGrid的一個(gè)重要選項，用于設置jqGrid將要向Server傳遞的參數名稱(chēng)。其默認值為：
prmNames : {
page:"page", // 表示請求頁(yè)碼的參數名稱(chēng)
rows:"rows", // 表示請求行數的參數名稱(chēng)
sort: "sidx", // 表示用于排序的列名的參數名稱(chēng)
order: "sord", // 表示采用的排序方式的參數名稱(chēng)
search:"_search", // 表示是否是搜索請求的參數名稱(chēng)
nd:"nd", // 表示已經(jīng)發(fā)送請求的次數的參數名稱(chēng)
id:"id", // 表示當在編輯數據模塊中發(fā)送數據時(shí)，使用的id的名稱(chēng)
oper:"oper", // operation參數名稱(chēng)（我暫時(shí)還沒(méi)用到）
editoper:"edit", // 當在edit模式中提交數據時(shí)，操作的名稱(chēng)
addoper:"add", // 當在add模式中提交數據時(shí)，操作的名稱(chēng)
deloper:"del", // 當在delete模式中提交數據時(shí)，操作的名稱(chēng)
subgridid:"id", // 當點(diǎn)擊以載入數據到子表時(shí)，傳遞的數據名稱(chēng)
npage: null,
totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱(chēng)，參見(jiàn)jqGrid選項中的rowTotal
}
jsonReader是jqGrid的一個(gè)重要選項，用于設置如何解析從Server端發(fā)回來(lái)的json數據。其默認值為：
jsonReader : {
root: "rows", // json中代表實(shí)際模型數據的入口
page: "page", // json中代表當前頁(yè)碼的數據
total: "total", // json中代表頁(yè)碼總數的數據
records: "records", // json中代表數據行總數的數據
repeatitems: true, // 如果設為false，則jqGrid在解析json時(shí)，會(huì )根據name來(lái)搜索對應的數據元素（即可以json中元素可以不按順序）；而所使用的name是來(lái)自于colModel中的name設定。
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {
root:"rows",
repeatitems: true,
cell:"cell"
}
}
colModel的重要選項
name ：為Grid中的每個(gè)列設置唯一的名稱(chēng)，這是一個(gè)必需選項，其中保留字包括subgrid、cb、rn。
index ：設置排序時(shí)所使用的索引名稱(chēng)，這個(gè)index名稱(chēng)會(huì )作為sidx參數（prmNames中設置的）傳遞到Server。
label ：當jqGrid的colNames選項數組為空時(shí)，為各列指定題頭。如果colNames和此項都為空時(shí)，則name選項值會(huì )成為題頭。
width ：設置列的寬度，目前只能接受以px為單位的數值，默認為150。
sortable ：設置該列是否可以排序，默認為true。
search ：設置該列是否可以被列為搜索條件，默認為true。
resizable ：設置列是否可以變更尺寸，默認為true。
hidden ：設置此列初始化時(shí)是否為隱藏狀態(tài)，默認為false。
formatter ：預設類(lèi)型或用來(lái)格式化該列的自定義函數名。常用預設格式有：integer、date、currency、number等
好了，今天內容寫(xiě)完了，框架越來(lái)越完善了，我想下一步為main.jsp加一個(gè)導航，然后做繪制圖表的操作，這個(gè)里面我將使用velocity模板語(yǔ)言。今天有博友問(wèn)我深入分析javascript里對象構建的下篇合適出來(lái)，我下一篇博文將這塊內容補全。
