jqGrid

jqGrid官方網址

• Demo


• 官方說明文件

install
1.download package
jQuery Grid Plugin 3.2 with docs
解壓後，放到自建的jqGrid資料夾

2.建立html page
放在jqGrid下，並include jqGrid的js及css
//1.jquery core
<script type="text/javascript" src="jquery.js"></script>
//2.jqGrid的js
<script type="text/javascript" src="jquery.jqGrid.js"></script>
//3.jqGrid的css
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" /> </code>

3.environment配置
有3個地方需要調整

(1)js的路徑
在jquery.jqGrid.js裡，有個pathtojsfiles變數
var pathtojsfiles = "js/"; // need to be ajusted
此為設定要載入的js檔路徑

(2)CSS路徑

href就指到預設的位置
>link rel="stylesheet" type="text/css" media="screen" href="lib/jqGrid/themes/basic/grid.css" /<
(3)圖檔路徑
在實作時，要給圖片的位置

var gridimgpath = 'themes/basic/images'; //預設的圖片
jQuery("#tbRecordList").jqGrid({
colNames: ['日期', '分數',
...
imgpath: gridimgpath, //設定gridimgpath
});


**有的沒的
//清空grid內容
$("#_TableName").clearGridData();

**備註
1.每個欄位長度至少要60以上，不然排序的icon(遞增，遞減)會看不見 (新版的不會了)
2.當遇到p.mutliselect是null時，代表設定table id不一致或未啟動jqGrid()的設定
3.利用jquery.load進來的頁面，如果也有include jquery.js會導致無法使用jqgrid的method,