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

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

我使用默认filter初始化网格，但我无法弄清楚如何擦除所有行的网格，并重新填充新数组。 我正在尝试dataView，但在阅读了一些post后，这似乎不是答案。 我发现官方的例子-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: '#APPLICATION.site_prefix#/_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("#APPLICATION.site_prefix#/_global/ajax/ajax_handlers.cfm",{ dataType : "json", complete: function(xhr){ update_data = eval(xhr.responseText); updateGridView(); } }) } 

只需调用grid_refresh（）函数即可。

Answer 2

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

然后我给自己做了一个带有onclick事件的按钮，看起来像这样的onclick=populateMyGrid()作为一个刷新按钮（它实际上是一个重新加载图标，使其更好），该事件将调用我的函数通过$.getJSON()重新加载数据$.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: '#APPLICATION.site_prefix#/_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(); }