JQuery和ExtJs相比，各有优点，JQuery侧重对DOM元素开发，而ExtJs侧重组件开发，虽然JQuery有许多插件来实现跟ExtJs同样的效果，但使用起来，却并不容易。如Ricki使用插件jqGrid做的一个小例子：
代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.3.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/src/grid.loader.js"></script>
<script>
$(document).ready(function(){
$('#grid').jqGrid({
url:'http://localhost:8089/new_test/TestManager/TestAction!listCps.action',
mtype:'GET',
height: 255, width: 600,
loadonce:true,
datatype:'json',
colNames:['ID','公司全称','公司地址'],
colModel:[{name:'id',index:'id',hidden:true},
{name:'fullName',index:'fullName', search:true,sorttype:'text'},
{name:'linkAddress',index:'linkAddress', search:true}],
jsonReader:{
root:'pageList.result',//注意这里 详细请到官方查看
total:'totalPage',
page:'currentPage',
records:'count',
repeatitems: false, //注意这个属性的取值 详细请到官方查看
id: "0"//注意这里 详细请到官方查看
},
pager:'#navtoolbar',
gridview: true,
viewrecords: true,
rowNum:4,
rownumbers: true,
rowTotal:4,
sortname: 'id',
sortorder: "desc",
caption: "Toolbar Searching"
}
);
}
);
jQuery("#grid").jqGrid('navGrid','#navtoolbar',{del:false,add:false,edit:false,search:true});
jQuery("#grid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
</script>
</head>
<body>
<table id="grid"></table>
<div id="navtoolbar"></div>
</body>
</html>
效果：
存在的问题：
1.rownumber为负数，但单击标头后，如公司全称，就恢复正常。
2.在标题头下方没出现搜索工具条。
3.可能还有其他问题，暂时没找到。
jqGrid的相关文档：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
有空的话，欢迎你到
红番薯逛逛
- 大小: 25.2 KB
分享到：
相关推荐
jQuery.jqGrid是一款强大的JavaScript插件，主要用于构建数据密集型Web应用程序，特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性，在Web开发领域广受青睐。本篇文章将深入探讨...
**jQuery表格插件jqGrid详解** jqGrid是一款强大的基于JavaScript的开源网格控件，它能够为Web应用程序提供灵活、功能丰富的数据展示和操作界面。这款插件是jQuery库的一个扩展，专为处理大量数据和实现复杂的表格...
jqGrid没有setComplexGroupHeaders方法，使用此插件实现三级分组表头功能
而 "js" 目录下的核心库文件，如 "jquery.jqGrid.min.js"，则是实现 jqGrid 功能的基础，开发者可以直接引入到项目中使用。 总的来说，jQuery.jqGrid 4.4.5 是一款功能强大、易于定制的前端表格组件，无论是在数据...
jQuery.jqGrid 4.5.2作为一个强大的开源JavaScript插件，为开发者提供了强大的数据网格功能，使得在网页上处理大量数据变得轻而易举。这个资源文件"jquery.jqGrid-4.5.2.zip"包含了所有必要的组件，让我们深入探讨其...
总结，jQuery.jqGrid 4.4.0 是一个强大的数据网格解决方案，它提供了一整套完善的工具和插件，使得开发者能够快速地构建功能丰富、交互性强的数据展示和管理界面。无论是在企业级应用还是个人项目中，jqGrid 都是一...
《jQuery.jqGrid-4.5.4：强大的表格数据管理插件》 jQuery.jqGrid 是一个基于 jQuery 的开源网格插件，主要用于在网页上展示和管理大量结构化的数据。版本4.5.4是这个插件的一个稳定版本，虽然在官网上可能无法找到...
在本文中，我们将深入探讨jQuery.jqGrid-4.4.3版本，理解其功能、使用方法以及在实际项目中的应用。 jQuery.jqGrid是基于jQuery库的表格插件，提供丰富的功能，如数据的分页、排序、搜索和编辑等，适用于创建交互式...
jqGrid是一款基于jQuery的开源数据网格插件，用于在网页上动态展示数据并提供丰富的交互功能，如增、删、改、查、分类显示以及在线编辑。它通过XML、JSON或其他数据格式获取数据，并将其组织成表格形式。下面将详细...
使用`jQuery("#list").jqGrid()`方法创建表格，其中`#list`是表格的ID。配置参数如`viewrecords: true`，表示是否显示当前数据的总数；`imgpath`设置图片路径；`caption`定义表格标题。 4. **表格样式与行为**： ...
JQuery插件jqGrid是一款强大的数据网格组件，用于在网页上展示、操作和管理大量结构化数据。它提供了丰富的功能，如数据分页、排序、筛选、编辑等，且易于集成到现有的JQuery应用程序中。以下是对jqGrid常用属性的...
**jQuery表格插件jqGrid 4.3.0详解** jqGrid是一款基于JavaScript的开源网格控件，它充分利用了jQuery库的强大功能，为Web开发者提供了丰富的数据展示和操作功能。jqGrid 4.3.0是该插件的一个重要版本，它在前一...
这个压缩包“jquery.jqGrid-4.4.4.zip”包含了jqGrid的核心组件和必要的资源文件，包括CSS样式表、插件、JavaScript脚本和源代码。 1. **CSS 文件**： CSS 文件夹中的样式表定义了jqGrid的外观和布局。这些样式表...
**jQuery网格插件jqGrid详解** jqGrid是一个强大的基于jQuery的开源插件，专门用于在Web页面上展示和操作网格数据。它提供了丰富的功能，包括数据分页、排序、搜索、编辑、添加、删除和导出，使得在网页中创建交互...
jQuery.jqGrid是基于jQuery的开源数据网格插件，而jQuery UI则是提供了一系列可自定义的用户界面组件。本文将围绕"jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar"这一压缩包中的两个主要组件进行深入探讨。 首先，...
jQuery.jqGrid 是一个基于 jQuery 的开源插件，专为构建功能丰富的数据网格而设计。在4.3.2版本中，它提供了强大的数据展示、排序、筛选、编辑等功能，使得在Web应用中管理大量数据变得轻而易举。本篇将深入探讨...
jqGrid是一款基于jQuery的开源表格插件，专为数据管理和展示设计，提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点： 1. **基本使用**：...
jQuery.jqGrid是Web开发领域中一个强大的数据网格插件，版本4.1.2代表着它在功能和性能上的成熟与完善。这款插件专为展示和操作大量结构化数据而设计，以其丰富的特性、高效的性能和易用性，深受开发者喜爱。 首先...