最近接触到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,然后才能进行修改操作。