如何使用.each()循环发送连续Ajax Post以保存网格状态

时间:2014-04-29 09:46:43

标签: jquery ajax kendo-ui kendo-grid kendo-asp.net-mvc

我有这个脚本,它允许我执行ajax帖子,它工作正常,但问题是,有时它只保存网格数据(状态)...任何代码,帮助非常感谢     

window.onload = function () {
    GRIDSETTINGS = new SFCgrid();
};
$("#save").click(function () {
    GRIDSETTINGS.save("AGENT")
});
$("#load").click(function () {
    GRIDSETTINGS.save_multiple_grid();
});
//*****************Grid Column Settings**************//

var SFCgrid = function () { };

SFCgrid.prototype = function () {
    var save = function (grid_nm) {
        var grid = $("#" + grid_nm).data("kendoGrid");
        //this gets the datasource properties
        var dataSource = grid.dataSource;

        var page_nm, grid_nm;
        page_nm = $('#page_nm').val();
        grid_nm = $('#grid_nm').val();

        //this gets the datasource properties such as filters, columns including width, paging, sorting and grouping into serialized json
        //add {} on state.. See below
        var state = grid.columns;
        //page: dataSource.page(),          //uncomment this if you want to save page 
        //pageSize: dataSource.pageSize(),  //uncomment this if you want to save pagesize
        //sort: dataSource.sort(),          //uncomment this if you want to save sorting
        //filter: dataSource.filter(),      //uncomment this if you want to save filters which applies filtered data 
        //group: dataSource.group()         //uncomment this if you want to save grouping which outputs grouped data 

        //this pass the data in the session and save it in the controller
        $.ajax({
            url: "/Home/Save",
            data: {
                data: JSON.stringify(state), grid_nm: grid_nm, page_nm: page_nm      //multiple data being passed here
            }

        });
    },
        save_multiple_grid = function () {      //save all grid settings in one ajax call in multiple grid using the each loop
            var i = 0;
            $("[data-role='grid']").each(function () {
                var grid_nm = $(this).attr('id');
                var grid = $("#" + grid_nm).data("kendoGrid");
                //this gets the datasource properties
                var dataSource = grid.dataSource;

                var page_nm, grid_nm;
                page_nm = $('#page_nm').val();


                //this gets the datasource properties such as filters, columns including width, paging, sorting and grouping into serialized json
                //add {} on state.. See below
                var state = grid.columns;

                //push a deferred object onto the `XHRs` array //tricky part here still unsure how wil this work
               $.ajax({
                    url: "/Home/Save",
                    data: {
                        data: JSON.stringify(state), grid_nm: grid_nm, page_nm: page_nm      //multiple data being passed here
                    },
                    success: function (response) {
                        if (response != '') {
                            alert(response);
                        };
                    }
               });
               i++;

            });

        };



    return {

        save: save,
        save_multiple_grid:save_multiple_grid
    };


}();

我怎么能确定每个网格设置都已保存,谢谢

1 个答案:

答案 0 :(得分:0)

您可以使用jQuery.when等待多个ajax调用完成:

$.when( $.ajax( { url: "/page1" } ), $.ajax( { url: "/page2.php" } ) )
 .then( myFunc, myFailure );

如果你不知道有多少个ajax请求,你可以将它们推入一个数组,然后通过apply方法调用jQuery。

var requests = [];
requests.push($.ajax({ url: "page1" });
requests.push($.ajax({ url: "page2" });
requests.push($.ajax({ url: "page3" });

$.when.apply(null, requests).then(success, failure);