jqGrid用法汇总(全经典)

首先来介绍一下jqGrid。

什么是jqGrid？

jqGrid是一个开源的jQuery插件，是一个表格插件，便于实现数据的分页、排序、筛选及编辑操作等，可与众多的主流Web开发框架（如Spring、Struts、ASP.NET MVC、Ruby on Rails）集成使用。jqGrid拥有丰富的功能和易于实现的特性，因此在Web开发中被广泛应用。

安装和使用方法

如果你已经有了jQuery，那么只需要下载jqGrid的相关文件，并引入到你的项目中即可，具体的步骤如下：

1. 首先在官网https://trirand.com/blog/jqgrid/jqgrid.html 上下载jqGrid的相关文件

2. 在页面中引入jqGrid的依赖文件

   html
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.jqGrid.min.js"></script>

3. 在页面中定义一个<table>元素，用于渲染显示数据的表格

   html
<table id="myGrid"></table>

4. 在JavaScript中配置jqGrid

   javascript
$(function(){
$("#myGrid").jqGrid({
url: "url_to_fetch_data", // 从该url获取数据
datatype: "json", // 数据类型为json格式
colNames: ["列1", "列2"], // 指定列名
colModel: [ // 列模型，定义每列的一些参数
{name: "name", width: 200}, // 定义name列并指定宽度为200px
{name: "age", width: 60}
],
rowNum: 10, // 每页数据条目数
rowList: [10, 20, 50, 100], // 分页菜单中可供选择的页条目数
pager: "#pager" // 分页控件id
});
});

这就是一个最基础的jqGrid应用示例，接下来我们将讲解一些实用的用法。

用法汇总

1.数据排序

jqGrid可以很方便地实现数据按照指定的列进行排序。实现方式是在colModel中加入sortable属性。

{    
    name: 'name',    
    index: 'name',    
    width: 200,    
    sortable: true    
}

2.数据分页

分页是很多应用场景必须要用到的功能，jqGrid提供了非常简便的数据分页方法，只要指定好每一页显示的数量即可。

$("#myGrid").jqGrid({    
    url: "url_to_fetch_data",    
    datatype: "json",    
    colNames: ["列1", "列2"],    
    colModel: [    
        {name: "name", width: 200},    
        {name: "age", width: 60}    
    ],    
    rowNum: 10, // 指定每一页显示的条数
    rowList: [10, 20, 50, 100],    
    pager: "#pager"    
});

3.分页栏的可定制性

jqGrid的分页栏可以进行可定制，比如可以隐藏某个按钮、调整按钮位置等，只需要通过定义对应条目的格式、样式等方式实现即可。

4.修改表格更改提示信息

如果使用数据编辑功能，则需要告知用户所修改的结果是否完成，此时可以自定义ondblClickRow事件，用于显示整个编辑器。

$("#myGrid").jqGrid({
    url: "url_to_fetch_data",
    datatype: "json",
    colNames: ["列1", "列2"],
    colModel: [
        {name: "name", width: 200},
        {name: "age", width: 60}
    ],
    rowNum: 10,
    rowList: [10, 20, 50, 100],
    pager: "#pager",
    // 定义ondblClickRow事件
    ondblClickRow: function (rowid) {
        var editurl = "url_to_handle_edited_data";
        jQuery("#myGrid").jqGrid('editRow', rowid, true, null, null, editurl, SuccessFunc, ErrorFunc, aftersavefunc);
    }
});

5.改变某些列的样式

可以通过类似如下方式来改变某些列的样式：

$("#myGrid").jqGrid({
    url: "url_to_fetch_data",
    datatype: "json",
    colNames: ["列1", "列2"],
    colModel: [
        {name: "name", width: 200},
        {name: "age", width: 60,
         cellattr: function (rowId, cellValue, rawObject, cm, rowObject) {
            return 'style="background-color: #f2f2f2;"';
         }}
    ],
    rowNum: 10,
    rowList: [10, 20, 50, 100],
    pager: "#pager",
});

以上就是jqGrid的一些用法总结，希望对你有所帮助。