jqgrid学习(二)读取XML数据

sillycat

浏览: 2556058 次
性别:
来自: 成都

最近访客更多访客>>

huageng520

learnmore

u012363178

ymgjava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

XML jQuery JSP XHTML HTML

jqgrid学习(二)读取XML数据

通过读取服务端的XML来构造grid，页面展现文件如下jqgrid-demo-xml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen"
href="../components/jqgrid/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../components/jqgrid/css/ui.jqgrid.css" />
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script src="../components/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../components/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../components/jqgrid/js/src/grid.loader.js" type="text/javascript"></script>

<script type="text/javascript">
// Here we set a globally the altRows option
jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
</script>

<script>
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
    url:'jqgrid-demo-xml-data.jsp',
    datatype: 'xml',
    mtype: 'POST',
    altRows: false,
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[
      {name:'invid', index:'invid', width:55},
      {name:'invdate', index:'invdate', width:90},
      {name:'amount', index:'amount', width:80, align:'right'},
      {name:'tax', index:'tax', width:80, align:'right'},
      {name:'total', index:'total', width:80, align:'right'},
      {name:'note', index:'note', width:150, sortable:false}
    ],
    xmlReader: {
root: "rows",
      row: "row",
      page: "rows>page",
      total: "rows>total",
      records : "rows>records",
      repeatitems: true,
      cell: "cell",
      id: "[id]",
      userdata: "userdata"
    },
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid'
});

alert(jQuery("#list").getGridParam('userData'));
alert(jQuery("#list").getUserData() + ":" + jQuery("#list").getUserDataItem( "tax" ));
});

</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

提供XML的SERVER端代码，我写了个简单的JSP来当做DEMO，jqgrid-demo-xml-data.jsp如下：

<%@page contentType="text/xml;charset=UTF-8"%>

<rows>
<page>1</page>
<total>2</total>
<userdata name="totalinvoice">240.00</userdata>
<userdata name="tax">40.00</userdata>
<records>2</records>
    <row id='1'>
      <cell>data1</cell>
      <cell>data2</cell>
      <cell>data3</cell>
      <cell>data4</cell>
      <cell>data5</cell>
      <cell>data6</cell>
    </row>
    <row id='2'>
      <cell>data1</cell>
      <cell>data2</cell>
      <cell>data3</cell>
      <cell>data4</cell>
      <cell>data5</cell>
      <cell>data6</cell>
    </row>
</rows>

分享到：

jqgrid学习(三)其他格式 | jqgrid学习(一)下载安装

2010-01-07 11:26
浏览 4509
评论(3)
分类:Web前端
查看更多

3 楼 sillycat 2010-01-21

你是说帖代码出来的格式哇？这个我不是很会弄，所以就直接贴出来给自己备份用的。以后改下。

2 楼 suiye007 2010-01-21

????????怎么没有格式？？？？？？？？

1 楼 suiye007 2010-01-21

通过读取服务端的XML来构造grid，页面展现文件如下jqgrid-demo-xml.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My First Grid</title> 

<link rel="stylesheet" type="text/css" media="screen" 
href="../components/jqgrid/css/ui-lightness/jquery-ui-1.7.2.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" 
href="../components/jqgrid/css/ui.jqgrid.css" /> 
<style> 
html, body { 
    margin: 0; 
    padding: 0; 
    font-size: 75%; 
} 
</style> 

<script src="../components/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="../components/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="../components/jqgrid/js/src/grid.loader.js" type="text/javascript"></script> 

<script type="text/javascript"> 
// Here we set a globally the altRows option 
jQuery.extend(jQuery.jgrid.defaults, { altRows:true }); 
</script> 

<script> 
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({ 
    url:'jqgrid-demo-xml-data.jsp', 
    datatype: 'xml', 
    mtype: 'POST', 
    altRows: false, 
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'], 
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ], 
    xmlReader: { 
  root: "rows", 
      row: "row", 
      page: "rows>page", 
      total: "rows>total", 
      records : "rows>records", 
      repeatitems: true, 
      cell: "cell", 
      id: "[id]", 
      userdata: "userdata" 
    }, 
    pager: '#pager', 
    rowNum:10, 
    rowList:[10,20,30], 
    sortname: 'invid', 
    sortorder: 'desc', 
    viewrecords: true, 
    caption: 'My first grid' 
  }); 

  alert(jQuery("#list").getGridParam('userData')); 
  alert(jQuery("#list").getUserData() + ":" + jQuery("#list").getUserDataItem( "tax" )); 
}); 

</script> 
</head> 
<body> 
<table id="list"></table> 
<div id="pager"></div> 
</body> 
</html> 

提供XML的SERVER端代码，我写了个简单的JSP来当做DEMO，jqgrid-demo-xml-data.jsp如下： 

<%@page contentType="text/xml;charset=UTF-8"%> 

<rows> 
  <page>1</page> 
  <total>2</total> 
  <userdata name="totalinvoice">240.00</userdata>  
  <userdata name="tax">40.00</userdata> 
  <records>2</records> 
    <row id='1'> 
      <cell>data1</cell> 
      <cell>data2</cell> 
      <cell>data3</cell> 
      <cell>data4</cell> 
      <cell>data5</cell> 
      <cell>data6</cell> 
    </row> 
    <row id='2'> 
      <cell>data1</cell> 
      <cell>data2</cell> 
      <cell>data3</cell> 
      <cell>data4</cell> 
      <cell>data5</cell> 
      <cell>data6</cell> 
    </row> 
</rows>

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论