jQWidgets jqxGrid cleargroups() 方法(1)

📌 相关文章

📜 jQWidgets jqxGrid cleargroups() 方法(1)

📅 最后修改于: 2023-12-03 15:32:17.695000 🧑 作者: Mango

jQWidgets jqxGrid cleargroups() 方法

cleargroups() 方法是 jQWidgets jqxGrid 控件中的一个方法，用于清除 jqxGrid 控件中的所有分组。下面将对该方法进行介绍。

方法功能

cleargroups() 方法可以清除 jqxGrid 控件中的所有分组。

方法语法

cleargroups();

方法参数

cleargroups() 方法没有参数。

方法返回值

cleargroups() 方法不返回值。

方法说明

cleargroups() 方法用于清除 jqxGrid 控件中的所有分组，从而只展现原始数据。该方法不接受任何参数，调用该方法后，控件将删除当前所有分组，并重新加载整个数据集合。

方法示例

下面是一个使用 cleargroups() 方法的示例。在该示例中，我们创建了一个 jQWidgets jqxGrid 控件，并且添加了一个 cleargroups() 方法调用的按钮。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQWidgets jqxGrid cleargroups() 方法示例</title>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="scripts/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = {
                datatype: "json",
                datafields: [
                    { name: 'CompanyName', type: 'string' },
                    { name: 'ContactName', type: 'string' },
                    { name: 'ContactTitle', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Country', type: 'string' }
                ],
                url: "data.php",
                root: 'Rows',
                cache: false
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                source: dataAdapter,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'Address', datafield: 'Address', width: 250 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Country', datafield: 'Country', width: 120 }
                ],
                groupable: true,
                groups: ['Country']
            });
            
            $("#myButton").click(function () {
                $("#jqxgrid").jqxGrid('cleargroups');
            });
        });
    </script>
</head>
<body>
    <div id="jqxgrid"></div>
    <br />
    <button id="myButton">Clear Groups</button>
</body>
</html>

在上述示例中，我们创建了一个数据源并将其绑定到 jqxGrid 控件。为了让控件可以进行分组，我们将 groupable 属性设置为 true，并指定了 groups 属性，即按照国家列进行分组。

同时，我们在页面中创建了一个“Clear Groups”按钮，当用户点击该按钮时，调用 cleargroups() 方法将清除所有分组，只展示原始数据。

结论

cleargroups() 方法可以通过清除 jqxGrid 控件中的所有分组，只展示原始数据。

这是一个非常有用的方法，可以方便地实现数据可视化和数据导出。