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

如果你使用的是本地数据，它应该是这样的：

 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'), 


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