java jqgrid 是一個基于 jQuery 的表格插件,能夠實現簡單的表格功能,如排序、分頁、篩選等。在使用 jqgrid 時,常用的數據格式是 JSON。
jQuery("#grid").jqGrid({ url: "data.json", datatype: "json", colNames: ["姓名", "年齡", "所在地"], colModel: [ {name: "Name", index: "Name", sortable: true}, {name: "Age", index: "Age", sortable: true}, {name: "Location", index: "Location", sortable: true} ], rowNum: 10, rowList: [10, 20, 30], pager: "#pager", sortname: "Name", viewrecords: true, caption: "我的 jqgrid 表格" });
上面代碼中,url 指定了表格數據的來源,datatype 指定了數據的格式,colNames 和 colModel 指定了表格的列名和列模型,rowNum 和 rowList 分別指定了每頁展示的記錄數和可選的記錄數,pager 指定了分頁控件的容器,sortname 指定了默認按哪一列排序,viewrecords 表示顯示總記錄數,caption 是表格的標題。
使用 jqgrid 時,需要保證返回的 JSON 數據格式符合 jqgrid 要求。具體而言,需要在數據中包含 total、records 和 rows 三個屬性:total 表示總頁數,records 表示總記錄數,rows 是一個數組,表示當前頁的記錄。例如:
{ "total": 3, "records": 30, "rows": [ {"Name": "張三", "Age": 21, "Location": "北京"}, {"Name": "李四", "Age": 22, "Location": "上海"}, {"Name": "王五", "Age": 23, "Location": "廣州"}, ... ] }
總之,使用 JSON 數據格式和 jqgrid 插件能夠輕松地實現表格的快速展示和操作。
下一篇css 優先級 z