Pagination 如何定期更新分页的dgrid_Pagination_Auto Update_Dgrid

Pagination 如何定期更新分页的dgrid

pagination

Pagination 如何定期更新分页的dgrid,pagination,auto-update,dgrid,Pagination,Auto Update,Dgrid,我试图使用dgrid和请求数据存储的派生工具定期显示和刷新一些服务器数据。数据分页，需要定期更新。作为第一种简单的方法，我尝试使用setInterval调用Dgrid.refresh（）。然而，这会导致网格行的完全重建，从而在视觉上产生闪烁效果。使用Trackable to the store没有帮助。有人能告诉我如何刷新dgrid中只更新更改的行的行吗下面是我的代码，再现了这个问题： <!DOCTYPE html> <html> <head>

我试图使用dgrid和请求数据存储的派生工具定期显示和刷新一些服务器数据。数据分页，需要定期更新。作为第一种简单的方法，我尝试使用setInterval调用Dgrid.refresh（）。然而，这会导致网格行的完全重建，从而在视觉上产生闪烁效果。使用Trackable to the store没有帮助。有人能告诉我如何刷新dgrid中只更新更改的行的行吗

下面是我的代码，再现了这个问题：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DGrid flickering on slow updates</title>
        <style>
            @import "./dojo-release-1.11.1/dojo/resources/dojo.css";
            @import "./dojo-release-1.11.1/dijit/themes/claro/claro.css";
            @import "./META-INF/resources/webjars/dgrid/1.0.0/css/dgrid.css";
            @import "./META-INF/resources/webjars/dgrid/1.0.0/css/skins/claro.css";

            html, body {
                padding: 10px;
                width: 100%;
                height: 100%;
            }
        </style>
        <script>
            var dojoConfig = {
            async:true,
            baseUrl: "./",
            packages:[
                       { name:"dojo", location:"dojo-release-1.11.1/dojo" },
                       { name:"dijit", location:"dojo-release-1.11.1/dijit" },
                       { name:"dgrid", location:"META-INF/resources/webjars/dgrid/1.0.0" },
                       { name:"dstore", location:"META-INF/resources/webjars/dstore/1.1.1" }
                     ]
            };
        </script>
        <script src="dojo-release-1.11.1/dojo/dojo.js"></script>
        <script>
    require(["dojo/parser",
         "dojo/dom",
         "dojo/_base/declare",
         "dstore/Store",
         "dstore/Trackable",
         "dstore/Cache",
         "dstore/Memory",
         "dstore/QueryResults",
         "dojo/Deferred",
         "dgrid/Grid",
         "dgrid/Keyboard",
         "dgrid/Selection",
         "dgrid/extensions/Pagination",
         "dojo/domReady!"],
        function(parser, dom, declare, Store, Trackable, Cache, Memory, QueryResults, Deferred, Grid, Keyboard, Selection, Pagination)
        {
            parser.parse();
            console.log("Parsed");
            var makeSlowRequest =   
                function(kwArgs)
                {
                    var responseDeferred = new Deferred();
                    var responsePromise = responseDeferred.promise;
                    // resolve promise in 2 seconds to simulate slow network connection
                    setTimeout(function () 
                               {
                                    console.log("Generating response");
                                    var data = {items: [], total: 100};
                                    kwArgs = kwArgs || {start:0, end:100};
                                    for(var i = kwArgs.start; i < kwArgs.end; i++)
                                    {
                                         data.items.push({id: "id-" + i,
                                                          name: "test-" + i, 
                                                          value: Math.floor((Math.random() * 10) + kwArgs.start)
                                                         });
                                    }
                                    responseDeferred.resolve(data);
                                }, 2000);
                     return new QueryResults(responsePromise.then(function (data) { return data.items; }),
                                             { totalLength: responsePromise.then(function (data) { return data.total;}) });

                };

            var SlowStore = declare("SlowStore",
                                    [Store, Trackable], 
                                    { fetch: function (kwArgs) { return makeSlowRequest(kwArgs); },
                                      fetchRange: function (kwArgs) { return makeSlowRequest(kwArgs); }
                                    });


            var store = new SlowStore();
            var TestGrid = declare([Grid, Keyboard, Selection, Pagination]);
            var grid =  new TestGrid({
                                        collection: store,
                                        columns: {name: "Name", value: "Value"},
                                        rowsPerPage: 10,
                                        selectionMode: 'single',
                                        cellNavigation: false,
                                        className: 'dgrid-autoheight',
                                        pageSizeOptions: [10, 20],
                                        adjustLastColumn: true
                                    }, dom.byId("grid"));

            grid.startup();


            // update grid every 5 seconds
            var timer = setInterval(function(){console.log("Refreshing grid"); grid.refresh();}, 5000);

        });
        </script>
    </head>
    <body class="claro">
        <div id="grid"></div>
    </body>
</html>

var store = Cache.create(new SlowStore(), {
              cachingStore: new (Memory.createSubclass(Trackable))()
            });