jqGrid 简单学习笔记
一、jqGrid简介
定义：jqGrid是一个基于jQuery的表格插件，用于创建功能丰富的数据网格。
特点：支持数据的展示、编辑、排序、分页和过滤等功能。
适用场景：适用于需要处理大量数据并提供高级交互功能的Web应用程序。
二、基本用法
引入相关文件
<link rel="stylesheet" type="text/css" href="path/to/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="path/to/jquery.jqGrid.css"> <script src="path/to/jquery.js"></script> <script src="path/to/jquery-ui.js"></script> <script src="path/to/jquery.jqGrid.js"></script>
HTML结构
<table id="grid"></table> <div id="pager"></div>
初始化jqGrid
$("#grid").jqGrid({
url: 'your-data-source.json', // 数据来源
datatype: "json", // 数据类型
colNames: ['ID', 'Name', 'Age'], // 列名
colModel: [
{ label: 'ID', name: 'id', index: 'id', width: 75 },
{ label: 'Name', name: 'name', index: 'name', width: 90 },
{ label: 'Age', name: 'age', index: 'age', width: 80 }
],
rowNum: 10, // 每页显示行数
rowList: [10, 20, 30], // 可选的行数
pager: '#pager', // 分页控件
sortname: 'id', // 默认排序列
viewrecords: true, // 是否显示记录总数
sortorder: "desc", // 默认排序方式
height: 250, // 高度
width: 600 // 宽度
});三、常用配置选项
url: 数据来源URL。
datatype: 数据类型，可以是json、xml、local等。
colNames: 列名数组。
colModel: 列模型数组，包含列的属性如name,index,width,label等。
rowNum: 每页显示的行数。
rowList: 可选的行数数组。
pager: 分页控件的选择器。
sortname: 默认排序列的名称。
viewrecords: 是否在分页控件中显示记录总数。
sortorder: 默认排序方式（asc或desc）。
height: 表格高度。
width: 表格宽度。
caption: 表格标题。
四、事件与回调函数
beforeRequest: 发送请求前触发的事件。
onPaging: 点击翻页按钮时触发的事件。
loadComplete: 数据加载完成时触发的事件。
gridComplete: 表格生成完成后触发的事件。
五、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqGrid Example</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trirand-jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trirand-jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trirand-jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
<script>
$(function () {
$("#grid").jqGrid({
url: 'data.json', // 数据来源
datatype: "json", // 数据类型
colNames: ['ID', 'Name', 'Age'], // 列名
colModel: [
{ label: 'ID', name: 'id', index: 'id', width: 75 },
{ label: 'Name', name: 'name', index: 'name', width: 90 },
{ label: 'Age', name: 'age', index: 'age', width: 80 }
],
rowNum: 10, // 每页显示行数
rowList: [10, 20, 30], // 可选的行数
pager: '#pager', // 分页控件
sortname: 'id', // 默认排序列的名称
viewrecords: true, // 是否显示记录总数
sortorder: "desc", // 默认排序方式
height: 250, // 高度
width: 600 // 宽度
});
});
</script>
</body>
</html>上述示例展示了如何通过jqGrid实现一个简单的数据表格，包括数据的展示、分页和排序功能，用户可以根据实际需求进一步定制和扩展功能。