`

JQuery插件jqGrid的使用

阅读更多
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
0
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics