jqGrid學習筆記（一）

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

 

1、jqGrid特性：

• 基於jquery UI主題，開發者能夠根據客戶要求更換不一樣的主題。

• 兼容目前全部流行的web瀏覽器。

• Ajax分頁，能夠控制每頁顯示的記錄數。

• 支持XML，JSON，數組形式的數據源。

• 提供豐富的選項配置及方法事件接口。

• 支持表格排序，支持拖動列、隱藏列。

• 支持滾動加載數據。

• 支持實時編輯保存數據內容。

• 支持子表格及樹形表格。

• 支持多語言。

• 最關鍵目前是免費的。

2、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.一、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.二、body中的代碼

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

 

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

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