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
分享到:
相关推荐
jqGrid没有setComplexGroupHeaders方法,使用此插件实现三级分组表头功能
JQuery插件 jqGrid常用属性说明
jquery表格插件
jQuery 的jqGrid包 现在已经更新到了3.8了 ,但是其中的主要应用是不会有太大的改动的,希望这个帮助文档能对jQuery插件的学习有所帮助。
jqGrid是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。
jqGrid 是一个用来显示网格数据的jQuery插件
jquery grid 表单插件,去官网下不到吗,还好有人做了备份,多谢多谢!本着分享的精神,同时也做一个备份,把4.5.4的包放到网上!
。
。
jquery.jqGrid-4.5.2.zip 插件和 相关jar包 还有jquery1.9的插件好像
JqGrid是一款功能强大的Jquery表格控件,支持排序,分组,分页,行内编辑,表格树,行内表格等多种功能,该版本为官方最新版,附带Demo
本文实例讲述了jQuery插件jqGrid动态获取列和列字段的方法。分享给大家供大家参考,具体如下: 1、问题背景 jqGrid表格插件,利用自身方法获取表格的表头和表格字段;获取列名和列字段名显示在弹窗里,用复选框进行...
jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。 主要特点: -Full control with JavaScript API -Data returned from the server is XML -Simple configuration -Ability to load big ...
jQuery tonytomov-jqGrid-v4.5.2 插件
之前网上没找到现成的jqgrid表格前台导出插件,都或多或少带后台,也不想换表格插件,所以参照extjs自己改了个前台导出插件,支持多表头和分组table带表头导出,引用方法文件有详细注释,直接能用,如有不足还请见谅...
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等。
jqGrid-3.4.2是jquery最好的插件,最好的学习资源,有强大页面样式布局和丰富事件机制,有ajax处理机制,供于大家学习参考!
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等