jqgrid与jquery，如何快速掌握这一强大的数据表格插件？
jqGrid的加载
1、引入相关头文件
引入CSS：
引入JS：
2、将jqGrid加入页面中
生成jqGrid：通过$("#list").jqGrid(options);方法，其中list是页面上的一个table元素。
示例代码：
```javascript
$(document).ready(function () {
jQuery("#list").jqGrid({
url: 'Handler.ashx',
datatype: "json",
mtype: 'GET',
colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],
colModel: [
{ name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true },
{ name: 'Name', index: 'Name', width: 100, align: "center" },
{ name: 'ReasonType', index: 'ReasonType', width: 100, align: "center" },
{ name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }
],
rowList: [10, 20, 30],
sortname: 'SalesReasonID',
viewrecords: true,
sortorder: "desc",
jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
},
pager: jQuery('#pager'),
rowNum: 5,
altclass: 'altRowsColour',
width: '500',
height: 'auto',
caption: "DemoGrid"
}).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false });
});
```
jqGrid的重要选项
| 选项名 | 描述 |
| url | jqGrid控件通过这个参数得到需要显示的数据，返回值可以是XML或Json。 |
| datatype | 设定将要得到的数据类型，包括json、xml、xmlstring、local、javascript、function。 |
| mtype | 定义使用哪种方法发起请求，GET或者POST。 |
| height | Grid的高度，可以接受数字、%值、auto，默认值为150。 |
| width | Grid的宽度，如果未设置，则宽度应为所有列宽之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置进行设置。 |
| shrinkToFit | 此选项用于根据width计算每列宽度的算法，默认值为true。 |
| autowidth | 默认值为false，如果设为true，则Grid的宽度会根据父容器的宽度自动重算。 |
| pager | 定义页码控制条Page Bar，在上面的例子中是用一个div来放置的。 |
| sortname | 指定默认的排序列，可以是列名也可以是数字，此参数会在传递到Server端。 |
| viewrecords | 设置是否在Pager Bar显示所有记录的总数。 |
| caption | 设置Grid表格的标题，如果未设置，则标题区域不显示。 |
| rowNum | 用于设置Grid中一次显示的行数，默认值为20。 |
相关问题与解答
问题1：为什么在使用jqGrid时，有时会出现数据加载不出来的情况？
答案1：这可能是由于grid.locale-en.js文件必须在jquery.jqGrid.min.js文件之前加载，否则会导致加载出错，确保按照正确的顺序引入相关文件。
问题2：如何设置jqGrid的列宽自适应？
答案2：可以通过设置shrinkToFit选项为true来实现列宽自适应，当shrinkToFit为true且设置了width值时，每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列宽度不会成比例缩放，而是保持原有设置，并且Grid将会有水平滚动条。
以上内容就是解答有关“jqgrid 简单学习笔记-jquery”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。