如何将新记录添加到KendoUI DataSource组件

时间:2014-02-18 11:01:57

标签: javascript jquery json kendo-ui kendo-datasource

我的页面上有一个KendoUI DataSource,它从一个方法读取数据(IN 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);
                    });

test2:

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添加到数据源(在第一个脚本中),有什么办法吗?

1 个答案:

答案 0 :(得分:0)

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

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);
    }

通过这种方式,您可以实现所需的功能