移动中的剑道网格刷新问题

Posted 2023-05-07

【中文标题】移动中的剑道网格刷新问题

【英文标题】：Kendo grid refresh issue in mobile

【发布时间】：2014-08-25 21:54:56

【问题描述】：

我每 10 秒刷新一次剑道网格，我使用了以下代码并使用了 kendo.all.min.js

$(document).ready(function () 
            loadData();
            intervalManager(true, TableStatus, 10000);
        );
        var TableStatus = function () 
            loadData();
        
        var refreshorderplacedgrid;
        function intervalManager(flag, animate, time) 
            if (flag)
                refreshorderplacedgrid = setInterval(animate, time);
            else
                clearInterval(refreshorderplacedgrid);
        
        function loadData() 
            var grid = $("#grid").kendoGrid(
                dataSource: 
                    data: [
                             ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true ,
                             ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true],
                    schema: 
                        model: 
                            fields: 
                                FirstName:  type: "string" ,
                                LastName:  type: "string" 
                            
                        
                    ,
                    sort: 
                        field: "FirstName",
                        dir: "asc"
                    ,
                    pageSize: 10
                ,
                scrollable: true,
                sortable: true,
                selectable: true,
                columns: [
                
                    field: "FirstName",
                    title: "First Name"
                ,
                
                    field: "LastName",
                    title: "Last Name"
                ,
                 template: kendo.template($("#isCancel-template").html()) 
            ]
            ).data("kendoGrid");
        

这段代码给我的输出类似于系统 chrome 中的以下屏幕截图，

但在移动 [所有设备]

它附加旧网格，而不是像下面的屏幕截图那样重新绑定

我不知道这里有什么问题，我也用谷歌搜索并使用了$("#grid").data("kendoGrid").refresh();这个代码。什么都没发生，任何帮助都将非常感激。

谢谢， 古纳

【问题讨论】：

您的数据源将来会是动态的（即从远程服务读取）还是来自本地源（即像上面那样设置数据源）？跨度>

顺便说一句，您目前在loadData 中所做的事情是一遍又一遍地重新初始化网格，这是错误的，并且会给您带来不可预测的行为。

我的datasource 每秒从服务器动态加载，这就是我面临这个问题的原因。

【参考方案1】：

@gitsitgo 的评论，我按照以下方式更改了代码，以避免重新初始化网格，现在它工作正常。

var myDataSource = new kendo.data.DataSource(
        data: [
                         ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true ,
                         ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true ,
                         ID: '1003', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true],
        schema: 
            model: 
                fields: 
                    FirstName:  type: "string" ,
                    LastName:  type: "string" 
                
            
        ,
        sort: 
            field: "FirstName",
            dir: "asc"
        ,
        pageSize: 10
    );

    $(document).ready(function () 
        initGrid();
        loadData();
        intervalManager(true, TableStatus, 10000);            
    );
    var TableStatus = function () 
        loadData();
    
    var refreshorderplacedgrid;
    function intervalManager(flag, animate, time) 
        if (flag)
            refreshorderplacedgrid = setInterval(animate, time);
        else
            clearInterval(refreshorderplacedgrid);
    
    function loadData() 
        $("#grid").data("kendoGrid").setDataSource(myDataSource);
        $("#grid").data("kendoGrid").refresh();
    
    function initGrid() 
        var grid = $("#grid").kendoGrid(
            dataSource: myDataSource,
            scrollable: true,
            sortable: true,
            selectable: true,
            columns: [
            
                field: "FirstName",
                title: "First Name"
            ,
            
                field: "LastName",
                title: "Last Name"
            ,
             template: kendo.template($("#isCancel-template").html()) 
        ]
        ).data("kendoGrid");
    

谢谢， 古纳

【讨论】：

对于数据源，如果您使用传输选项（读取/更新/创建/销毁），您还可以使用$("#grid").data("kendoGrid").dataSource.read(); 刷新或重新读取数据。