jqGrid 使用-优快云博客

最近接触到jqGrid这个插件，自己用了下，感觉还是比较方便，基于配置项来进行操作，下面就简单的记录初次使用的过程.

jqGrid文档：http://www.trirand.com/blog/jqgrid/jqgrid.html

这个文档比较重要，里面也有很大例子，可以参考下，下载好zip包后，然后导入到工程中，如下图所示

然后新建一个页面，来进行测试工作，新建的页面只需要创建一个table就可以了，其他的标签都可以不用写，如：

<table id="grid_id"></table>

这样就可以了，当然如果需要分页，那么还可以添加一个分页的div，如：

<div id="pager"></div>

这下body部分就完工了，就要开始将jqgrid的渲染到刚刚创建的table中，其实就是一些基础的配置信息，如表头啊，字段名称啊，外观显示等等，具体如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	
	<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" media="screen" href="js/jquery-ui-1.9.2.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="js/ui.jqgrid.css" />

	<script src="js/grid.locale-cn.js" type="text/javascript"></script>
	<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
	
	<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#grid_id").jqGrid({
    url:'getUserList',
    datatype: 'json',
    mtype: 'GET',
    colNames:['学号','姓名', '性别','出生日期','年龄','备注'],
    colModel :[ 
      {name:'xh', index:'xh',editable:true}, 
      {name:'xm', index:'xm',editable:true}, 
      {name:'xb', index:'xb',  align:'right',editable:true}, 
      {name:'csrq', index:'csrq',  align:'right',editable:true}, 
      {name:'nl', index:'nl',  align:'right',editable:true}, 
      {name:'bz', index:'bz',  sortable:false,editable:true} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'xh',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid',
    autowidth:true,
    jsonReader : {  
    	      root:"invdata",  
    	       page: "currpage",  
    	      total: "totalpages",  
    	      records: "totalrecords",  
    	      repeatitems: false,  
    	       id: "0"  
    	    },
    	    subGrid:true,	    
    	    onSelectRow: function(ids) {
    	        if(ids != null) {
    	         	$("#grid_id").jqGrid("toggleSubGridRow",ids); //这里在选中的时候触发表格扩展
    	     }else{
    	       alert("没有选择行!");
    	     } 
    	    },
    	    subGridRowExpanded:function(subgrid_id,row_id){
    	    	console.log(subgrid_id + "   " + row_id);
    	    	createSubGrid(subgrid_id,row_id);
    	    }
  }); 
  
  
  /**
  *
  *    创建子表
  **/
  function createSubGrid(subgrid_id,row_id){
	  var  tableHtml = "<table id="+subgrid_id+"_t></table>";
	  $("#" + subgrid_id).html(tableHtml);
	  //根据ID行来获取该行的数据
	  var rowData=jQuery("#grid_id").jqGrid('getRowData',row_id);
	  console.log(rowData);
	  //通过getGridParam方法来获取对应参数信息
	  var colNames= jQuery("#grid_id").jqGrid('getGridParam','colNames');
	  console.log("colNames:" + colNames);
	  var str = "";
	  for(var i = 0;i<colNames.length;i++){
		  if(colNames[i] ==""){
			  continue;
		  }
		  str +=colNames[i];
		  if(i < colNames.length-1){
			  str += ",";
		  }
	  }
	  console.log("str:" + str );
	  
	  
	  var colModels = $("#grid_id").jqGrid('getGridParam','colModel');
	  console.log(colModels);
	  
	  $("#" + subgrid_id + "_t").jqGrid({
		  						colNames:colNames,
	  							colModel:colModels
	  });
	  
	 jQuery("#" + subgrid_id + "_t").jqGrid('addRowData',0,rowData);
	  
  }
  
  
  var parameters = {
		  caption:'新增',
		  buttonicon:'ui-icon-plus',
		  onClickButton:function(){
			  alert(3);
		  },
		  position: "last", 
		  title:"新增", 
		  cursor: "pointer"
  };
  
  
  //jQuery("#grid_id").navGrid("#pager").navButtonAdd("#pager",parameters);
  

  
  
  jQuery("#grid_id").jqGrid('navGrid',"#pager").jqGrid('navButtonAdd',"#pager",parameters);
  
}); 



</script>
	
  </head>
  
  <body>
    <table id="grid_id"></table>
    <div id="pager"></div>
  </body>
</html>

部分配置说明：

pager：指定分页控件，采用jquery选择器的形式
rowList: 一个每页显示多少条的下拉框，可以更改每页显示的记录数
jsonReader ：定义读取服务器返回的数据格式，跟extjs类似
subGrid：这个比较关键，默认是false，设置为true之后，可以查看子表格数据
onSelectRow：鼠标点击行的时候触发的事件，当然也可以双击:ondblClickRow
$("#grid_id").jqGrid("toggleSubGridRow",ids)：这个是单击的时候展开子表格的事件，toggle就是来回切换
subGridRowExpanded：展开子表格的时候触发的事件，可以在这里创建子表格，包括数据来源，表头等信息，当然也可以通过配置subGridUrl和subGridModel来加载
jQuery("#grid_id").jqGrid('getGridParam','colNames'); 通过getGridParam这个方法来获取对应的数据，比如colNames，colModel等。

对于表格下面的按钮，jqGrid是帮我们实现了界面，但是需要配置对应的URL，比如editUrl，然后才能进行修改操作。