jqgridapi中文手册

今天，我们要来介绍一个非常实用的前端框架——jqGrid，并详细解释其中文手册的使用方法。

首先，jqGrid是一款基于jQuery的表格插件，它可以快速实现各种各样的表格功能，比如分页、排序、搜索等。它具有很强的扩展性和可定制性，可以根据不同需求进行相应的定制。

接着，我们来介绍一下jqGrid的一些基本要素。

1. 表格元素：表格元素是指实现表格基础结构的HTML元素，包括表格本身、表头和表体等。在jqGrid中，我们可以通过配置参数创建表格元素。

2. 数据源：数据源是指用于填充表格的数据，可以是JSON或XML格式的数据源。在jqGrid中，我们可以通过设置数据源来快速加载数据。

3. 分页器：分页器用于实现数据分页功能。在jqGrid中，我们可以通过设置分页器大小和页码来实现分页功能。

4. 排序器：排序器用于实现表格数据的排序功能。在jqGrid中，我们可以设置排序器来实现升序或降序排序。

5. 搜索器：搜索器用于实现表格数据的搜索功能。在jqGrid中，我们可以通过设置搜索器来实现根据关键字搜索数据。

下面，我们对上述要素进行详细讲解，并给出相应的示例代码。

1. 表格元素

在jqGrid中，我们可以通过下列参数来创建表格元素：

html

 

其中，`myGrid`和`myPager`分别为表格和分页器的id，可以根据自己的需求进行设置。
2. 数据源
在jqGrid中，我们可以通过下列参数来设置数据源：
javascript

var myData = [

    { id: 1, name: "张三", age: 18, country: "中国" },

    { id: 2, name: "李四", age: 20, country: "美国" },

    { id: 3, name: "王五", age: 22, country: "英国" },

    { id: 4, name: "赵六", age: 24, country: "德国" },

]
$("#myGrid").jqGrid({

    datatype: "local", // 设置数据源为本地

    data: myData, // 数据源

    colModel: [

        { label: "ID", name: "id", index: "id" },

        { label: "姓名", name: "name", index: "name" },

        { label: "年龄", name: "age", index: "age" },

        { label: "国家", name: "country", index: "country" }

    ],

    pager: "#myPager", // 分页器

    rowNum: 10, // 每页数据条数

    rowList: [10, 20, 30], // 分页器可选择的数据条数

    sortname: "id", // 初始化按照ID排序

    sortorder: "asc", // 排序方式为升序

    viewrecords: true, // 是否显示数据记录总数

    caption: "测试表格" // 表格标题

});
上述代码中，我们首先定义了一个数组`myData`，用于存储表格数据。然后，我们通过设置`datatype`参数来指定数据源为本地，通过`data`参数来设数据源为我们定义的数组。接着，通过`colModel`参数来定义表格的列属性，包括标签、列名和索引等。最后，我们还设置了分页器、每页数据条数、分页器可选择的数据条数、初始化排序方式、是否显示数据记录总数和表格标题等。
3. 分页器
在jqGrid中，我们可以通过下列参数来设置分页器：
javascript

$("#myGrid").jqGrid({

    pager: "#myPager", // 分页器

    rowNum: 10, // 每页数据条数

    rowList: [10, 20, 30], // 分页器可选择的数据条数

    viewrecords: true // 是否显示数据记录总数

});
上述代码中，我们通过设置`pager`参数来指定分页器的id，通过`rowNum`参数来指定每页数据条数，通过`rowList`参数来设置分页器可选择的数据条数。最后，通过`viewrecords`参数来设置是否显示数据记录总数。
4. 排序器
在jqGrid中，我们可以通过下列参数来设置排序器：
javascript

$("#myGrid").jqGrid({

    sortname: "id", // 初始化按照ID排序

    sortorder: "asc" // 排序方式为升序

});
上述代码中，我们通过设置`sortname`参数来指定初始化按照哪一列来排序，通过`sortorder`参数来设置排序方式为升序或降序。
5. 搜索器
在jqGrid中，我们可以通过下列参数来设置搜索器：
javascript

$("#myGrid").jqGrid('navGrid', '#myPager', { edit: false, add: false, del: false }, {}, {}, {},

    {

        multipleSearch: true, // 启用多条件搜索

        multipleGroup: true, // 启用多条件搜索时分组选择条件

        showQuery: true, // 显示条件搜索语句

        caption: "数据搜索" // 搜索器标题

    });
上述代码中，我们通过调用`navGrid`方法来创建搜索器。其中，`'#myPager'`参数用于指定分页器id，`{ edit: false, add: false, del: false }`用于指定没有编辑、新增和删除按钮，而`{}`则用于指定编辑、新增和删除的处理函数。在最后一个参数中，我们通过设置`multipleSearch`参数来启用多条件搜索，通过设置`multipleGroup`参数来启用多条件搜索时分组选择条件，通过设置`showQuery`参数来显示条件搜索语句。最后，我们还设置了搜索器的标题为“数据搜索”。
通过以上讲解，相信大家对jqGrid的基本要素有了一定的了解，并能够根据自己的需求进行相应的定制。如果想要了解更多关于j