您的位置：首页 > Web前端 > JQuery

Jqgrid-xmlstring获取数据

2013-05-01 23:24 218 查看 
<%@ 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">

//设置xmlstring
var 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JavaScript Jquery jqGrid xmlstring
相关文章推荐
新的分享
章节导航