JQuery jqGrid 是一個功能強大的表格控件,它可以實現帶有分頁、排序、篩選等復雜功能的數據表格。下面我們來看一個 jqGrid 的實例,首先需要引入必要的 JS 和 CSS 文件。
接下來就是配置和初始化 jqGrid。如下代碼可以創建一個包含表格數據和分頁的 jqGrid。
$(function () { $("#table").jqGrid({ url: 'data.json', datatype: "json", colNames: ['姓名', '年齡', '性別'], colModel: [ { name: 'name', index: 'name', width: 100 }, { name: 'age', index: 'age', width: 80 }, { name: 'gender', index: 'gender', width: 80 }, ], rowNum: 10, autowidth: true, pager: "#pager", viewrecords: true, caption: "學生信息表", sortname: 'name', sortorder: 'asc' }); });
其中,url 指向后臺獲取數據的地址,datatype 指定了數據類型為 JSON,colNames 定義了表頭,colModel 定義了每一列的屬性,rowNum 指定每頁顯示記錄數,autowidth 表示自動適應表格寬度,pager 定義了分頁條的 ID,viewrecords 表示顯示總記錄數和當前顯示記錄數,caption 為表格的標題,sortname 和 sortorder 表示表格默認按照姓名升序排列。
最后我們在 HTML 中添加 table 和 pager 元素,以呈現表格和分頁條。如下代碼即可將表格渲染到頁面上。
至此,一個簡單的 jqGrid 實例就完成了。如果需要更多功能的話,可以查看 jqGrid 官網的文檔和示例,了解如何實現頁碼跳轉、搜索等功能。