JQgrid不適用於本地數據

Question

我將數據發佈到cgi腳本並以json格式獲取響應。存儲到變量中並嘗試將其加載到jqgrid中。但Jqgrid不會加載本地數據，甚至不會顯示錶格。這裏是jquery腳本：

$(document).ready(function(){ 
$("#blastform").submit(function(){ 
$('#blast').hide(); 
$('#blastresults').show(); 
    $("#datatable").show(); 
    var thistarget = this.target; 
    jQuery.ajax({ 
     data: $(this).serialize(), 
     url: this.action, 
     type: this.method, 
    dataType: 'html', 
     error: function() { 
      $(thistarget).html("<span class='error'>Failed to submit form!</span>"); 
     }, 
     success: function(res) { 
      // $('#blastresults').html(res); 

     } 
    }) 
    return false; 
    var mydata=[res]; 
$("#datatable").jqGrid({ 
    datatype:'local', 
    data: mydata, 
    jsonReader: { 
     repeatitems : false, 
    }, 
    colNames:['QueryID','SubjectID', 'Identity', 'Align-len', 'Mismatches','Gaps','QStart','QEnd','Suject-start','Subject_end','E.Value','Score'], 
    colModel:[ {name:'query',index:'query', width:55}, 
     {name:'subject',index:'subject', width:90}, 
     {name:'Identity',index:'Identity', width:100}, 
     {name:'AlignLen',index:'AlignLen', width:80, align:"right"}, 
     {name:'Mismatches',index:'Mismatches', width:80, align:"right"}, 
     {name:'Gaps',index:'Gaps', width:80,align:"right"}, 
     {name:'Qstart',index:'Qstart', width:80,align:"right"}, 
     {name:'Qend',index:'Qend', width:80,align:"right"}, 
     {name:'Sstart',index:'Sstart', width:150, sortable:false}, 
     {name:'Send',index:'Send', width:150, sortable:false}, 
     {name:'Evalue',index:'Evalue', width:10, sortable:false}, 
     {name:'Score',index:'Score', width:10, sortable:false}, ], 
    rowNum:5, 
    rowList:[2,3,5,10], 
    pager: $('#pager2'), 
    sortname: 'QueryID', 
    //imgpath: '/var/www/test/images', 
    viewrecords: true, 
    sortorder: 'desc', 
    loadonce: true, 
    height: '500px', 
    width:'1000px', 
    altRows: true, 
    pgbuttons: true, 
    caption: 'Blast Results' 
    }); 
    $("#datatable").jqGrid('navGrid','#pager2', {position: 'right'}); 
    jQuery("#datatable").jqGrid('navGrid','#blastresults',{edit:false,add:false,del:false}); 




    } 
); 

}）;

來自Ajax調用的響應是：

[ {"Mismatches":"6","subject":"Ca7","query":"AB-Contig743","Send":"17305359","Gaps":"1","AlignLen":"1119","Score":"2113","Identity":"99.37","Evalue":"0.0","Sstart":"17304241","Qstart":"33","Qend":"1150"}, {"Mismatches":"1","subject":"Ca7","query":"AB-Contig743","Send":"41349183","Gaps":"0","AlignLen":"26","Score":"44.1","Identity":"96.15","Evalue":"0.032","Sstart":"41349208","Qstart":"614","Qend":"639"}, {"Mismatches":"0","subject":"Ca7","query":"AB-Contig743","Send":"22007817","Gaps":"0","AlignLen":"20","Score":"40.1","Identity":"100.00","Evalue":"0.51","Sstart":"22007836","Qstart":"672","Qend":"691"}, {"Mismatches":"2","subject":"C11062332","query":"AB-Contig743","Send":"101","Gaps":"0","AlignLen":"29","Score":"42.1","Identity":"93.10","Evalue":"0.13","Sstart":"129","Qstart":"714","Qend":"742"}, {"Mismatches":"2","subject":"Ca5","query":"AB-Contig743","Send":"10391193","Gaps":"0","AlignLen":"29","Score":"42.1","Identity":"93.10","Evalue":"0.13","Sstart":"10391165","Qstart":"714","Qend":"742"}, {"Mismatches":"0","subject":"scaffold438","query":"AB-Contig743","Send":"55788","Gaps":"0","AlignLen":"20","Score":"40.1","Identity":"100.00","Evalue":"0.51","Sstart":"55769","Qstart":"1175","Qend":"1194"}, {"Mismatches":"0","subject":"scaffold1613","query":"AB-Contig743","Send":"56169","Gaps":"0","AlignLen":"20","Score":"40.1","Identity":"100.00","Evalue":"0.51","Sstart":"56188","Qstart":"367","Qend":"386"}] 

請幫我找出錯誤。提前致謝。

Answer 1

I F使用本地數據，它應該是這樣的：

var mydata = [ {query:"qry",subject:"foo"........},{query:"qry",subject:"foo"........} ];//colname,value pairs 

但是目前你有

mydata={"page":1,"records":1,"rows":[null,{"id":1,"cell":["AB-Contig743","Ca7","99.37","1119","6","1","33","1150","17304241","17305359","0.0","2113"]}],"total":1} 

所以，要麼你必須重新設置AJAX結果或直接使用jqgrid的url屬性調用方法（您在ajax請求中調用的方法），如下所示：

$("#blastform").submit(function(){ 
$('#blast').hide(); 
$('#blastresults').show(); 
    $("#datatable").show(); 
    var thistarget = this.target; 
    $("#datatable").jqGrid({ 

     url: $(this).action, 


        datatype: 'json', 
        mtype: 'post', // 

        postData: $(this).serialize(), 
    colNames:['QueryID','SubjectID', 'Identity', 'Align-len', 'Mismatches','Gaps','QStart','QEnd','Suject-start','Subject_end','E.Value','Score'], 
    colModel:[ {name:'query',index:'query', width:55}, 
     {name:'subject',index:'subject', width:90}, 
     {name:'Identity',index:'Identity', width:100}, 
     {name:'AlignLen',index:'AlignLen', width:80, align:"right"}, 
     {name:'Mismatches',index:'Mismatches', width:80, align:"right"}, 
     {name:'Gaps',index:'Gaps', width:80,align:"right"}, 
     {name:'Qstart',index:'Qstart', width:80,align:"right"}, 
     {name:'Qend',index:'Qend', width:80,align:"right"}, 
     {name:'Sstart',index:'Sstart', width:150, sortable:false}, 
     {name:'Send',index:'Send', width:150, sortable:false}, 
     {name:'Evalue',index:'Evalue', width:10, sortable:false}, 
     {name:'Score',index:'Score', width:10, sortable:false}, ], 
    rowNum:5, 
    rowList:[2,3,5,10], 
    pager: $('#pager2'), 


......................