<%@ 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">//设置xmlstringvar mystr = "<?xml version='1.0' encoding='utf-8'?><rows><row><cell>data1</cell><cell>data2</cell><cell>data3</cell><cell>data4</cell><cell>data5</cell><cell>data6</cell><cell>data7</cell><cell>data8</cell></row></rows>";/*格式展示var mystr ="<?xml version='1.0' encoding='utf-8'?> <rows> <row> <cell>data2</cell> <cell>data3</cell> <cell>data4</cell> <cell>data5</cell> <cell>data6</cell> </row> </rows>";*/jQuery(document).ready(function(){ jQuery("#list").jqGrid({ datatype: 'xmlstring',//设置数据格式为xmlstring datastr : mystr,//指定数据 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'} ], pager: '#pager', //设置导航栏 rowNum:5, //每页显示的行数 rowList:[5,10,20,30], //每页显示的行数(可在前台更改) sortname: 'id', //排序的列名(初始时) sortorder: 'desc', //排序的方式 viewrecords: true, //是否可以看到总记录 caption: 'My first grid' //设置标题栏，不设标题栏将不可见 }).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>
