JQuery插件jqGrid的使用
JQuery和ExtJs相比，各有优点，JQuery侧重对DOM元素开发，而ExtJs侧重组件开发，虽然JQuery有许多插件来实现跟ExtJs同样的效果，但使用起来，却并不容易。如Ricki使用插件jqGrid做的一个小例子：
代码：
效果：
存在的问题：
1.rownumber为负数，但单击标头后，如公司全称，就恢复正常。
2.在标题头下方没出现搜索工具条。
3.可能还有其他问题，暂时没找到。
jqGrid的相关文档：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
有空的话，欢迎你到 红番薯逛逛
代码：
<%@ 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
有空的话，欢迎你到 红番薯逛逛