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

原创 2015年11月21日 19:36:37

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

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




版权声明:本文为博主原创文章,未经博主允许不得转载。

jqGrid 能获取json 数据,前端数据显示不出!(解决)

jqGrid 从后台能获取json 数据,但是前台grid数据显示不出!(最后朋友帮忙解决的) 一、首先要确认json格式要正确(是否拼接错误了)格式不清楚的可以去百度一下。 二、错误处理jQuer...
  • z1729734271
  • z1729734271
  • 2016年12月13日 18:54
  • 4192

JqGrid 获取所有数据

jqGrid使用本地数据时,当jqGrid配置的rowNum小于本地总数据量(records属性记录总数据,可以通过records获取到本地总数据量),调用getRowData方法获取到的只是显示的部...
  • ceoshun
  • ceoshun
  • 2014年04月18日 13:51
  • 13224

【JqGrid】JqGrid前端分页+排序+查询条件

jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。 页面代码如下: ...
  • zsq520520
  • zsq520520
  • 2016年11月30日 10:51
  • 6006

jqGrid 新增行 保存新增的行到数据库

给jqGrid新增行,并且把jqgrid中的数据保存到数据库
  • dreamstar613
  • dreamstar613
  • 2017年06月15日 10:09
  • 2442

前台与后台数据结合

这两天着手完成了师哥安排的相关资讯模块的前台显示后台数据库信息,感受到从UI设计到改善功能的开发流程。最大的感触就是,有一个专门进行UI设计的队员是必不可少的。 此次的相关资讯界面设计由正姐完成了,然...
  • zy_dream
  • zy_dream
  • 2016年12月13日 17:10
  • 205

四、jq前端分页插件jqgrid

jqgrid
  • lze693
  • lze693
  • 2017年03月24日 17:20
  • 1195

Jqgrid入门-Jqgrid格式化数据(九)

上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据。何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒;对数字进行处理,加上千分位分隔符,小数的保...
  • u010869338
  • u010869338
  • 2013年07月09日 10:38
  • 4574

ajax获取json数据然后将其装载到jqgrid实现

1. 通过ajax同步获取json数据 2. 本地装载jqgrid数据 $("#grid").jqGrid({ datatype: "local",        ...
  • qiu265843468
  • qiu265843468
  • 2017年10月19日 11:43
  • 639

JqGrid 显示表格

JqGrid 是前台的表格显示库,使用起来相当方便。 这里分享下本人使用过程中遇到的问题及解决方案 **一.rowNum属性** 1.如果不设置,默认显示数是20,也就是说超过20以后的数据。不...
  • FS1360472174
  • FS1360472174
  • 2015年06月10日 09:02
  • 1924

使用JqGrid列表数据分组显示问题的解决方法

使用JqGrid列表数据分组显示的问题解决方法
  • tjdy7707
  • tjdy7707
  • 2015年06月13日 21:34
  • 5215
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jqgrid前台数据显示问题原因和解决方案
举报原因:
原因补充:

(最多只允许输入30个字)