版本:jqgrid-4.3.2
html代码:
<table id="prdDetailTbl"></table> <div id="prdPageDiv"></div>
页面js代码:
jQuery("#prdDetailTbl").GridUnload();
jQuery("#prdDetailTbl").jqGrid(
{
url:'getProductOrderDetails.do?prdBranchId='+prdBranchId,
datatype: "json",
colNames:['订单号','结算单价', '数量', '结算总价'],
colModel:[ {name:'orderId',width:55},
{name:'settlePrice',width:90},
{name:'quantity', width:100},
{name:'settleAmount',width:100}
],
jsonReader: {
repeatitems:false,
rows: "rows", // 数据行(默认为:rows)
total: "total", // 总记录数
page: "page", // 当前页
records: "records" // 总记录数
},
rowNum:10,
rowList:[10,20,30],
pager: '#prdPageDiv',
sortname: 'id',
viewrecords: true,
sortorder: "desc"
});
jQuery("#prdDetailTbl").jqGrid('navGrid','#prdPageDiv',{edit:false,add:false,del:false});
action中输出的mime类型json:
this.getResponse().setContentType("application/json;charset=UTF-8");
this.getResponse().setCharacterEncoding("UTF-8");
try {
PrintWriter out = this.getResponse().getWriter();
out.write(json);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
之前在 jsonReader中没有设置 repeatitems:false,页面上一直无法显示数据。然后用firebug一步一步调试, 在jqgrid源码中有一个方法addJSONData,
这个方法的第1334行:
cur = drows[i];
这个方法中的第1360行代码如下:
if (dReader.repeatitems) {
if(dReader.cell) {cur = $.jgrid.getAccessor(cur,dReader.cell);}
if (!F) { F=orderedCols(gi+si+ni); }
}
如果没有设置repeatitems:false,则cur会被重新赋值,如果cur中没有cell属性值,则$.jgrid.getAccessor(cur,dReader.cell)会返回undefined,这样就导致页面无法显示数据,还报一个obj undefined的错。
总结:jqgrid加载json数据时,需要设置jsonReader的repeatitems:false。当然,如果返回的数据中有cell属性值,应该也可以显示(这种用法没测试过)。
分享到:
相关推荐
在这个场景中,我们将关注JqGrid如何利用纯JSON数据实现自动分页。 在Web开发中,分页是处理大量数据时非常重要的一个功能,它可以提升用户体验,避免一次性加载过多数据导致页面响应慢或浏览器崩溃。JqGrid支持...
在jqGrid中,本地数据分页可以通过设置`datatype`为`local`来实现。这样做可以减少服务器负载,因为只需要传输当前页面所需的数据。 **jqGrid本地数据分页实现步骤** 1. **引入jqGrid库和样式** 首先,在HTML文件...
`jqGrid`是一款基于jQuery的表格插件,支持动态数据加载、排序、分页、搜索、编辑等功能。它的灵活性和强大的扩展性使得其成为许多开发者首选的数据展示工具。在实际项目中,我们经常需要对大量的数据进行分页处理,...
在这个特定的"JQGrid分页"项目中,我们关注的是如何实现数据的分页功能,这在处理大量数据时尤为重要,因为它能提高网页的加载速度和用户体验。 首先,我们需要理解JQGrid分页的基本概念。在JQGrid中,分页通常分为...
jqGrid是一款功能强大的JavaScript表格插件,用于在Web页面中展示和操作数据。它支持多种数据源,包括本地数据和远程数据(如JSON、XML、CSV等...这个Demo将帮助我们掌握如何使用jqGrid进行本地数据的分页加载和展示。
总的来说,`JqGrid Demo json`是一个演示了如何结合使用JqGrid和Struts2框架实现动态JSON数据加载的实例。开发者可以通过这个Demo学习到如何在前端使用JqGrid构建数据展示界面,以及在后端利用Struts2进行数据处理和...
JqGrid 支持多种数据源,包括 JSON、XML 等格式的数据。 #### 2. 分页原理 分页是一种常见的前端技术,用于处理大量数据时减少数据传输量和提高用户体验。在后端实现分页通常有两种方式:基于服务器的分页和基于...
url: 'data.php', // 数据源,这里假设是一个PHP脚本返回JSON数据 datatype: 'json', colModel: [ // 定义列 {name: 'id', index: 'id', width: 50}, {name: 'name', index: 'name', width: 100}, // 其他列.....
**jqGrid分页详解** ...综上所述,jqGrid分页功能的实现涉及到前端与后端的协同工作,前端利用jqGrid库处理用户交互,后端则根据请求动态生成数据。理解这个过程对于构建高效的数据展示和管理界面至关重要。
**jqGrid分页** jqGrid的分页功能是通过设置`pager`属性和相关的分页参数来实现的。在ASP.NET页面中,首先需要在HTML部分创建一个jqGrid,并指定分页区域: ```html <table id="grid"></table> <div id="pager"></...
在IT行业中,前端数据展示是用户...开发者需要对jQuery和前端数据处理有一定的了解,同时掌握AJAX通信和JSON数据格式。通过这样的实现,用户可以更方便地在大量数据中找到所需信息,提高了网页应用的交互性和用户体验。
【jqGrid分页与Footer结算详解】 jqGrid是一款强大的JavaScript数据网格组件,广泛应用于Web开发中,用于展示和管理大量数据。它提供了丰富的功能,包括数据分页、排序、搜索和编辑等。在本篇文章中,我们将深入...
在本文中,我们将深入探讨Spring MVC分页组件和JqGrid如何协同工作,实现高效的数据展示和导出功能。Spring MVC作为Java企业级应用的主流框架,提供了强大的MVC架构支持,而JqGrid则是一个功能丰富的jQuery插件,专...
在"jqgrid分页"这个项目中,我们将看到如何配置jqGrid以实现动态加载数据并进行分页。 第一步,我们需要在HTML中引入jqGrid的JavaScript和CSS文件。这通常包括`jquery.js`、`jquery.jqgrid.min.js`和相应的主题CSS...
在本教程中,我们将深入探讨如何利用jqGrid实现数据的分组显示和统计,这对于数据分析和报告呈现来说尤其重要。 一、分组显示 1. 初始化jqGrid 首先,我们需要在HTML中创建一个表格元素,并通过jQuery初始化jqGrid...
- 方法:如`reloadGrid`(重新加载数据)、`addRowData`(添加新行)、`editRow`(编辑行)等,提供对表格的操作控制。 **5. jqGrid的进阶使用** - 内置编辑模式:包括`inlineNav`(行内编辑导航栏)、`formEditing...
jqGrid支持从服务器动态加载数据,可以使用`url`参数指定数据源,通过`datatype`参数设置数据类型(如`json`或`xml`)。数据加载过程中,还可以配置分页、排序和搜索等功能,如`loadonce`(一次性加载所有数据)、`...
它基于jQuery库,提供了丰富的功能,如数据分页、排序、搜索、编辑等,支持JSON、XML、CSV等多种数据格式,适用于创建交互式的动态数据表格。本实例将深入探讨如何在实际项目中调用和使用jqGrid。 首先,我们需要在...
以下是对标题和描述中提到的jqGrid分页实现的详细说明。 首先,我们来看一下前端部分的HTML和JavaScript代码。在HTML部分,你需要引入jqGrid所需的CSS和JavaScript文件,包括jQuery库、jqGrid主文件和主题样式。在`...
5. **解决JSON数据不显示问题**:如果遇到jqGrid无法显示JSON数据,可能是因为JSON格式不正确,或者是服务器返回的数据与前端的colModel不匹配。检查JSON响应是否包含正确的键(即colModel中的`name`),并且确保...