Jqgrid之强大的表格插件应用

Jqgrid之强大的表格插件应用

什么是Jqgrid

Jqgrid是一款基于jQuery的表格插件，提供了丰富的功能和灵活的配置，可以方便地实现数据的展示、排序、过滤、分页等操作，是一款非常流行的表格插件。

Jqgrid的安装和引用

可以通过以下方式进行安装和引用：

1. 从jqGrid官网下载相应的文件，包括js、css和图片等，然后在页面中引用。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="css/ui.jqgrid.css" />

1. 在使用Jqgrid之前，需要引用jQuery库，确保jquery.jqGrid.min.js在jQuery库后面引用。

Jqgrid的语法

使用Jqgrid需要了解其基本的语法规则，包括定义表格、定义数据源、定义列模型等，下面是一个基本的使用示例：

$("#table_list").jqGrid({
    url: 'get_data.php',
    datatype: "json",
    colModel: [
        { label: '序号', name: 'id', width: 50, key: true },
        { label: '姓名', name: 'name', width: 80 },
        { label: '年龄', name: 'age', width: 80 },
        { label: '性别', name: 'sex', width: 80 },
        { label: '地址', name: 'address', width: 150 },
        { label: '电话', name: 'tel', width: 120 },
        { label: 'Email', name: 'email', width: 120 },
        { label: '状态', name: 'status', width: 80 },
        { label: '备注', name: 'remark', width: 150 }
    ],
    height: 300,
    width: 'auto',
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: "#pager_list",
    viewrecords: true,
    caption: "用户列表"
});

其中，#table_list是表格的id，url是数据源的地址，colModel定义了列的模型，height和width定义了表格的高度和宽度，rowNum定义了每页显示的记录数，rowList定义了可供选择的每页显示记录数选项，pager定义了分页的导航条，viewrecords定义了是否显示总记录数，caption定义了表格的标题。

Jqgrid常用的配置项

Jqgrid提供了众多的配置项，可以按需进行配置，在这里列举一些常用的配置项，更详细的配置可参考官方文档：

1. url：数据源的地址；
2. datatype：数据源的类型，支持xml、json、jsonp等；
3. colNames/colModel：列的名称和模型；
4. height/width：表格的高度和宽度；
5. rowNum：每页显示的记录数；
6. rowList：可供选择的每页显示记录数选项；
7. pager：分页的导航条；
8. viewrecords：是否显示总记录数；
9. caption：表格的标题；
10. sortname：默认的排序字段名称；
11. sortorder：默认的排序顺序，可选值为asc和desc；
12. multiselect：是否支持多选；
13. multiboxonly：是否只能通过checkbox进行选择；
14. autowidth：是否自适应列宽度；
15. gridview：是否启用高效模式，可以提高表格渲染的速度；
16. altRows：是否启用隔行变色效果；
17. shrinkToFit：是否通过自动缩放比例来适应表格宽度。

示例1：展示静态数据

下面是一个示例，展示了一份静态的用户数据：

$(function () {
    var mydata = [
        { id: 1, name: "张三", age: 20, sex: "男", address: "北京市", tel: "010-123456", email: "[e-mail]", status: "在职", remark: "无" },
        { id: 2, name: "李四", age: 25, sex: "男", address: "上海市", tel: "021-123456", email: "[e-mail]", status: "在职", remark: "无" },
        { id: 3, name: "王五", age: 30, sex: "女", address: "广州市", tel: "020-123456", email: "[e-mail]", status: "离职", remark: "无" },
        { id: 4, name: "赵六", age: 35, sex: "男", address: "深圳市", tel: "0755-123456", email: "[e-mail]", status: "在职", remark: "无" },
        { id: 5, name: "钱七", age: 40, sex: "女", address: "天津市", tel: "022-123456", email: "[e-mail]", status: "在职", remark: "无" }
    ];
    $("#table_list").jqGrid({
        data: mydata, // 使用本地数据
        datatype: "local",
        colModel: [
            { label: '序号', name: 'id', width: 50, key: true },
            { label: '姓名', name: 'name', width: 80 },
            { label: '年龄', name: 'age', width: 80 },
            { label: '性别', name: 'sex', width: 80 },
            { label: '地址', name: 'address', width: 150 },
            { label: '电话', name: 'tel', width: 120 },
            { label: 'Email', name: 'email', width: 120 },
            { label: '状态', name: 'status', width: 80 },
            { label: '备注', name: 'remark', width: 150 }
        ],
        height: 300,
        width: 'auto',
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#pager_list",
        viewrecords: true,
        caption: "用户列表"
    });
});

示例2：异步获取数据

下面是一个示例，通过异步方式获取用户数据，并支持排序和分页：

$(function () {
    $("#table_list").jqGrid({
        url: 'get_data.php', // 获取数据的接口地址
        datatype: "json", // 数据源的类型
        colModel: [
            { label: '序号', name: 'id', width: 50, key: true },
            { label: '姓名', name: 'name', width: 80 },
            { label: '年龄', name: 'age', width: 80 },
            { label: '性别', name: 'sex', width: 80 },
            { label: '地址', name: 'address', width: 150 },
            { label: '电话', name: 'tel', width: 120 },
            { label: 'Email', name: 'email', width: 120 },
            { label: '状态', name: 'status', width: 80 },
            { label: '备注', name: 'remark', width: 150 }
        ],
        height: 300,
        width: 'auto',
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#pager_list",
        viewrecords: true,
        caption: "用户列表",
        autowidth: true, // 自适应列宽
        gridview: true, // 启用高效模式
        multiselect: true, // 支持多选
        multiboxonly: true, // 只能通过checkbox进行选择
        altRows: true, // 启用隔行变色效果
        shrinkToFit: true, // 自动缩放比例来适应表格宽度
        sortname: 'id', // 默认的排序字段名称
        sortorder: 'desc' // 默认的排序顺序
    }).jqGrid('navGrid', '#pager_list', { edit: false, add: false, del: false }); // 增加分页工具条
});

结语

Jqgrid是一款非常强大的表格插件，它提供了丰富的功能和灵活的配置，可以方便地实现数据的展示、排序、过滤、分页等操作，为我们的开发工作提供了极大的便利。