jQWidgets jqxPivotGrid refresh() 方法(1)

📌 相关文章

📜 jQWidgets jqxPivotGrid refresh() 方法(1)

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

jQWidgets jqxPivotGrid refresh() 方法

简介

jqxPivotGrid是jQWidgets中的一个插件，展示数据作为单个表中的多维数据集，用于数据分析和业务智能。refresh()方法是用来重新加载数据并刷新jqxPivotGrid控件的方法。

语法

$('#pivotGrid').jqxPivotGrid('refresh');

参数

无

示例

下面是一个简单的示例，通过点击按钮重新加载数据并刷新jqxPivotGrid控件：

<script type="text/javascript">
    $(document).ready(function () {
        // 从服务器获取数据
        var sampleData = [
            { Departmenet: "Sales", Employee: "John", Product: "Widget", Quantity: 10, Amount: 100 },
            { Departmenet: "Sales", Employee: "John", Product: "Gadget", Quantity: 3, Amount: 50 },
            { Departmenet: "Sales", Employee: "Sam", Product: "Widget", Quantity: 5, Amount: 70 },
            { Departmenet: "Sales", Employee: "Sam", Product: "Gadget", Quantity: 6, Amount: 80 },
            { Departmenet: "Marketing", Employee: "Julie", Product: "Widget", Quantity: 7, Amount: 90 },
            { Departmenet: "Marketing", Employee: "Julie", Product: "Gadget", Quantity: 4, Amount: 60 },
            { Departmenet: "Marketing", Employee: "Bob", Product: "Widget", Quantity: 3, Amount: 45 },
            { Departmenet: "Marketing", Employee: "Bob", Product: "Gadget", Quantity: 6, Amount: 75 }
        ];
        // 初始化jqxPivotGrid控件
        $("#pivotGrid").jqxPivotGrid({
            source: sampleData,
            // 在列上显示部门，员工和产品
            columns: [{ datafield: 'Departmenet', width: 100 }, { datafield: 'Employee', width: 100 }, { datafield: 'Product', width: 100 }],
            // 按相同的列组合加和数量和金额
            datafields: [
                { name: 'Quantity', type: 'number', summary: 'sum' },
                { name: 'Amount', type: 'number', summary: 'sum' }
            ],
            // 图表的样式
            showfiltercolumnbackground: false,
            showverticalgridlines: false,
            showhorizontalgridlines: true,
            showtotals: true,
            showtotalsrows: true,
            showsortmenuitems: false
        });
        // 点击按钮重新加载数据
        $('#refreshBtn').on('click', function (event) {
            var newData = [
                { Departmenet: "Sales", Employee: "John", Product: "Widget", Quantity: 5, Amount: 50 },
                { Departmenet: "Sales", Employee: "John", Product: "Gadget", Quantity: 6, Amount: 80 },
                { Departmenet: "Sales", Employee: "Sam", Product: "Widget", Quantity: 7, Amount: 90 },
                { Departmenet: "Sales", Employee: "Sam", Product: "Gadget", Quantity: 8, Amount: 100 },
                { Departmenet: "Marketing", Employee: "Julie", Product: "Widget", Quantity: 3, Amount: 45 },
                { Departmenet: "Marketing", Employee: "Julie", Product: "Gadget", Quantity: 4, Amount: 60 },
                { Departmenet: "Marketing", Employee: "Bob", Product: "Widget", Quantity: 5, Amount: 75 },
                { Departmenet: "Marketing", Employee: "Bob", Product: "Gadget", Quantity: 6, Amount: 90 }
            ];
            // 重新设置数据源
            $('#pivotGrid').jqxPivotGrid({ source: newData });
            // 刷新控件
            $('#pivotGrid').jqxPivotGrid('refresh');
        });
    });
</script>
<body>
    <input type="button" id="refreshBtn" value="Refresh" />
    <div id="pivotGrid"></div>
</body>

结论

jqxPivotGrid是一个非常强大的控件，可以帮助你展示和分析多维数据。refresh()方法是一个非常有用的方法，它让我们可以轻松地重新加载数据和刷新控件。当你需要修改数据时，这个方法是非常有用的。