Slickgrid - 从AJAX源更换所有网格数据 [英] Slickgrid - Replacing all grid data from AJAX source
本文介绍了Slickgrid - 从AJAX源更换所有网格数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在应用我建设，我有一个数据网格，一些选择框，用户可以设置过滤器，并在选择它使一个AJAX调用从服务器获取数据的一个新的数组。
我有网格初始化与缺省过滤器，但我无法弄清楚如何消灭所有行的网格，并重新填充一个新的阵列。我试图数据视图，但看了一些帖子后，这似乎不是答案。我觉得官方的例子-6（例如AJAX）混淆。
我想列排序和列重新排序将保留在新的数据加载。
下面是JS我目前只有正确初始化：
$（函数（）{
//更新网格时选择值变化
$（'＃qol_options：输入'）。改变（函数（）{
update_grid_data（）;
}）;
init_grid =功能（）{
//设置网格选项
VAR网格;
VAR列= [
{ID：村，名村官，场：村，排序：真}，
{ID：设置，名称：设置，现场设置，排序：真}，
{ID：油烟机，名称：N.hood，场：油烟机，排序：真}，
{ID：时间跨度，名称：时间，现场：时间跨度，排序：真}，
{ID：COUNT_0，名称：0，现场COUNT_0，排序：真，宽度：10}，
{ID：_1，名称：1，字段：_1，排序：真，宽度：10}，
{ID：_2，名称：2，字段：_2，排序：真，宽度：10}，
{ID：count_3，名称：3，字段：count_3，排序：真，宽度：10}，
{ID：count_4，名称：4字段：count_4，排序：真，宽度：10}，
{ID：count_6，名称：6，现场count_6，排序：真，宽度：10}，
{ID：count_7，名称：7，现场count_7，排序：真，宽度：10}，
{ID：count_8，名称：8，现场count_8，排序：真，宽度：10}，
{ID：count_total，名称：总，现场count_total，排序：真}，
{ID：pos_perc，名称：％，现场pos_perc，排序：真}，
{ID：等分，名称：等分，现场等分，排序：真}，
]。
VAR的选择= {
enableCellNavigation：真正的，
enableColumnReorder：真正的，
multiColumnSort：真
};
//获取默认的栅格数据（全部）
VAR grid_data = [{'村'：0，设置：0，罩：0，时间跨度：0，COUNT_0：0，_1：0，_2：0，count_3 ：0，'count_4'：0,1'count_6'：0,1'count_7'：0,1'count_8'：0,1'count_total'：0,1'pos_perc'：0,1'等分'：0}];
//创建网格实例
this_grid =新Slick.Grid（＃data_table_container，grid_data，列选项）;
update_grid_data（）;
}
update_grid_data =功能（）{
VAR settingID = $（'＃settingID）VAL（）。
。VAR villageID = $（'＃villageID）VAL（）;
VAR hoodID = $（'＃hoodID）VAL（）。
//初始化网格
$阿贾克斯（{
键入：POST，
网址：'＆LT; CFOUTPUT＆GT;＃APPLICATION.site_ preFIX＃＆LT; / CFOUTPUT＆GT; / _全球/ AJAX / ajax_handlers.cfm'，
数据：{行动：get_qol_report_data'，'villageID：villageID，settingID：settingID，hoodID：hoodID，ITEMID：0，类别ID：0}，
数据类型：JSON，
成功：功能（数据）{
push_data_to_grid（数据）;
}
}）;
}
push_data_to_grid =功能（数据）{
this_grid.setData（数据）;
this_grid.render（）;
}
//执行网格初始化
init_grid（）;
}）;
解决方案
我面临同样的问题。请尝试以下code。
函数updateGridView（）{
data_view.beginUpdate（）;
data_view.setItems（update_data）;
data_view.endUpdate（）;
data_view.refresh（）;
grid.invalidate（）;
}
功能grid_refresh（）{
$.ajax("<cfoutput>#APPLICATION.site_$p$pfix#</cfoutput>/_global/ajax/ajax_handlers.cfm",{
数据类型：JSON，
完成：功能（XHR）{
update_data =的eval（xhr.responseText）;
updateGridView（）;
}
}）
}
只要打电话给grid_refresh（）函数。
In the app I'm building, I have a data grid and some select boxes where the user can set filters and upon a selection it makes an AJAX call to get a new array of data from the server.
I have the grid initializing with default filters, but I can't figure out how to wipe the grid of all rows, and re-populate with a fresh array. I was trying dataView, but after reading some posts this seems to not be the answer. I find the official example-6 (ajax example) confusing.
I would like column sorting and column re-ordering to be retained when new data is loaded.
Here is the js I currently have which only initializes properly:
$(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();
});
解决方案
I've faced the same problem. Please, try the below code.
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();
}
})
}
Just call the grid_refresh() function.
这篇关于Slickgrid - 从AJAX源更换所有网格数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
