JqGrid 是 JQuery 的表格插件滤祖，以ajax的方式和服務器端通信讼渊。該插件功能非常強大碌更，通過簡單的配置能實現(xiàn)基本常用的表格功能裕偿。
可參看以下博客，了解不同參數(shù)的含義：http://blog.mn886.net/jqGrid/
1. jqGrid特性：
- ** 基于jquery UI主題痛单，支持主題切換嘿棘。**
- ** 兼容所有流行的web瀏覽器。**
- ** Ajax分頁桦他，可以控制每頁顯示的記錄數(shù)。**
- ** 支持XML谆棱，JSON快压，數(shù)組形式的數(shù)據(jù)源。**
- ** 提供豐富的選項配置及方法事件接口垃瞧。**
- ** 支持表格排序蔫劣，支持拖動列、隱藏列个从。**
- ** 支持滾動加載數(shù)據(jù)脉幢。**
- ** 支持實時編輯保存數(shù)據(jù)內容。**
- ** 支持子表格及樹形表格嗦锐。**
- ** 支持多語言嫌松。**
- ** 免費。**
2. jqGrid的基本用法：
能下面的示例能助你了解 JqGrid 的基本用法奕污。其包含以下功能：
- ** 表格與數(shù)據(jù) **
- ** 數(shù)據(jù)的增刪查改 **
- ** 多條件查詢和分組查詢 **
- ** 排序 **
- ** 分頁 **
如何運行代碼萎羔？
- 點擊 jqgrid.html 頁面。
- 或者碳默，把解壓后的文件放到 Apache下運行贾陷，地址為：
http://localhost/JqGrid_20160807_v1/jqgrid.html
在 chrome 上的顯示效果如下：
JqGrid 顯示效果.png
3. 代碼詳解：
3.1. 數(shù)據(jù)初始化
var grid_data = [ {
id:"1", name:"Desktop Computer", note:"note",
stock:"Yes", ship:"FedEx", sdate:"2007-12-03"
...
} ];
3.2. 表格初始化
jQuery(grid_selector).jqGrid({
colModel : [
{
...
formatter : 'actions', // 在每一行顯示編輯按鈕與刪除按鈕
formatoptions : { // 按鈕設定
}
},
// 設置每一行數(shù)據(jù)
{ name:'id', index:'id', width:60, sorttype: "int", editable: true },
],
emptyrecords : "no record", //
rowNum : 10, // 每頁10行
rowList : [10,20,30], // 設置每頁顯示行數(shù)
pager : pager_selector, // 顯示導航欄及相關按鍵
toppager : false, // 默認設為 false，如果設為 true嘱根，則分頁欄會被放到 table 上方
multiselect : true,
editurl : "blank.html", // 提交：要把應用放到 Apache 等應用服務器中才可以正常運行髓废，否則點擊提交時報錯
});
3.3. 改變 Stock 單選框的樣式
function aceSwitch( cellvalue, options, cell ) {
}
單選框.png
3.4. 添加日期控件到 'Last Sales'
function pickDate( cellvalue, options, cell ) {
}
日期控件.png
3.5. 編輯按鈕設置（其他按鈕也做類似設置）
recreateForm : true,
reloadAfterSubmit : true, // 提交后，重新載入 table 的數(shù)據(jù)
closeAfterEdit : true, // 提交后该抒，關閉編輯框
closeOnEscape : true, // 按 esc 鍵慌洪，關閉編輯框
beforeShowForm : function(e) { // 設置編輯框的樣式
}
編輯按鈕.png
3.6. 搜索框
// search form
recreateForm : true, // 在每次打開時，都會初始化搜索框
afterShowSearch : function(e) { // 設置搜索框的樣式
},
afterRedraw: function() { // 設置篩選框的樣式
},
multipleSearch: true, // 多條件查詢，例如：((id = 1) AND sdate = "2")
showQuery: true, // 顯示查詢語句
multipleGroup:true, // 分組查詢蒋譬，例如：((id = 1 AND name = "a") AND sdate = "2")
下面是一個多條件查詢的例子：
多條件搜索.png
3.7. 編輯框
// 設置編輯框格式
function style_edit_form(form) {
// 在 "sdate" 上設置 datepicker 日期控件割岛，
// 在 "stock" 上設置 switch 單選控件
form.find('input[name=sdate]')
.datepicker({format:'yyyy-mm-dd', autoclose:true})
.end()
.find('input[name=stock]')
.addClass('ace ace-switch ace-switch-5')
.wrap('<label class="inline" />')
.after('<span class="lbl"></span>');
...
}
編輯框.png
注意：建議把代碼放到 Apache 服務器上運行；否則在點擊 Submit 按鍵時會顯示404錯誤犯助。
4. 瀏覽器兼容
- 目前癣漆，JqGrid兼容Chrome、Safari剂买、Firefox惠爽、IE10、Edge等主流瀏覽器瞬哼。建議大家使用較新版本的Chrome婚肆。
- 需要注意 IE9、IE10 的兼容模式仍然會使 jQuery 2.0 運行不正常坐慰。
- 不兼容 IE6/7/8较性。
5. 代碼下載
請移步到百度網(wǎng)盤：
https://pan.baidu.com/s/1mitqC7u
