Slickgrid - 替换AJAX源中的所有网格数据

Question

在我正在构建的应用程序中,我有一个数据网格和一些选择框,用户可以在其中设置过滤器,并在选择时进行AJAX调用以从服务器获取新的数据数组.

我使用默认过滤器初始化网格,但我无法弄清楚如何擦除所有行的网格,并重新填充新数组.我正在尝试dataView,但在阅读了一些帖子后,这似乎不是答案.我发现官方的例子-6(ajax例子)令人困惑.

我希望在加载新数据时保留列排序和列重新排序.

这是我目前只有正确初始化的js:

$(function(){

    //update the grid when select values change
    $('#qol_options :input').change(function(){
        update_grid_data();
    });


    init_grid = function(){

        // set grid options 
        var grid;
        var columns = [
            {id: "village", name: "Village", field: "village", sortable: true},
            {id: "setting", name: "Setting", field: "setting", sortable: true},
            {id: "hood", name: "N.hood", field: "hood", sortable: true},
            {id: "timespan", name: "Time", field: "timespan", sortable: true},
            {id: "count_0", name: "0", field: "count_0", sortable: true, width: 10},
            {id: "count_1", name: "1", field: "count_1", sortable: true, width: 10},
            {id: "count_2", name: "2", field: "count_2", sortable: true, width: 10},
            {id: "count_3", name: "3", field: "count_3", sortable: true, width: 10},
            {id: "count_4", name: "4", field: "count_4", sortable: true, width: 10},
            {id: "count_6", name: "6", field: "count_6", sortable: true, width: 10},
            {id: "count_7", name: "7", field: "count_7", sortable: true, width: 10},
            {id: "count_8", name: "8", field: "count_8", sortable: true, width: 10},
            {id: "count_total", name: "Total", field: "count_total", sortable: true},
            {id: "pos_perc", name: "%", field: "pos_perc", sortable: true},
            {id: "decile", name: "Decile", field: "decile", sortable: true},
        ];

        var options = {
            enableCellNavigation: true,
            enableColumnReorder: true,
            multiColumnSort: true
        };

        //get default grid data (all)
        var grid_data = [{'village':0, 'setting':0, 'hood':0, 'timespan':0, 'count_0':0, 'count_1':0, 'count_2':0, 'count_3':0, 'count_4':0, 'count_6':0, 'count_7':0, 'count_8':0, 'count_total':0, 'pos_perc':0, 'decile':0}]; 

        //create the grid instance
        this_grid = new Slick.Grid("#data_table_container", grid_data, columns, options);

        update_grid_data();
    }


    update_grid_data = function(){
        var settingID = $('#settingID').val();
        var villageID = $('#villageID').val();
        var hoodID = $('#hoodID').val();

        //init the grid
        $.ajax({
            type: "POST",
            url: '<cfoutput>#APPLICATION.site_prefix#</cfoutput>/_global/ajax/ajax_handlers.cfm',
            data: {'action': 'get_qol_report_data', 'villageID': villageID, 'settingID': settingID, 'hoodID': hoodID, 'itemID': 0, 'categoryID': 0},
            dataType: 'json',

            success: function(data) {
                push_data_to_grid(data);
            }
        });
    }


    push_data_to_grid = function(data){
        this_grid.setData(data);
        this_grid.render();
    }

    //execute the grid init 
    init_grid();
});

Answer 1

我自己实现了类似的东西,这就是我做的.我确实dataview每次都会使用掉掉的东西以及grid被覆盖的物体.我没有使用你的代码,而是我将向你展示我使用的模板,我实际上调用相同的函数来加载和重新加载但只是确保empty()在重新加载之前退出网格,请参阅第1行代码:

<div id="myGrid" style="width:100%;height:680px;"></div>

然后我给自己做了一个按钮,其中的onclick事件看起来像这样onclick=populateMyGrid()一个刷新按钮(它实际上是一个重新加载图标,使其更好),该事件将调用我的函数通过$.getJSON()jQuery函数重新加载数据,请参阅以下代码:

// Display some Market Indexes on a bar on top of the Grid 
function populateMyGrid() {
    // empty out the Grid before refreshing the data
    $('#myGrid').empty();

    // columns & options definition....
    columns = [ 
        { id: "village", ............
    ];
    options = {
       enableCellNavigation: true,              
        editable: true,
        ............
    };

    ajaxURL = 'myPhpAjaxFileToPullData.php?action=getdata';

    $.getJSON(ajaxURL, function (ServerResponse) {
        dataView = new Slick.Data.DataView();
        grid = new Slick.Grid('#myGrid', dataView, columns, options);
        ............

        // initialize the model after all the events have been hooked up
        dataView.beginUpdate();
        dataView.setItems(ServerResponse.data);
        dataView.endUpdate();

        // Refresh the data render, if user only clicked on the refresh button instead of refreshing the whole page from browser 
        grid.updateRowCount();
        grid.render();
    }); // end of getJSON        
} // end of populateMyGrid

从这段代码中,它的重要部分是首先清空网​​格,然后清空最后两行代码,用新数据刷新网格,并确保最后重新渲染.这就是我工作的方式,就像一个魅力......哦,我还会显示一个显示最后刷新日期+时间的文本,因此对于用户来说,数据的年龄更为明显!

即使它不是你的代码示例,你应该明白...希望它有帮助:)

此外,如果你想通过某种过滤重新填充网格,你可以通过它发送过滤ajaxURL,$.getJSON或者你也可以用a替换它,$.post并通过data属性发送它,如果你这样做,然后移动你的所有代码进入success函数(或函数调用).这是替换$.getJSON呼叫的可能解决方案......但请注意我没有尝试但它应该工作:

//init the grid
$.ajax({
    type: "POST",
    url: '<cfoutput>#APPLICATION.site_prefix#</cfoutput>/_global/ajax/ajax_handlers.cfm',
    data: {'action': 'get_qol_report_data', 'villageID': villageID, 'settingID': settingID, 'hoodID': hoodID, 'itemID': 0, 'categoryID': 0},
    dataType: 'json',
    success : getData
});

function getData() {
    dataView = new Slick.Data.DataView();
    grid = new Slick.Grid('#myGrid', dataView, columns, options);
    ............

    // initialize the model after all the events have been hooked up
    dataView.beginUpdate();
    dataView.setItems(ServerResponse.data);
    dataView.endUpdate();

    // Refresh the data render, if user only clicked on the refresh button instead of refreshing the whole page from browser 
    grid.updateRowCount();
    grid.render();
}

Answer 2

我遇到了同样的问题.请尝试以下代码.

function updateGridView(){
  data_view.beginUpdate();
  data_view.setItems(update_data);
  data_view.endUpdate();
  data_view.refresh();
  grid.invalidate();
}
function grid_refresh(){
$.ajax("<cfoutput>#APPLICATION.site_prefix#</cfoutput>/_global/ajax/ajax_handlers.cfm",{
  dataType : "json",
  complete: function(xhr){
      update_data = eval(xhr.responseText);
      updateGridView();
  }
})
}

只需调用grid_refresh()函数即可.