📌  相关文章
📜  jQWidgets jqxGrid addgroup() 方法(1)

📅  最后修改于: 2023-12-03 14:43:23.504000             🧑  作者: Mango

jQWidgets jqxGrid addgroup() 方法

简介

jQWidgets jqxGrid 是一款基于 jQuery 的表格组件，提供了丰富的表格操作功能，其中 addgroup() 方法用于在 jqxGrid 中添加分组。

语法
addgroup(groupRowIndex, groupBy, collapsed);
参数说明
  • groupRowIndex：分组的行索引；
  • groupBy：分组的数据字段；
  • collapsed：是否默认折叠。
使用步骤
步骤1：引入依赖文件

在 head 标签中引入以下依赖文件：

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="jqwidgets/jqx-all.js"></script>
步骤2：创建 jqxGrid

在 body 标签中创建一个 div 元素，作为 jqxGrid 的容器，在 JavaScript 代码中使用以下代码创建 jqxGrid：

//准备数据源
var source =
{
    datatype: "json",
    datafields: [
        { name: 'name' },
        { name: 'id' },
        { name: 'quantity', type: 'float' },
        { name: 'price', type: 'float' }
    ],
    id: 'id',
    url: 'data.php'
};

//创建 jqxGrid
$("#jqxgrid").jqxGrid(
{
    source: source,
    columnsresize: true,
    pageable: true,
    autoshowloadelement: false,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    selectionmode: 'multiplecellsadvanced',
    columns: [
        { text: 'Name', datafield: 'name', width: 200 },
        { text: 'Product ID', datafield: 'id', width: 100 },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Price', datafield: 'price', width: 60, cellsalign: 'right', cellsformat: 'c2' }
     ]
});
步骤3：使用 addgroup() 方法添加分组

在 JavaScript 代码中使用 addgroup() 方法添加分组：

//添加分组
$("#jqxgrid").jqxGrid('addgroup', 'name', true);
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQWidgets jqxGrid addgroup() 方法</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script src="scripts/jquery-1.11.1.min.js"></script>
    <script src="jqwidgets/jqx-all.js"></script>
    <script>
        $(document).ready(function () {
            //准备数据源
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'id' },
                    { name: 'quantity', type: 'float' },
                    { name: 'price', type: 'float' }
                ],
                id: 'id',
                url: 'data.php'
            };

            //创建 jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                source: source,
                columnsresize: true,
                pageable: true,
                autoshowloadelement: false,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                    { text: 'Name', datafield: 'name', width: 200 },
                    { text: 'Product ID', datafield: 'id', width: 100 },
                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                    { text: 'Price', datafield: 'price', width: 60, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

            //添加分组
            $("#jqxgrid").jqxGrid('addgroup', 'name', true);
        });
    </script>
</head>
<body>

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

</body>
</html>
参考文献