Javascript 主干网：将数据从服务器获取到JQGrid

我有一个目前使用JQGrid的Web应用程序，但我正试图引入Backbone.js来改进代码组织。我试图做的是使用集合从服务器获取数据，然后将JSON信息添加到我定义的JQGrid中，但我无法让它工作。我的JQGrid定义如下：

var tareasHumanasTable = $("#grillaTH").jqGrid({
        datatype: 'local',
        height: 'auto',
        colNames:[ colNames...],
        colModel:[ colModel...]
}

window.TareaHumana = Backbone.Model.extend();

window.TareaHumanaCollection = Backbone.Collection.extend({
    model:  TareaHumana,
    url: "bandejaTareas/buscarTH"
});

我的模型和集合的定义如下：

var tareasHumanasTable = $("#grillaTH").jqGrid({
        datatype: 'local',
        height: 'auto',
        colNames:[ colNames...],
        colModel:[ colModel...]
}

window.TareaHumana = Backbone.Model.extend();

window.TareaHumanaCollection = Backbone.Collection.extend({
    model:  TareaHumana,
    url: "bandejaTareas/buscarTH"
});

我有一个按钮，单击该按钮可启动服务器通信。现在正在这样做：

$(function(){
    $("#botonBuscar").bind('click',function(){
        var tareaHumanaList = new TareaHumanaCollection();
        tareaHumanaList.fetch({data: $("#formBandejaTareas").serializeObject()});
        //alert("tareaHumanaList.toJSON(): " + tareaHumanaList.toJSON());
        tareaHumanaList.each(function(tareaHumana, i){
            //alert("tareaHumana.toJSON(): " + tareaHumana.toJSON());
            tareasHumanasTable.jqGrid('addRowData', (i + 1), tareaHumana.toJSON());
        });

---

那代码根本不起作用。使用Firebug，我验证了服务器是否以正确的格式发送数据，但代码不起作用。最奇怪的是，当我取消注释“alert（…）”行时，一切都开始工作。

关键是

fetch

是异步的。因此，如果您在

fetch

之后立即调用

each

，则可能不会填充您的集合。您应该使用

success

callback。例如，请看。

尝试使用datatype:jsonstring并在集合上创建一个format函数，以向jqgrid提供corect数据格式。

您几乎没有发布jqgrid代码和测试JSON数据。我自己不使用主干网，但您发布的jqGrid使用部分非常无效

addRowData

是填充网格最慢的方法。因为您根本没有填充它，所以问题可能出现在

tareaHumana.toJSON（）

中的数据中。数据必须与网格的

colModel

相对应，但正如我之前所写的那样，在循环中使用

addRowData

确实是个坏主意。你应该更好地描述你必须如何填写表格。无论如何，确实需要一些JSON响应和

colModel

的示例。这个问题与JSON解析无关，它只涉及从主干网异步获取。关于网格填充，我遵循以下建议：。你还有其他想法吗？

addowData

的用法特别糟糕。我将更改您引用为的演示。使用数据创建网格非常重要。如果创建网格，然后添加100行，则会看到在插入一行或更改页面上的一个元素时，将重新计算所有现有元素的位置。通过使用

gridview:true，data:mydata

创建网格，您可以通过一次操作创建包含全身内容的网格。您拥有的行越多，就会看到更多的差异。