javascript - 如何向 KendoUI 数据源组件添加新记录

Question

我的页面上有一个 KendoUI 数据源，它从方法读取数据(Json 格式)，我的脚本是:

 <script id="template" type="text/x-kendo-template">
            <tr>
                <td>#= ID #</td>
                <td>#= TITLE #</td>
                <td>#= DESC #</td>

            </tr>
        </script>

            <script>
                $(document).ready(function () {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var datas = function() {

                        var objects = [];
                        $.ajax({
                            type: "POST",
                            url: "./WebForm1.aspx/GetNoti",
                            data: {},
                            async: false,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success:
                                function(response) {

                                    for (var i = 0; i < response.d.length; i++) {

                                        objects.push({ 'ID': response.d[i].ID, 'TITLE': response.d[i].TITLE, 'DESC': response.d[i].DESC });

                                    }
                                },

                        });
                        return objects;
                    };                       

                    var dataSource = new kendo.data.DataSource({
                        data: datas(),
                        change: function () { // subscribe to the CHANGE event of the data source
                            $("#movies tbody").html(kendo.render(template, this.view())); // populate the table
                        }
                    });

                    dataSource.read();
                });
        </script>

我想要另一个由 setInterval 函数编写的脚本，它调用一个方法，为我们提供新添加到我的数据库中的新数据，并将其显示在我的 KendoUI 数据源中。

我之前尝试过这样:

 <script>
    $(document).ready(function () {
        $("#go").click(function () {
            setInterval(function () {
                var dataSource= new kendo.data.DataSource({
                    data=function ()
                {

                    $.ajax({
                        type: "POST",
                        url: "WebForm1.aspx/GetNewNoti",
                        data: '{}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(response) {

                            for (var i = 0; i < response.d.length; i++) {
                                dataSource.add({ 'ID': response.d[i].ID, 'TITLE': response.d[i].TITLE, 'DESC': response.d[i].DESC });
                            };
                        },
                    });

                    },
           });

            }, 8000);
        });
    });

</script>

有人可以帮助我吗？

编辑:我编辑第二个脚本，如下所示:

$("#go").click(function () {
                  setInterval(function () {test2(); }, 8000);
                    });

测试2:

function test2() {

                  var dataSource2 = new kendo.data.DataSource({
                       data: p(),
                       change: function () {
                       $("#movies tbody").html(kendo.render(template, this.view())); }

                      });
                   dataSource2.read();

                    }

我们有这样的 p() :

var p = function test() {
             var objects = [];
                 $.ajax({
                     type: "POST",
                     url: "./WebForm1.aspx/GetUnCheckNotification",
                     data: {},
                     async: false,
                     contentType: "application/json; charset=utf-8",
                     dataType: "json"
                     success: function(response) {
                                 for (var i = 0; i < response.d.length; i++) {
                                       objects.push({ 'ID': response.d[i].ID, 'TITLE':response.d[i].TITLE, 'DESC': response.d[i].DESC });

                                    }
                                },
                        });
                        return objects;

                    };

通过这种方法，我需要一种将 dataSource2 添加到数据源的方法(在第一个脚本中)，有什么办法吗？

Answer 1

创建一个函数来刷新网格，如下所示，并在网格创建后调用它:

function RefreshDatasource() {
        setInterval(function () {
          //Get the Existing datasource item's count    
          var existingCount=YourDataSource.view().length;

            // Below code refreshes the grid
            YourDataSource.read();

          //Get the new datasource item's count              
          var newCount=YourDataSource.view().length;
         if(newCount>existingCount)
         {
             //Show your message through the alert box;
         }
        }, refreshInterval);
    }

这样您就可以实现所需的功能