jqxgrid详解

一、jqxgrid简介

jqxgrid 是一个易于使用且功能强大的 jQuery Grid 控件。它提供了各种强大的功能，如分页，排序，分组，搜索以及自定义列。此外，它还提供了先进的特性（例如，多选、分层列标题）和样式（如固定表头和列、自动行高、分页操作、悬停样式和鼠标指针）。

二、jqxgrid的基本使用方法

在页面中引入 jqxgrid 的 js 和 css 文件：

<link href="jqx.base.css" rel="stylesheet" type="text/css" />
<link href="jqx.ui.css" rel="stylesheet" type="text/css" />
<script src="jquery-3.5.1.min.js"></script>
<script src='jqxcore.js'></script>
<script src='jqxdata.js'></script>
<script src='jqxbuttons.js'></script>
<script src='jqxscrollbar.js'></script>
<script src='jqxmenu.js'></script>
<script src='jqxgrid.js'></script>
<script src='jqxgrid.filter.js'></script>
<script src='jqxgrid.selection.js'></script>
<script src='jqxgrid.sort.js'></script>
<script src='jqxdatetimeinput.js'></script>
<script src='jqxcalendar.js'></script>
<script src='jqxdropdownlist.js'></script>
<script src='jqxcheckbox.js'></script>

放置一个具有ID为“grid”名称的 DIV 元素作为 jqxgrid 的容器:

<div id='grid'></div>

在JavaScript代码中添加以下代码以初始化 jqxgrid：

//数据源
var source = {
    datatype: "json",
    datafields: [
        { name: 'id', type: 'string' },
        { name: 'name', type: 'string' },
        { name: 'age', type: 'string' },
        { name: 'gender', type: 'string' }
    ],
    url: "data.php"
};
// jqxGrid的设置
var dataAdapter = new $.jqx.dataAdapter(source);
$("#grid").jqxGrid({
    width: 680,
    source: dataAdapter,
    pageable: true,
    sortable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年龄', datafield: 'age', width: 150 },
        { text: '性别', datafield: 'gender', width: 150 }
    ]
});

三、jqxgrid的高级功能

1、分页

设置 jqxGrid 可以分页显示，只需将 pageable 属性设置为 true，同时设定每页要显示的行数。以下代码设置每页显示十行：

$("#grid").jqxGrid({
    width: 680,
    source: dataAdapter,
    pageable: true,
    pageSize: 10,
    sortable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年龄', datafield: 'age', width: 150 },
        { text: '性别', datafield: 'gender', width: 150 }
    ]
});

2、排序

通过 jqxGrid 可以方便地对每列数据进行排序。只需将 sortable 属性设置为 true。

$("#grid").jqxGrid({
    width: 680,
    source: dataAdapter,
    pageable: true,
    pageSize: 10,
    sortable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年龄', datafield: 'age', width: 150 },
        { text: '性别', datafield: 'gender', width: 150 }
    ]
});

3、分组

通过 jqxGrid 可以方便地对数据进行分组。只需将 groupable 属性设置为 true。以下代码先按照性别分组，然后按照年龄排序：

$("#grid").jqxGrid({
    width: 680,
    source: dataAdapter,
    pageable: true,
    pageSize: 10,
    groupable: true,
    groups: ['gender'],
    sortmode: 'manyimmutable',
    sortable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年龄', datafield: 'age', width: 150 },
        { text: '性别', datafield: 'gender', width: 150 }
    ]
});

4、搜索

jqxGrid 提供了一个内置的搜索框，可以在表格中搜索数据。需要使用 filterable 属性，并设置编辑器类型为 text。

$("#grid").jqxGrid({
    width: 680,
    source: dataAdapter,
    pageable: true,
    pageSize: 10,
    sortable: true,
    filterable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年龄', datafield: 'age', width: 150 },
        { text: '性别', datafield: 'gender', width: 150 }
    ]
});

五、总结

jqxGrid 是一个功能强大，而且可以根据需要进行自定义的 jQuery Grid 控件。在本文中，我们介绍了 jqxGrid 的基本用法，并介绍了它的一些高级特性。大家可以根据自己的需要，进一步了解 jqxGrid 的各种强大功能。