如何通过jqgrid中的ajax调用来加载json数据

时间:2013-07-11 09:20:38

标签: ajax jqgrid

通过ajax从服务器获取的呼叫数据,但问题是该响应 应加载jqgrid但不加载。在var dataAjax = jData.responseText;dataAjax从服务器接收数据。

那是错的。请帮忙

$(document).ready(function(){

    var resData = "";
    $(".btnLoad").click((function(){
        resData = $.ajax({
               type : "POST",
               url: "/AccountUI/DataFlow/AccountDetails.html",
               dataType: "json",
               success: functioin(jData){
                   var dataAjax  = jData.responseText;         
                    return dataAjax;
               }

            });
    });

    var gridData = new Array();
    gridData = resData;     
    jQuery("#ajgrid").jqGrid({ 
            datatype: "json", 
            height: 250, 
            colNames:['AccID','AccName', 'AccBranch'], 
            colModel:[ {name:'AccID',index:'AccID', width:60, sorttype:"int"}, 
                {name:'AccName',index:'AccName', width:90}, 
                {name:'AccBranch',index:'AccBranch', width:100}             
            ], 
            multiselect : true, 
            caption : "Account Grid" 
    }); 


    for(var i=0;i<=gridData.length;i++) 
       jQuery("#ajgrid").jqGrid('addRowData',i+1,gridData[i]);

});

1 个答案:

答案 0 :(得分:1)

datatype: "json"的含义存在误解。它与url选项一起使用。 jqGrid为您发出Ajax请求,并从网格中的服务器数据返回填充。如果您未实现服务器端分页,则应在网格中添加loadonce: true选项。

所以我希望您需要的是:1)删除手动$.ajax电话; 2)使用addRowData删除填充网格的循环; 3)将以下选项添加到jqGrid:

url: "/AccountUI/DataFlow/AccountDetails.html",
mtype: "POST",
loadonce: true,
gridview: true,
autoencode: true

我建议您另外将height: 250替换为height: "auto"。根据返回数据的确切格式,您可能需要添加jsonReader以及帮助jqGrid正确解释服务器响应的属性。可能jqGrid可以自动检测返回数据的格式。