jqgrid前臺數據顯示問題原因和解決方案

這個問題很是坑的，找了很多網上的辦法都不行，也是鬱悶了一天，都沒和女朋友說上話，唉，解決這個問題的你一定要記住以下幾點：

1.傳回前臺的數據一定是JSon類型的數據，而不是後臺json數據轉化後的字符串

2.傳回前臺的json數據的格式一定要正確，你可以去在線的json數據驗證，去驗證一下你傳回前臺的數據是否符合json的格式

我之間遇到的問題和解決過程：

問題一：數據傳到前端是“{result:{"totalpages":2,"currpage":1,"totalrecords":19,"invdata":[{"adminId":15,"adminName":"macal35","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":14,"adminName":"macal","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":26,"adminName":"macal10","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":16,"adminName":"macal1","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":19,"adminName":"macal2","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":20,"adminName":"macal3","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":21,"adminName":"macal4","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":22,"adminName":"macal7","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":32,"adminName":"55555","adminPassWord":"ces","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":31,"adminName":"0007","adminPassWord":"0007","lastLoginDate":null,"lastLoginIp":"","rolename":""}]}}”，這時候前端沒法解析，因爲有result：{}

原因：在Struts.xml配置的是：

<action name="getAdminlistAction" class="org.pedus.action.AdminManegeAction" method="AdminList">
    <result type="json">
    </result>
</action>

然後改成：

<action name="getAdminlistAction" class="org.pedus.action.AdminManegeAction" method="AdminList">
    <result type="json">
        <param name="root">result</param><!-- 返回的結果中不是result：{...}的形式，而是{...}-->
    </result>
</action>

然後前端就是顯示：“{"totalpages":2,"currpage":1,"totalrecords":19,"invdata":[{"adminId":15,"adminName":"macal35","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":14,"adminName":"macal","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":26,"adminName":"macal10","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":16,"adminName":"macal1","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":19,"adminName":"macal2","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":20,"adminName":"macal3","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":21,"adminName":"macal4","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":22,"adminName":"macal7","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":32,"adminName":"55555","adminPassWord":"ces","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":31,"adminName":"0007","adminPassWord":"0007","lastLoginDate":null,"lastLoginIp":"","rolename":""}]}”，這樣倒是沒有result：{}了，但是還是不能顯示

原因：我後臺在返回數據的時候，將json數據轉化成了字符串，前端就出現了  “{}”，注意兩端有 引號，另外每個引號前還有反斜槓轉義字符，

然後我就直接讓他返回，json類型數據，而不是返回轉化後的字符串，然後出現Exception occurred during processing request: java.lang.reflect.InvocationTargetException這個錯誤，這個錯誤可能是Struts要返回的是轉化成字符串的json數據吧，但我返回的是json類型的數據，導致Struts不理解。

唉，那就換方法吧：這次我用  getResponse().getWriter().print(); 將json類型的數據返回到客戶端，但是又出現了前端顯示數據不完整的現象，在網上查了查，才知道要將後臺那個函數的 return SUCCESS；改成 return null；果不其然數據都顯示出來了，另外我看了一下返回到前端的數據：{"totalpages":2,"currpage":1,"totalrecords":19,"invdata":[{"adminId":15,"adminName":"macal35","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":14,"adminName":"macal","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":26,"adminName":"macal10","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":16,"adminName":"macal1","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":19,"adminName":"macal2","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":20,"adminName":"macal3","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":21,"adminName":"macal4","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":22,"adminName":"macal7","adminPassWord":"123456","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":32,"adminName":"55555","adminPassWord":"ces","lastLoginDate":null,"lastLoginIp":"","rolename":""},{"adminId":31,"adminName":"0007","adminPassWord":"0007","lastLoginDate":null,"lastLoginIp":"","rolename":""}]}，這次你會發現兩邊的雙引號沒了，這就是實實在在的json數據

總結：前端解析的一定是json類型的數據，不是json轉化後的字符串。

下面我給出前後臺的部分代碼：

前臺：

jQuery(function($) {
      var grid_selector = "#grid-table";
      var pager_selector = "#grid-pager";

      jQuery(grid_selector).jqGrid({

         url:"kkAction",
         datatype:"json",
         mtype:"POST",
         height: 250,
         colNames:[' ', '用戶ID','用戶名','密碼', '角色', '最近一次登錄IP', '最近一次登錄時間'],
         colModel:[
            {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
               formatter:'actions',
               formatoptions:{
                  keys:true,

                  delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback,onclickSubmit:userdeled},
                  editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback,afterSubmit:useredited}
               }
            },
            {name:'adminId',index:'adminId', width:60, sorttype:"int", editable: false},
            {name:'adminName',index:'adminName',width:90, editable:true, editoptions:{size:"20",maxlength:"30"}},
            {name:'adminPassWord',index:'adminPassWord', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
            {name:'rolename',index:'rolename', width:150,editable: false,editoptions:{size:"20",maxlength:"30"}},
            {name:'lastLoginIP',index:'lastLoginIP', width:150,editable: false,editoptions:{size:"20",maxlength:"30"}},
            {name:'lastLoginDate',index:'lastLoginDate', width:150,editable: false, sorttype:"date",unformat: pickDate}
         ],
         jsonReader:{
            root:"invdata",
            page: "currpage",
            total: "totalpages",
            records: "totalrecords",
            repeatitems: false
         },
         viewrecords : true,
         rowNum:10,
         rowList:[10,20,30],
         pager : pager_selector,
         altRows: true,
         //toppager: true,

         multiselect: true,
         //multikey: "ctrlKey",
         multiboxonly: true,

         loadComplete : function(data) {
//          var grid_data = eval('('+data.result+')');
//          //alert("請求數據"+grid_data.currpage);
//          jQuery("#grid-table")[0].addJSONData(grid_data.invdata);
//          //jQuery("#grid-table").jqGrid({data:grid_data.invdata});
               var table = this;
            setTimeout(function(){
               styleCheckbox(table);

               updateActionIcons(table);
               updatePagerIcons(table);
               enableTooltips(table);
            }, 0);
         },
         loadError:function(xhr,status,error){
            alert("請求數據"+xhr.readyState+" "+status+" "+error);
         },

         editurl:"dummy.html",//nothing is saved
         caption: "jqGrid with inline editing",


         autowidth: true

      });

後臺：

public String AdminList() throws Exception{
    List<Admin> ul = adminService.findAll();

    getResponse().getWriter().print(Pagination(ul, page, rows));//Pagination(ul, page, rows)返回JSONObject類型


    return null;
}