<%@ 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>my firstGrid</title><!--------------------------- 普通版本的配置------------------------------------> <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui-1.10.2.custom.css" /> <!-- 加载用户UI主题 --> <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" /> <!-- 加载jqgrid样式 --> <script src="jqgrid/js/jquery-1.4.2.min.js" type="text/javascript"></script> <!-- 加载jquery --> <script src="jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript"></script> <!-- 加载jqgrid语言文件 (必须在jqgrid文件之前加载)--> <script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> <!-- 加载jqgrid文件 --> <!-- 统一字体和格式(推荐) --><style>html, body { margin: 0; padding: 0; font-size: 75%;}</style><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#list").jqGrid({ datatype: function(postdata){ $.ajax({ url : 'jqgrid_xml1.do', data : postdata, dataType : 'xml', complete: function(xmldata,stat){ if(stat=="success") { var thegrid = jQuery("#list")[0]; thegrid.addXmlData(xmldata.responseXML); } } }); }, colNames:['id','name', 'sex','mail','qq','tel','birthday'], colModel :[ { name:'id', //name不一定要和表名相同 index:'id', width:55, align:'center', //align:对齐方式 sortable:false //sortable:点击该列是否能排序 }, {name:'name', index:'name', width:90,align:'center'}, {name:'sex', index:'sex', width:80, align:'center',}, {name:'mail', index:'mail', width:80, align:'center'}, {name:'qq', index:'qq', width:80, align:'center'}, {name:'tel', index:'tel', width:80, align:'center'}, {name:'birthday', index:'birthday', width:150, sortable:false,align:'center'} ], altRows:false,//取消斑马纹(隔行换色)，注：覆盖了全局设置 pager: '#pager', //设置导航栏 rowNum:5, //每页显示的行数 rowList:[5,10,20,30], //每页显示的行数(可在前台更改) sortname: 'id', //排序的列名(初始时) sortorder: 'desc', //排序的方式 viewrecords: true, //是否可以看到总记录 caption: 'My first grid', //设置标题栏，不设标题栏将不可见 xmlReader : { root : 'rows',//根节点 row : 'row',//行节点(必须是根节点的子节点) cell : 'cell',//列节点 page : 'page',//当前页 total : 'total',//总页数 records : 'records',//总记录数 repeatitems : true,//此时设为true id : ''//? //id : '[id]',行中的id属性值 } }).navGrid("#pager", {edit : true,add : true,del : true,search : true,refresh : true}); }); </script></head><body><table id="list"></table> <div id="pager"></div></body></html>
