jqGrid 是一個用來顯示網格數據的jQuery插件,通過使用jqGrid可以輕鬆實現前端頁面與後臺數據的ajax異步通信。文檔比較全面,其官方網址爲:http://www.trirand.com。
一、jqGrid特性:
- 基於jquery UI主題,開發者可以根據客戶要求更換不同的主題。
- 兼容目前所有流行的web瀏覽器。
- Ajax分頁,可以控制每頁顯示的記錄數。
- 支持XML,JSON,數組形式的數據源。
- 提供豐富的選項配置及方法事件接口。
- 支持表格排序,支持拖動列、隱藏列。
- 支持滾動加載數據。
- 支持實時編輯保存數據內容。
- 支持子表格及樹形表格。
- 支持多語言。
- 最關鍵目前是免費的。
二、jqGrid使用方式:
1.下載文件
- 下載jqGrid的軟件包,目前最新版本爲4.4.1 下載地址爲:http://www.trirand.com/blog/?page_id=6
- 下載jQuery文件,目前最新版本爲1.8.2 下載地址爲:http://code.jquery.com/jquery-1.8.2.min.js
- 下載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>
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 API。