今天在做jqGrid例子时,发现Array Data有个问题,写下来问问大家
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jqGrid Demos</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
//jqgrid_demo35中用这个方法,发现不能加载数据
// jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
//我改用以下方法就可以成功加载,不知为什么?还请高手指点???
jQuery("#list4").addRowData(i+1,mydata[i]);
});
</script>
<body>
<table id="list4"></table>
</body>
</html>
分享到：
相关推荐
jqGrid是一款基于jQuery的数据网格插件，用于在网页上展示和操作数据，具有丰富的功能，如排序、分页、编辑、搜索等。在本例中，我们关注的是jqGrid的分组、合计以及表头合并的功能，这些都是在处理大数据表格时非常...
6. **编辑与操作**：提供行内编辑、弹出编辑窗口以及新增、删除记录的功能，通过`editData`、`delData`等参数设置编辑和删除的服务器端URL。 7. **自定义行为**：可以通过事件处理函数（如`beforeSelectRow`、`...
在这个"jqGrid的asp.net例子"中，我们将深入探讨如何将jqGrid与ASP.NET框架结合，以及与SQL Server 2008数据库（具体示例使用AdventureWorks数据库）进行交互。 首先，ASP.NET是微软开发的一种Web应用程序框架，...
jqGrid是一款功能强大的JavaScript数据网格插件，广泛用于Web应用程序中展示、操作和管理大量数据。...提供的相关例子可以帮助我们更好地理解和运用jqGrid的各种功能，从而在实际项目中发挥其优势。
总的来说，"lotus domino jqgrid显示视图例子"是一个将Lotus Domino的视图数据与JqGrid的交互式表格功能相结合的应用实例。这个过程涉及到前后端数据交互、JSON格式化、JqGrid的配置和操作，以及Lotus Domino的代理...
查阅官方文档（如http://www.trirand.com/blog/）和社区资源（如提供的参考网址http://blog.mn886.net/jqGrid/）是非常重要的，它们提供了详细的API参考和示例代码，有助于解决开发过程中遇到的问题。 通过这个完整...
这个"第一个jqGrid例子"旨在帮助初学者理解和应用jqGrid的基本功能。jqGrid提供了丰富的特性和配置选项，使得数据的展示、排序、筛选、编辑和页面分页变得简单易行。 首先，jqGrid的核心功能是数据的展示。通过使用...
在这个"jqgrid加载本地数据并且分页例子"中，我们将深入探讨如何利用jqGrid实现从本地数据源加载数据并进行分页显示。 首先，要理解jqGrid的工作原理。它基于jQuery库，通过HTML表格元素来渲染数据，并通过AJAX从...
在这个“jqGrid使用XML數據源例子”中，我们将探讨如何配置jqGrid来从XML文件中获取并显示数据。 首先，我们需要了解XML（Extensible Markup Language）是一种用于标记数据的格式，它被广泛用于数据交换和存储。XML...
在这个“JqGrid小例子 vs2010+mvc”中，我们将探讨如何在Visual Studio 2010环境下，利用ASP.NET MVC框架来集成和应用JqGrid。 首先，我们需要了解**ASP.NET MVC**。这是一个模型-视图-控制器（Model-View-...
ASP.NET与jqGrid结合使用是Web开发中一种常见的数据展示技术。jqGrid是一个强大的JavaScript库，用于在网页上创建交互式的...通过研究这些文件，可以更好地理解和应用asp.net jqgrid的例子，解决实际项目中类似的问题。
jqGrid是一款功能强大的JavaScript表格插件，用于在Web页面中展示和操作数据。它基于jQuery库，提供了丰富的功能，如数据分页、排序、搜索、编辑等，支持JSON、XML、CSV等多种数据格式，适用于创建交互式的动态数据...
在这个“jqGrid dialog 例子”中，我们看到 jqGrid 被用来展示和处理数据，同时结合了 dialog 弹出层来执行增删改操作，从而提供了一个用户友好的交互体验。 首先，让我们详细了解一下 jqGrid 的核心功能： 1. ...
**jqGrid JSP示例详解** jqGrid是一款强大的JavaScript数据网格插件，它与jQuery库兼容，用于在网页上展示和操作数据。本教程将基于JSP（Java Server Pages）环境，详细介绍如何集成并使用jqGrid，为Java开发者提供...
**MVC 模式与 JqGrid 结合详解** MVC（Model-View-Controller）是一种软件设计模式，常用于创建可维护、可扩展的Web应用程序。它将业务逻辑（Model）、用户界面（View）和应用程序控制流程（Controller）分离，使得...
这个"jqGrid增删改查例子"是一个实际应用示例，展示了如何结合Struts2框架和MySQL数据库实现一个完整的CRUD（创建、读取、更新、删除）功能的前端表格。 首先，让我们了解一下jqGrid的核心功能： 1. 数据展示：...
** jqGrid 简介** jqGrid 是一个基于 jQuery 的数据网格插件，它提供了丰富的功能，用于在网页上展示和操作数据。jqGrid 支持分页、排序、筛选、编辑、添加、删除和查看数据，使得在 Web 应用程序中构建交互式表格...
jqGrid 最新版 3.7.2 离线帮助手册，方便各位查看 Installing jqGrid Before you begin System Requirements Download jqGrid Change Log How to Install How it Works My First Grid Basic Grid Conventions ...