<%@ 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">//设置jsonvar myjson = { "total": "xxx", //总页数 "page": "yyy", //总记录数 "records": "zzz",//总记录数 "rows" : [//包含数据的数组 {"id" :"1", "cell" :["cell11", "cell12", "cell13","cell14","cell15","cell16","cell17"]},//id：改行的标识 cell：每行数据的数组 {"id" :"2", "cell":["cell21", "cell22", "cell23","cell24","cell25","cell26","cell27"]}]};var myjson2 = { "total": "xxx", //总页数 "page": "yyy", //总记录数 "records": "zzz",//总记录数 "rows" : [//包含数据的数组 {"id" :"1", "name":"zs","sex":"nv"},//id：改行的标识 cell：每行数据的数组 {"id" :"2", "mail":"@qq"}]};/*格式展示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: 'jsonstring',//设置数据格式为jsonstring datastr : myjson,//指定数据 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', //设置标题栏，不设标题栏将不可见 jsonReader : { root: "rows",//根节点 page: "page", total: "total", records: "records", repeatitems: true, cell: "cell",//cel可以为空 (cell:"",) id: "id",//id可以为数字(id:"0",) userdata: "userdata", repeatitems : true, subgrid: {root:"rows", repeatitems: true, cell:"cell" } } }).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>
