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

Question

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

我使用默认过滤器初始化网格，但我不知道如何擦除所有行的网格，并使用新数组重新填充。我正在尝试 dataView，但在阅读了一些帖子后，这似乎不是答案。我发现官方的 example-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

我也遇到过同样的问题。请尝试以下代码。

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() 函数即可。

Answer 2

我自己实现了类似的东西，这就是我的做法。我确实使用了dataview，它每次都会被清除，grid 对象也会被覆盖。我没有使用您的代码，而是向您展示我使用的模板，我实际上调用了相同的函数来加载和重新加载，但只需确保在重新加载之前将empty() 移出网格，请参阅第一行代码：

<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

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

即使它不是您的代码示例，您也应该明白这个想法...希望它有所帮助:)

此外，如果您想使用某种过滤重新填充网格，您可以通过$.getJSON 的ajaxURL 发送过滤，或者您也可以将其替换为$.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();
}