JqGrid是一個基于jQuery的表格插件,可以幫助開發(fā)者快速構(gòu)建功能強大的表格和數(shù)據(jù)展示界面。下面是JqGrid使用方法的詳解:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.6/dist/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.6/dist/css/ui.jqgrid.min.css">
<div id="gridContainer"></div>
jQuery
方法將表格容器轉(zhuǎn)換成JqGrid。$(function() {
$("#gridContainer").jqGrid({
// 表格配置選項
url: "data.json", // 后臺數(shù)據(jù)接口
datatype: "json", // 數(shù)據(jù)類型
colModel: [ // 列定義
{label: "姓名", name: "name"},
{label: "年齡", name: "age"},
{label: "性別", name: "gender"}
],
rowNum: 10, // 每頁顯示的記錄數(shù)
rowList: [10, 20, 30], // 每頁顯示記錄數(shù)選項
pager: "#gridPager", // 分頁欄
height: 400, // 表格高度
autowidth: true, // 自動調(diào)整列寬
caption: "用戶列表" // 表格標題
});
});
$("#gridContainer").jqGrid("setGridParam", {url: "data.json", datatype: "json"}).trigger("reloadGrid");
$("#gridContainer").jqGrid("sortGrid", "name", true); // 根據(jù)姓名排序(升序)
$("#gridContainer").jqGrid("filterToolbar", {searchOnEnter: false}); // 顯示篩選工具欄
$("#gridContainer").jqGrid("navGrid", "#gridPager", {edit: false, add: false, del: false}); // 顯示導(dǎo)航欄(編輯、新增、刪除操作)
以上就是JqGrid使用方法的詳解,通過簡單的配置和操作,就可以實現(xiàn)功能強大的表格展示界面。