jQWidgets jqxGrid 完整参考

jQWidgets jqxGrid 是一个功能强大的 jQuery 插件，用于创建灵活且可自定义的网格视图。它支持各种数据源，包括 JSON、XML、CSV 等，也支持分页、排序、筛选和分组等常见功能。

安装

你可以从 jQWidgets 的官方网站上下载最新版的 jqxGrid，也可以使用 npm 或 yarn 进行安装：

# 使用 npm
npm install jqwidgets-scripts

# 使用 yarn
yarn add jqwidgets-scripts

安装完成后，在 HTML 页面中引入 jqxGrid 相关的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="/path/to/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="/path/to/jqwidgets/styles/jqx.material.css">
<script src="/path/to/jqwidgets/scripts/jquery-3.5.1.min.js"></script>
<script src="/path/to/jqwidgets/jqxcore.js"></script>
<script src="/path/to/jqwidgets/jqxdata.js"></script>
<script src="/path/to/jqwidgets/jqxbuttons.js"></script>
<script src="/path/to/jqwidgets/jqxscrollbar.js"></script>
<script src="/path/to/jqwidgets/jqxmenu.js"></script>
<script src="/path/to/jqwidgets/jqxgrid.js"></script>
<script src="/path/to/jqwidgets/jqxgrid.filter.js"></script>
<script src="/path/to/jqwidgets/jqxgrid.sort.js"></script>
<script src="/path/to/jqwidgets/jqxgrid.grouping.js"></script>
<script src="/path/to/jqwidgets/jqxgrid.selection.js"></script>
<script src="/path/to/jqwidgets/jqxgrid.edit.js"></script>
<script src="/path/to/jqwidgets/jqxgrid.export.js"></script>
<script src="/path/to/jqwidgets/jqxgrid.aggregates.js"></script>

基本用法

以下是一个简单的 jqxGrid 示例：

<div id="jqxgrid"></div>

<script>
  $(document).ready(function () {
    // 数据源
    var source = {
      datatype: "json",
      datafields: [
        { name: 'id', type: 'string' },
        { name: 'name', type: 'string' },
        { name: 'age', type: 'number' }
      ],
      localdata: [
        { id: '1', name: 'John Smith', age: 35 },
        { id: '2', name: 'Jane Doe', age: 28 },
        { id: '3', name: 'Bob Johnson', age: 44 }
      ]
    };

    // 列定义
    var columns = [
      { text: 'ID', datafield: 'id', width: 100 },
      { text: 'Name', datafield: 'name', width: 200 },
      { text: 'Age', datafield: 'age', width: 100 }
    ];

    // jqxGrid 初始化
    $("#jqxgrid").jqxGrid({
      source: source,
      columns: columns,
      width: '100%',
      height: 400
    });
  });
</script>

可以看到，我们首先定义了一个数据源 source，包括了数据类型 datatype、数据字段 datafields 和本地数据 localdata。接着定义了列定义 columns，包括了表头文本 text、数据字段 datafield 和列宽 width。最后使用 $("#jqxgrid").jqxGrid() 方法初始化 jqxGrid，并将数据源和列定义传递给它。

高级用法

除了基本用法之外，jqxGrid 还支持各种高级用法，包括但不限于：

• 使用 AJAX 数据源
• 自定义单元格内容
• 自定义列头内容
• 分页、排序和筛选
• 分组和聚合
• 单元格编辑
• 导出和打印

如果你想深入了解 jqxGrid 的更多高级用法，建议参考官方文档或在线示例。