<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 jQuery 和 jqGrid 相关的库和样式 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" /><title>jqGrid Example with Data</title></head><body><table id="grid"></table><script>
// 定义您的数据数组
var myData = [
{ VendorName: "A", UnRate: 1, UnCount: 2 },
{ VendorName: "B", UnRate: 11, UnCount: 22 },
{ VendorName: "C", UnRate: 33, UnCount: 44 },
];
// 初始化 jqGrid
$("#grid").jqGrid({
datatype: "local",
data: myData,
colModel: [
{ name: "VendorName", label: "Vendor Name", width: 100 },
{ name: "UnRate", label: "UnRate", width: 100 },
{ name: "UnCount", label: "UnCount", width: 100 },
],
rowNum: 1,
rowList: [1, 2, 3],
viewrecords: true,
caption: "Example with Data",
pager: true
});
// 设置自动翻页
var autoPagingInterval = 3000; // 翻页间隔时间（以毫秒为单位），设置为 3 秒
setInterval(function() {
var grid = $("#grid");
var currentPage = grid.jqGrid('getGridParam', 'page'); // 获取当前页号
var totalPages = grid.jqGrid('getGridParam', 'lastpage'); // 获取总页数
var nextPage = currentPage < totalPages ? currentPage + 1 : 1; // 计算下一页号
grid.jqGrid('setGridParam', { page: nextPage }).trigger("reloadGrid");
}, autoPagingInterval);
</script></body></html>
