公司之前都用yahoo-table控件，但因为他它是配置复杂，决定换个表格控件，要求可以换样式，刚开始我选用了基于jquery的一个控件--flexigrid,使用起来还是很方便，样式也比较美观，但是在ie8上会有bug，虽然现在我已经改他原代码已经没有问题，毕竟他有一年多没有更新，资料在网上也不多，所有决定不用这个控件。之后我找到了jqgrid。
jqgrid 在样式上也是比较美观的，支持各种浏览器，更新的版本也比较多，现在最新的版本是3.6，功能是越来越多，排序，分页，查找，==，更多功能可以查看:http://www.trirand.com/jqgrid/jqgrid.html。 官方资料和例子都比较多，网上共享的列子也很多，遗憾的是都是英文的或是php的，要么就是3.5版之前的，jqgrid在3.5以后会jquery ui，支持自定义样式，官方的美观的dome就是使用了jquery ui库，网上下载的说是3.5的例子，一个个都不完整，对于初学者难以入门，今天我就写个最简单例子共享给大家，希望对大家有帮助。
首先使用jqgrid需要导入js和css,所需的我文件我上传了，可以下载，包括中文汉化，网上找不到，自己汉化的，有什么不足望大家提出宝贵意见。
<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" />
<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/i18n/grid.locale-CN_zh.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<body>
<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
</body>
$("#list2").jqGrid({
url:'ajax.txt',
datatype: "json",mtype:"POST",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: $('#pager2'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
}).navGrid('#pager2',{edit:false,add:false,del:false});
});
ajax.txt内容，在实际运用中是从数据库查数据，自己拼成json字符串返回
{"page":"1","total":2,"records":"13",
"rows":[
{id:"12345",cell:["dd","dd","dd","dd","dd","dd","dd"]},
{id:"23456",cell:["dd","dd","dd","dd","dd","dd","dd"]},
{id:"34567",cell:["dd","dd","dd","dd","dd","dd","dd"]},
{id:"45678",cell:["dd","dd","dd","dd","dd","dd","dd"]}
]
}
url可以换成自己要请求的路径，queryString为：nd=1259595461093&_search=false&rows=10&page=1&sidx=id&sord=desc
想必有一定这样请求字符一看就明白，这儿就不多少说了。
分享到：
相关推荐
尽管是旧版本，但它仍然是理解和使用jqGrid 3.5的重要参考资料，特别是对于新用户，文档可以帮助他们理解每个函数的作用和配置选项。 6. **jqGrid 3.5的更新与改进** 虽然未提供具体的3.5版本更新日志，但通常每个...
2. **数据网格**：jqGrid是一个表格控件，用于显示和管理大量结构化的数据，提供排序、分页、搜索、编辑等功能。 3. **主题和样式**：jqGrid允许自定义主题，以适应不同网站的设计风格，同时也内置了一些预设的主题...
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically ...
1. **数据网格**：jqGrid提供了一个强大的表格控件，可以轻松处理大量数据，支持分页、排序、过滤和编辑等功能。它能够展示复杂的数据结构，并允许用户进行交互操作。 2. **远程数据源支持**：jqGrid支持从服务器...
jQGrid 3.5 jQuery UI 1.7.2 Lightness theme (get more here) Sample static JSON file Sample static XML file (do not put this one into the 'url', it won't work) Complete JSON.php and XML.php parser mySQL...
3.5 beta版本是jqGrid的一个重要迭代，引入了更多改进和新特性。 1. **基本概念**：jqGrid是一种客户端数据管理组件，它使用HTML表格（`<table>`）作为基础，通过jQuery进行增强，以实现复杂的表格功能。它的核心...
- **js**: jqGrid 的 JavaScript 文件，包括主库文件和可能的扩展组件。 5. **文档支持** - jqGrid 提供了详尽的文档，帮助开发者快速理解和使用其功能，包括API参考、示例代码和常见问题解答。 综上所述，...
以上代码展示了如何创建一个简单的 jqGrid 实例，通过 `$("#list").jqGrid()` 初始化并配置网格，以及如何加载数据。 总的来说，jqGrid 3.5 Beta 提供了全面的数据网格解决方案，结合 jQuery 的强大功能，为开发者...
1. 配置初始化：在HTML中引入jqGrid及相关CSS、JS文件后，需要通过JavaScript代码初始化网格，设置列名、数据源、分页参数等。 2. 数据绑定：jqGrid支持JSON、XML等多种数据格式，开发者需要根据后端返回的数据类型...
在网页开发中，表格（Table）是展示数据的重要方式，而jqGrid是一个强大的JavaScript库，专门用于创建交互式、功能丰富的表格。本教程将深入探讨如何利用jqGrid来实现美观且功能丰富的表格样式。 首先，我们需要...
本文将深入探讨五种广泛使用的表格grid控件，分别是Telerik Kendo UI Grid、jQuery Grid（jqGrid）、Guriddo jqGrid、jqGrid 4.4.3以及Grid JS 2.0.5。 1. **Telerik Kendo UI Grid** Telerik Kendo UI Grid是一款...
内容索引:脚本资源,jQuery,jqGrid jqGrid是一个jQuery Grid插件，是客户端加载数据解决方案，有着优秀的界面和提供了良好的文档，它可以使用任何服务器端语言，ASP、PHP、、JSP等等。它的一个好用的功能是提供灵活...
在IT领域，尤其是在Web开发中，数据展示是一个关键部分，特别是在处理大量结构化数据时。...通过合理配置和利用JqGrid的特性，以及结合CSS和JavaScript技术，开发者可以创建出既美观又实用的数据表格。
**jqGrid-3.5** 是一款用于在Web应用程序中展示数据的强大的表格控件，它基于JavaScript库jQuery。这个控件以其高效、灵活和功能丰富而受到开发者的青睐。jqGrid提供了一种便捷的方式，使得网页可以动态加载、排序、...
新功能包括tree grid(树表)...等等.... 参考DEMO ：http://www.trirand.com/jqgrid/jqgrid.html 在demo连接的网页右侧可以找到包含tree grid的各种例子...
3. **js**：包含了jqGrid的JavaScript库文件。这些文件是实际应用中需要引入的，它们提供与服务器交互的接口，实现了数据的加载、编辑和保存等功能。此外，还有一些插件和辅助脚本，帮助开发者实现更复杂的功能，如...
接下来，在JavaScript部分设置jqGrid的配置选项。这包括定义列模型、数据源以及自适应窗口大小的设定。例如： ```javascript jQuery("#myGrid").jqGrid({ url: 'data.json', // 数据源，可以是JSON格式的URL ...
jqGrid是一款功能强大的JavaScript表格插件，用于在Web页面中展示和操作数据。它基于jQuery库，提供了丰富的特性和灵活性，使得数据管理变得简单而高效。在这个“jqGrid自定义组合控件范例”中，我们将深入探讨如何...