jQuery jqGrid 是一個非常流行的 jQuery 插件,可以用來實現各種強大的數據表格功能。其中最關鍵的就是數據源的使用,而 JSON 數據源是最常用的一種。
$("#myGrid").jqGrid({ url: "data.json", datatype: "json", colNames: ["ID", "Name", "Age"], colModel: [ {name: "id", index: "id", width: 50}, {name: "name", index: "name", width: 150}, {name: "age", index: "age", width: 50} ], rowNum: 10, rowList: [10, 20, 30], pager: "#myGridPager", sortname: "id", viewrecords: true, sortorder: "asc" });
上面的代碼是一個簡單的 jqGrid 定義,其中的數據源就是一個名為 data.json 的 JSON 文件。其中每行數據都包含三個字段,分別為 id、name 和 age。
在定義 colModel 時,我們需要指定每個字段的屬性,如名稱、索引和寬度等。而 rowNum 和 rowList 則用于指定每頁顯示的行數和每頁可選的行數。
最后需要注意的是,我們需要為 table 元素設置一個 id 名稱,并將 pager 設為一個指定 id 的 div 元素以實現分頁功能。