1. 程式人生 > >jqgrid前臺資料顯示問題原因和解決方案

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;
}