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"> <resulttype="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; }