jqgrid前台数据显示问题原因和解决方案

最新推荐文章于 2023-02-15 10:28:12 发布

macalzheng

最新推荐文章于 2023-02-15 10:28:12 发布

阅读量4k

点赞数

分类专栏： javaweb java jqGrid 文章标签：解决方案 json jqgrid intellij idea

本文链接：https://blog.csdn.net/macalzheng/article/details/49967043

版权

javaweb 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

java

2 篇文章 0 订阅

订阅专栏

jqGrid

1 篇文章 0 订阅

订阅专栏

这个问题很是坑的，找了很多网上的办法都不行，也是郁闷了一天，都没和女朋友说上话，唉，解决这个问题的你一定要记住以下几点：

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