1. jqGrid下載
jqGrid下載地址： http://www.trirand.com/blog/
jqGrid Demo: http://www.guriddo.net/demo/guriddojs/
2. jqGrid引用
jqGrid自身依賴於jQuery UI，引用jqGrid需要同時引用jQuery UI樣式。
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet"/> <link href="/Content/themes/base/theme.css" rel="stylesheet"/> <script src="/Scripts/jquery-2.1.3.js"></script> <script src="/Scripts/i18n/grid.locale-cn.js"></script> <script src="/Scripts/jquery.jqGrid.src.js"></script>
3. jqGrid屬性
3.1 jqGrid基本屬性
| 名稱 | 型別 | 描述 | 預設值 |
|---|---|---|---|
| url | string | 獲取資料URL | |
| mtype | string | Ajax提交方式，GET或POST，預設為GET | GET |
| datatype | string | 返回的資料型別，包括：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside，預設為xml。 | xml |
| colNames | Array | 列名稱陣列 | |
| colModel | Array | 列模型陣列 | |
| width | mixed | 表格寬度，可以是數字、畫素值或百分比。 | |
| height | mixed | 表格高度，可以是數字、畫素值或百分比。 | |
| rowNum | integer | 每頁顯示記錄條數，預設為20條。 | 20 |
| rowList | Array | 分頁大小陣列，顯示為下拉框，用於選擇每頁需要顯示的記錄條數。 |
3.1 colModel屬性
| 名稱 | 型別 | 描述 | 預設值 |
|---|---|---|---|
| label | string | 如果colNames為空則用來作為列的顯示名稱，如果都沒有設定則顯示name 值 | |
| name | string | 列名稱 | |
| width | number | 預設列的寬度，只能是畫素值。 | 150 |
| fixed | boolean | 列寬度是否要固定不可變，預設為true。 | true |
| align | string | 單元格對齊方式，包括left、center及right。預設為left。 | left |
| key | boolean | 列是否為主鍵列，只有一個列可以做這項設定，如果設定多於一個，那麼只選取第一個，其他被忽略。 | false |
| resizable | boolean | 列寬是否可調節，預設為true。 | true |
| sortable | boolean | 列是否可排序，預設為true。 | true |
| hidden | boolean | 初始化表格時是否要隱藏此列，預設為false。 | false |
| hidedlg | boolean | 是否顯示或者隱藏此列（appear in the modal dialog） | false |