jQuery Mobile XML解析成表 [英] jQuery Mobile XML Parsing into Table
问题描述
我刚刚开始使用jQuery Mobile框架，想要修改最初设置为表格网格的内容.我面临的问题是，尽管有8种数据要输入，但我只能从XML解析中获取第一行数据.
I have just started using the jQuery Mobile framework and wanted to amend what I had originally set up as a grid to a table. The problem I am facing is that I am only getting the first line of data from my XML parse although there is 8 amounts of data to come in.
我猜想网格会为它发现的每个新集自动添加一行，而按Tabe布局却不会，并且发现的每条数据可能都需要某种每条"-我不确定该怎么做如果是这样，但如果有人可以帮助我，我将非常感谢-谢谢.
I am guessing that the grid automatically added a row for each new set it found where by the tabe layout does not and may need some kind of 'each' for every piece of data it finds - I am not sure how to do that if that's the case but if any one can help I'd be very grateful- Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<!--Standard Jquery Stuff here-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<!--Set the Icons to be used if saved to an apple home screen-->
<link rel="apple-touch-icon" href="_/images/iOS_Icons/iPhoneIcon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="_/images/iOS_Icons/iPadIcon.png" />
<link rel="apple-touch-icon" sizes="114x114" href="_/images/iOS_Icons/iPhoneIcon@2x.png" />
<link rel="apple-touch-icon" sizes="144x144" href="_/images/iOS_Icons/iPadIcon@2x.png" />
<!-- Custom css -->
<link rel="stylesheet" href="../_/css/Michaels.css" />
<!-- dpv feed-->
<script type="text/javascript">
var xml;
$(document).ready(function(){
$.ajax({
type: "GET",
url: "../_/xml/dpv.xml",
dataType: "xml",
success: xmlParser
});
});
//loading XML file and parsing to .main div.
function xmlParser(data) {
xml = data;
$('#load').fadeOut();
$(xml).find("location").each(function () {
var name = $(this).find("name").text();
var target = $(this).find("target").text();
var actual = $(this).find("actual").text();
var thru = $(this).find("thru").text();
var lastmod = $(this).find("lastmodified").text();
$("#dpvtable").append('<tr><th><a href="dpv_graphs/dpv-' + name + '.html" rel="external">'+name+'</a></th><td>' + actual + '</td><td>' + target + '</td><td>' + thru + '</td></tr>');
$('#dpvtable').tableview('refresh');
});
}
</script>
</head>
<body>
<!-- DPV -->
<div data-role="page" id="dpv">
<div data-role="header" data-position="fixed">
<h1>DPV</h1>
</div>
<div data-role="content" data-theme="a" >
<ul id="table" data-role="tableview">
<li id="load">Loading Data...</li>
</ul>
<table data-role="table" id="dpvtable" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th>Location</th>
<th data-priority="1">DPV</th>
<th data-priority="1">Target</th>
<th data-priority="2">Thru</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!--Footer-->
<div data-role="footer" style="text-align:center" data-position="fixed">
<a class="ui-btn-left" data-icon="home" style="margin: float" href="../index.html" data-transition="flip">Home</a>
</div>
</body>
推荐答案
我认为应该进行编码或删除:
I have figured that coding out or removing:
$('#dpvtable').tableview('refresh');
已将整个桌子摆放到位！现在，我只需要弄清楚如何配置它以使用新的列隐藏器功能...
has put the whole table in place! Now I just need to figure out how to configure it to use the new column hider feature...
这篇关于jQuery Mobile XML解析成表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
