jquery.jqGrid 使用
时间: 2023-07-11 19:24:22 浏览: 71
jquery.jqGrid是一个基于jQuery的表格插件,用于展示和编辑数据。下面是使用jquery.jqGrid的基本步骤:
1. 引入必要的文件:
```html
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入jqGrid库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<!-- 引入jqGrid CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
```
2. 创建HTML表格元素:
```html
<table id="myGrid"></table>
```
3. 初始化jqGrid:
```js
$("#myGrid").jqGrid({
url: "data.json", // 数据源URL
datatype: "json", // 数据类型
colModel: [ // 列模型
{ name: "id", label: "编号", width: 50 },
{ name: "name", label: "姓名", width: 100 },
{ name: "age", label: "年龄", width: 50 },
{ name: "sex", label: "性别", width: 50 },
{ name: "email", label: "邮箱", width: 150 }
],
viewrecords: true, // 显示总记录数
width: 600, // 表格宽度
height: 400 // 表格高度
});
```
4. 如果需要编辑功能,可以添加以下代码:
```js
$("#myGrid").jqGrid("navGrid", { edit: true, add: true, del: true });
```
以上是使用jquery.jqGrid的基本步骤,具体可以根据需求进行配置。