jqGrid(一)

轉自:http://www.cnblogs.com/huozhicheng/archive/2012/11/11/2765610.html

jqGrid 是一個用來顯示網格數據的jQuery插件，通過使用jqGrid可以輕鬆實現前端頁面與後臺數據的ajax異步通信。文檔比較全面，其官方網址爲：http://www.trirand.com。

 

一、jqGrid特性：

• 基於jquery UI主題，開發者可以根據客戶要求更換不同的主題。
• 兼容目前所有流行的web瀏覽器。
• Ajax分頁，可以控制每頁顯示的記錄數。
• 支持XML，JSON，數組形式的數據源。
• 提供豐富的選項配置及方法事件接口。
• 支持表格排序，支持拖動列、隱藏列。
• 支持滾動加載數據。
• 支持實時編輯保存數據內容。
• 支持子表格及樹形表格。
• 支持多語言。
• 最關鍵目前是免費的。

二、jqGrid使用方式：

1.下載文件

1. 下載jqGrid的軟件包，目前最新版本爲4.4.1 下載地址爲：http://www.trirand.com/blog/?page_id=6
2. 下載jQuery文件，目前最新版本爲1.8.2 下載地址爲：http://code.jquery.com/jquery-1.8.2.min.js
3. 下載jqGrid皮膚，下載地址爲：http://jqueryui.com/themeroller/ 我使用的是：ThemeRoller->gallery->cupertino樣式

2.準備文件

在項目的根目錄下，建立相應的文件夾，放入下載的文件，目錄結構如下圖：

3.頁面中得代碼

3.1、head中加入引用

• css文件引入：

<link type="text/css" rel="stylesheet" href="jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css">
<link type="text/css" rel="stylesheet" href="jqGrid/themes/ui.jqgrid.css">

 

• js文件引入：

<script type="text/javascript" src="jquery-1.8.2.min.js" />
<script type="text/javascript" src="jqGrid/js/jquery-ui-1.9.0.custom.min.js"/>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"/>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"/>

 

3.2、body中的代碼

<!-- jqGrid table list4 -->
<table id="list4"></table>
<!-- jqGrid 分頁 div gridPager -->
<div id="gridPager"></div>

 

其中，list4爲列表jqGrid，gridPager爲列表的分頁div

3.3、js中的代碼

$(document).ready(function(){
    $("#list4").jqGrid({
        url:contextPath + "search.action",
        datatype:"json", //數據來源，本地數據
        mtype:"POST",//提交方式
        height:420,//高度，表格高度。可爲數值、百分比或'auto'
        //width:1000,//這個寬度不能爲百分比
        autowidth:true,//自動寬
        colNames:['添加日期', '手機號碼', '銀行卡號','備註','操作'],
        colModel:[
            //{name:'id',index:'id', width:'10%', align:'center' },
            {name:'createDate',index:'createDate', width:'20%',align:'center'},
            {name:'phoneNo',index:'phoneNo', width:'15%',align:'center'},
            {name:'cardNo',index:'cardNo', width:'20%', align:"center"},
            {name:'remark',index:'remark', width:'35%', align:"left", sortable:false},
            {name:'del',index:'del', width:'10%',align:"center", sortable:false}
        ],
        rownumbers:true,//添加左側行號
        //altRows:true,//設置爲交替行表格,默認爲false
        //sortname:'createDate',
        //sortorder:'asc',
        viewrecords: true,//是否在瀏覽導航欄顯示記錄總數
        rowNum:15,//每頁顯示記錄數
        rowList:[15,20,25],//用於改變顯示行數的下拉列表框的元素數組。
        jsonReader:{
            id: "blackId",//設置返回參數中，表格ID的名字爲blackId
            repeatitems : false
        },
        pager:$('#gridPager')
    });
});

 

至此，整個使用jqGrid的前端使用就基本完畢了，當加載此頁面的時候，將初始化jqGrid表格，並通過url請求數據，返回datatype類型的數據。至於後臺的數據，大家可以自己調用，並返回json格式的數據即可填充表格。
具體的參數可以查詢jqGrid API。

詳情請看：http://www.huosen.net/archives/142.html