jQWidgets jqxGrid refresh() 方法(1)

📌 相关文章

📜 jQWidgets jqxGrid refresh() 方法(1)

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

jQWidgets jqxGrid refresh() 方法介绍

jQWidgets 是一款商业级别的 Web UI 组件库，其中包含了大量常用的 UI 组件，如 Grid、TreeGrid、Chart、Button 等等。jqxGrid 是其中的一个重要组件，提供了丰富的数据展示和操作功能，如排序、筛选、分页、编辑、导出等。

在使用 jqxGrid 时，经常需要对其数据进行更新和刷新。这时就可以使用其提供的 refresh() 方法来实现。本篇将介绍 jqxGrid refresh() 方法的用法和注意事项。

方法说明

refresh() 方法用于重新加载 jqxGrid 中的数据，包括表头、内容和分页等。其语法如下：

$('#grid').jqxGrid('refresh');

其中，#grid 是 jqxGrid 组件的 ID。该方法不带参数，只需在调用时添加即可。

使用示例

下面是一个简单的使用示例，用于演示如何在 jqxGrid 中使用 refresh() 方法重新加载数据。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxGrid refresh() 方法示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/styles/jqx.base.css">
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxdata.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxbuttons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxscrollbar.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxmenu.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxgrid.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxgrid.pager.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxgrid.sort.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxgrid.filter.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxgrid.edit.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxgrid.export.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxgrid.selection.js"></script>
    <script>
        $(document).ready(function () {
            // 构造数据源
            var data = [
                {id: 1, name: '张三', age: 23, address: '北京'},
                {id: 2, name: '李四', age: 24, address: '上海'},
                {id: 3, name: '王五', age: 25, address: '广州'},
                {id: 4, name: '赵六', age: 26, address: '深圳'}
            ];
            var source = {
                datatype: "array",
                datafields: [
                    {name: 'id', type: 'number'},
                    {name: 'name', type: 'string'},
                    {name: 'age', type: 'number'},
                    {name: 'address', type: 'string'}
                ],
                localdata: data
            };
            // 构造数据适配器
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                    $("#grid").jqxGrid('refresh');
                }
            });
            // 初始化 jqxGrid
            $("#grid").jqxGrid({
                width: 600,
                height: 300,
                source: dataAdapter,
                pageable: true,
                sortable: true,
                columnsResize: true,
                editable: true,
                selectionmode: 'single',
                columns: [
                    {text: 'ID', datafield: 'id', width: 50},
                    {text: '姓名', datafield: 'name', width: 100},
                    {text: '年龄', datafield: 'age', width: 50},
                    {text: '地址', datafield: 'address', width: 200},
                ]
            });
        });
    </script>
</head>
<body>
<div id="grid"></div>
</body>
</html>

在上述代码中，我们创建了一个包含简单数据源的 jqxGrid 组件，并在数据加载完成时调用 refresh() 方法重新加载数据。

注意事项

refresh() 方法必须在 jqxGrid 组件初始化完成后才能调用。
refresh() 方法不会触发 dataBinding 和 dataBound 事件。
refresh() 方法仅适用于本地数据源。如果使用的是远程数据源，应该直接通过设置 source 属性重新加载数据。
对于使用分页的 jqxGrid，重新加载数据后当前页码保持不变，但应该调用 pagerGoToPage 方法来重新计算页数和更新分页控件。

总结

本篇介绍了 jQWidgets jqxGrid refresh() 方法的用法和注意事项。refresh() 方法是一个重要的 jqxGrid API，可用于实现组件中数据的刷新和更新，提高用户体验。在使用 refresh() 方法时，应该注意遵循相关的规范和最佳实践，以获得最佳的效果和性能。