jQWidgets jqxPivotGrid multipleSelectionEnabled 属性(1)

📌 相关文章

📜 jQWidgets jqxPivotGrid multipleSelectionEnabled 属性(1)

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

jQWidgets jqxPivotGrid multipleSelectionEnabled 属性

简介

jQWidgets jqxPivotGrid 是一个数据透视表的 jQuery 插件，用于展示和分析多维数据，支持数据透视、交叉表、分组汇总等功能。multipleSelectionEnabled 属性是 jqxPivotGrid 的一个属性选项，用于控制是否支持多选。

用法

使用 jqxPivotGrid 插件创建一个数据透视表，可以在配置选项中设置 multipleSelectionEnabled 属性的值。

$("#pivotGrid").jqxPivotGrid({
    source: myData,
    multipleSelectionEnabled: true
});

设置 multipleSelectionEnabled 为 true，将启用数据透视表的多选功能。在多选模式下，用户可以同时选中多个单元格，以便对它们进行批量操作。

示例

以下是一个简单的例子，展示了如何使用 jQWidgets jqxPivotGrid 插件来创建一个具有多选功能的数据透视表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>jQWidgets PivotGrid - Multiple Selection Example</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // sample data
            var sales_data = [
                { Salesperson: 'John', Region: 'North', Product: 'Widgets', Sales: 100 },
                { Salesperson: 'Jane', Region: 'North', Product: 'Widgets', Sales: 200 },
                { Salesperson: 'John', Region: 'North', Product: 'Gizmos', Sales: 300 },
                { Salesperson: 'Jane', Region: 'North', Product: 'Gizmos', Sales: 400 },
                { Salesperson: 'John', Region: 'South', Product: 'Widgets', Sales: 500 },
                { Salesperson: 'Jane', Region: 'South', Product: 'Widgets', Sales: 600 },
                { Salesperson: 'John', Region: 'South', Product: 'Gizmos', Sales: 700 },
                { Salesperson: 'Jane', Region: 'South', Product: 'Gizmos', Sales: 800 }
            ];

            // create the pivot grid
            $("#pivotGrid").jqxPivotGrid({
                source: sales_data,
                width: 600,
                height: 400,
                showFilterIcons: true,
                multipleSelectionEnabled: true,
                pivot: {
                    // configure pivot table fields
                    rows: [{ dataField: 'Salesperson' }],
                    columns: [{ dataField: 'Product' }],
                    values: [{
                        dataField: 'Sales',
                        summaryType: 'sum'
                    }]
                }
            });

            // create the pivot grid's toolbar
            $("#toolbar").jqxToolBar({
                theme: 'jqwidgets-dark',
                width: '100%',
                height: 40,
                tools: [
                    { type: 'button', label: 'Delete Selected', tooltip: 'Delete Selected Rows', hidden: false },
                    { type: 'button', label: 'Save', tooltip: 'Save Changes', hidden: false }
                ]
            });

            // bind delete button click event
            $("#toolbar").on('click', function (event) {
                var clicked_tool = event.args.tool;

                if (clicked_tool.label === "Delete Selected") {
                    var pivot_grid = $("#pivotGrid").jqxPivotGrid('getInstance');
                    var selection = pivot_grid.getCellsSelection();
                    var rows_to_delete = [];

                    for (var r = 0; r < selection.length; r++) {
                        var range = selection[r].range;

                        for (var i = range.topLeft.row; i <= range.bottomRight.row; i++) {
                            var row = pivot_grid.getRow(i);
                            if (row != null && row.summary != null) {
                                rows_to_delete.push(row.summary);
                            }
                        }
                    }

                    for (var d = 0; d < rows_to_delete.length; d++) {
                        pivot_grid.removeRow(rows_to_delete[d]);
                    }
                }
            });

            // bind save button click event
            $("#toolbar").on('click', function (event) {
                var clicked_tool = event.args.tool;

                if (clicked_tool.label === "Save") {
                    var pivot_grid = $("#pivotGrid").jqxPivotGrid('getInstance');
                    pivot_grid.refreshPivotData();
                }
            });
        });
    </script>
</head>
<body>
    <div id="toolbar"></div>
    <div id="pivotGrid"></div>
</body>
</html>

在本例中，创建了一个包含多个数据行和列的数据透视表，展示了每个销售人员在每个区域内销售的小部件和小工具的销售额。启用了多选功能，并增加了两个工具条按钮，用于删除选中的数据行和保存更改。

##总结

jQWidgets jqxPivotGrid 是一个功能强大的 jQuery 插件，可以用于展示和分析多维数据。multipleSelectionEnabled 属性是 jqxPivotGrid 的一个选项，用于控制是否启用数据透视表的多选功能。在多选模式下，用户可以选择多个单元格以执行批量操作。