自己動手寫javaEE框架-為jqgrid換換皮膚然後加到我的框架裏

阿新 • • 發佈：2017-06-29

就會 cts 客戶換膚解析json 狀態 src demo 導航

軟件151 蘇垚

　今天讓我倒騰半天的居然不是寫我的javaEE框架，而是更換jqgrid的皮膚。我是相當的討厭jqgrid的默認皮膚，它總讓我想起一直想學而都沒學過的EXTJS，看多了那種淡藍色的皮膚太多了絕對視覺疲勞，所以這篇博文就從jqgrid換膚講起吧，這個過程在網絡上找到的資料比較少，因此我今天的博文還是很有實用價值的。不廢話了，下面開始吧！

　　首先我們在瀏覽器地址欄裏填入地址：http://www.trirand.com/blog/?page_id=6，這是jqgrid的下載界面，如下圖：

技術分享

　　點擊Demo files鏈接，下載最新的jqgrid_demo40.zip壓縮包，解壓後我把示例程序放到Apache Server的htdocs目錄下，啟動apache web服務器。

　然後我在瀏覽器地址欄裏填入地址：http://localhost/jqgrid_demo40/jqgrid.html，界面如下：

技術分享

　　這就是我所說的惡心皮膚了，我現在更換jqgrid的皮膚，這裏使用到的是jquery的UI程序，我們在瀏覽器填入地址http://jqueryui.com/themeroller，我們在這裏選擇我們喜歡的皮膚，我比較喜歡baidu和google那種簡潔的頁面風格，所以我首先的UI是Smoothness和Overcast兩種，Smoothness以前我使用過，今天我選擇Overcast（顏色有點暗，但是和我博客的皮膚還是有點相配的），效果如下圖：

技術分享

　　下載的UI壓縮包的名稱是jquery-ui-1.8.16.custom.zip ，解壓後我們在jquery-ui-1.8.16.custom\development-bundle\themes路徑下找到overcast包，將這個包復制一下，拷貝到jqgrid_demo40\themes路徑下。

　　下面我們修改jqgrid_demo40示例代碼裏導航頁面的代碼，這裏要特別提醒下，我們從網站上下載的jqgrid demo代碼中的jqgrid.html頁面裏面有一個javascript腳本引入文件：

<script src="js/jquery.js" type="text/javascript"></script>

　　而實際上js包下面沒有jquery.js文件，裏面只有jquery.min.js文件，我們將這段代碼修改成：

<script src="js/jquery.min.js" type="text/javascript"></script>

　　那麽apache web服務器下的示例代碼就會正確顯示了。

　　下面我們導入新的皮膚，很簡單，只要將下面代碼替換進去就可以了（上面是原代碼，下面是新添代碼，原代碼要被註釋掉）：

<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頁面，這個將是我的工程裏的主頁面，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>主頁面</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",//數據類型
        height: 250,//高度
           colNames:[‘編號‘,‘日期‘, ‘客戶‘, ‘數量‘,‘稅金‘,‘總金額‘,‘備註‘],//列名
           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測試"//列表標題
    });
    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，頁面顯示如下：

技術分享

　　呵呵，效果不錯啊！

　下面我將從服務端取數據，然後用main.jsp頁面展示出來。修改後的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>主頁面</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",//數據類型   服務端返回的值是json類型
        height: 250,//高度
           colNames:[‘編號‘,‘名稱‘, ‘描述‘, ‘創建時間‘,‘修改時間‘,‘狀態‘],//列名
           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‘,//分頁
           multiselect: true,//支持多項選擇
           sortname: ‘id‘,//排序字段
           sortorder: "desc",//排序方式
           caption: "jqgrid測試"//列表標題
    });
    jQuery("#dataGrid").jqGrid(‘navGrid‘,‘#pager‘,{edit:false,add:false,del:false});

});
</script>

　　我們還要修改下ProductAction.java類下的queryProductList方法，代碼如下：

    public String queryProductList() throws Exception
    {
        Map<String, Object> map = new HashMap<String, Object>();
        
//        map.put("name", namequery);
//        JSONObject jsonObject = new JSONObject(jsonQuery);//把查詢參數轉化為json對象
//        map.put("name", jsonObject.get("namequery"));
        
        results = this.productService.queryProductList(map);
        
        flag = "success";
        msg = "查詢操作成功！";
        welcome = "你的查詢操作已經完成！";
        
        return SUCCESS;
    }

　　將我昨天寫的json解析代碼註釋掉，否則會報錯。

　　我們在瀏覽器地址欄裏填入地址：http://localhost:8080/ssiprj/main.jsp，頁面顯示如下圖：

技術分享

　　數據正確顯示了，我想有些童鞋對jqgrid的用法不太熟悉吧，接下來我將jqgrid的基本屬性做做簡單介紹，由於時間有限，想深入了解jqgrid的用法，可以查查baidu。

屬性	說明
url	jqGrid控件通過這個參數得到需要顯示的數據，具體的返回值可以使XML也可以是Json。
	這個參數用於設定將要得到的數據類型。我最常用的是“json”，其余的類型還包括：xml、xmlstring、local、javascript、 function。
mtype	定義使用哪種方法發起請求，GET或者POST
height	Grid的高度，可以接受數字、%值、auto，默認值為150。
width	Grid的寬度，如果未設置，則寬度應為所有列寬的之和；如果設置了寬度，則每列的寬度將會根據shrinkToFit選項的設置，進行設置。
shrinkToFit	此選項用於根據width計算每列寬度的算法。默認值為true。如果shrinkToFit為true且設置了width值，則每列寬度會根據 width成比例縮放；如果shrinkToFit為false且設置了width值，則每列的寬度不會成比例縮放，而是保持原有設置，而Grid將會有水平滾動條。
autowidth	默認值為false。如果設為true，則Grid的寬度會根據父容器的寬度自動重算。重算僅發生在Grid初始化的階段；如果當父容器尺寸變化了，同時也需要變化Grid的尺寸的話，則需要在自己的代碼中調用setGridWidth方法來完成。
pager	定義頁碼控制條Page Bar
sortname	指定默認的排序列，可以是列名也可以是數字。此參數會在被傳遞到Server端。
viewrecords	設置是否在Pager Bar顯示所有記錄的總數。
caption	設置Grid表格的標題，如果未設置，則標題區域不顯示。
caption	Grid的標題。如果設置了，則將顯示在Grid的Header層。
rowNum	用於設置Grid中一次顯示的行數，默認值為20。正是這個選項將參數rows（prmNames中設置的）通過url選項設置的鏈接傳遞到 Server。註意如果Server返回的數據行數超過了rowNum的設定，則Grid也只顯示rowNum設定的行數。
rowList	一個數組，用於設置Grid可以接受的rowNum值。例如[10,20,30]。
colNames	字符串數組，用於指定各列的題頭文本，與列的順序是對應的。
colModel	最重要的數組之一，用於設定各列的參數。（稍後詳述）
prmNames	這是一個數組，用於設置jqGrid將要向Server傳遞的參數名稱。（稍後詳述）
jsonReader	這又是一個數組，用來設定如何解析從Server端發回來的json數據。（稍後詳述）

　　prmNames是jqGrid的一個重要選項，用於設置jqGrid將要向Server傳遞的參數名稱。其默認值為：

prmNames : {  
    page:"page",    // 表示請求頁碼的參數名稱  
    rows:"rows",    // 表示請求行數的參數名稱  
    sort: "sidx", // 表示用於排序的列名的參數名稱  
    order: "sord", // 表示采用的排序方式的參數名稱  
    search:"_search", // 表示是否是搜索請求的參數名稱  
    nd:"nd", // 表示已經發送請求的次數的參數名稱  
    id:"id", // 表示當在編輯數據模塊中發送數據時，使用的id的名稱  
    oper:"oper",    // operation參數名稱（我暫時還沒用到）  
    editoper:"edit", // 當在edit模式中提交數據時，操作的名稱  
    addoper:"add", // 當在add模式中提交數據時，操作的名稱  
    deloper:"del", // 當在delete模式中提交數據時，操作的名稱  
    subgridid:"id", // 當點擊以載入數據到子表時，傳遞的數據名稱  
    npage: null,   
    totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱，參見jqGrid選項中的rowTotal  
}

　　jsonReader是jqGrid的一個重要選項，用於設置如何解析從Server端發回來的json數據。其默認值為：

jsonReader : {  
    root: "rows",   // json中代表實際模型數據的入口   
    page: "page",   // json中代表當前頁碼的數據   
    total: "total", // json中代表頁碼總數的數據   
    records: "records", // json中代表數據行總數的數據   
    repeatitems: true, // 如果設為false，則jqGrid在解析json時，會根據name來搜索對應的數據元素（即可以json中元素可以不按順序）；而所使用的name是來自於colModel中的name設定。   
    cell: "cell",  
    id: "id",  
    userdata: "userdata",  
    subgrid: {  
        root:"rows",   
        repeatitems: true,   
        cell:"cell"  
    }  
}

　　colModel的重要選項

name ：為Grid中的每個列設置唯一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。 
index ：設置排序時所使用的索引名稱，這個index名稱會作為sidx參數（prmNames中設置的）傳遞到Server。 
label ：當jqGrid的colNames選項數組為空時，為各列指定題頭。如果colNames和此項都為空時，則name選項值會成為題頭。 
width ：設置列的寬度，目前只能接受以px為單位的數值，默認為150。 
sortable ：設置該列是否可以排序，默認為true。 
search ：設置該列是否可以被列為搜索條件，默認為true。 
resizable ：設置列是否可以變更尺寸，默認為true。 
hidden ：設置此列初始化時是否為隱藏狀態，默認為false。 
formatter ：預設類型或用來格式化該列的自定義函數名。常用預設格式有：integer、date、currency、number等

　　好了，今天內容寫完了，框架越來越完善了，我想下一步為main.jsp加一個導航，然後做繪制圖表的操作，這個裏面我將使用velocity模板語言。今天有博友問我深入分析javascript裏對象構建的下篇合適出來，我下一篇博文將這塊內容補全。

自己動手寫javaEE框架-為jqgrid換換皮膚然後加到我的框架裏

就會 cts 客戶換膚解析json 狀態 src demo 導航軟件151 蘇垚　今天讓我倒騰半天的居然不是寫我的javaEE框架，而是更換jqgrid的皮膚。我是相當的討厭jqgrid的默認皮膚，它總讓我想起一直想學而都沒學過的EXTJS，看多了那種淡藍色

自己動手寫javaEE框架-為jqgrid換換皮膚然後加到我的框架裏

自己動手寫javaEE框架-為jqgrid換換皮膚然後加到我的框架裏

自己動手寫PHP-MVC框架(一)

自己動手寫Android外掛化框架，讓老闆對你刮目相看

自己動手寫ORM框架(二)-AdoHelper支援多資料庫操作的封裝(1)

自己動手寫ORM框架(四):關係對映配置—Id屬性

自己動手寫一個輕量級的Android網路請求框架

自己動手寫一個簡單的MVC框架（第一版）

自己動手寫一個簡單的MVC框架（第二版）

理解Java 動態代理和AOP（可以自己動手寫AOP框架！）

《自己動手寫框架3》：業務流程引擎設計

自己動手寫web框架----1

PHP MVC框架基礎小白（自己動手寫一個PHP框架示例）

自己動手寫網路框架

自己動手寫Spring框架--IOC、MVC

自己動手寫一個持久層框架

自己動手寫一個自動登錄腳本gg

自己動手寫CPU之第九階段（2）——載入存儲指令說明2（lwl、lwr）

自己動手寫Java String類

自己動手寫一個單鏈表

【原創】自己動手寫一個服務網關

自己動手寫javaEE框架-為jqgrid換換皮膚然後加到我的框架裏

相關推薦