2013-03-13 58 views
0

我剛開始使用jQuery Mobile框架,並想修改我最初設置爲網格的表格。我面臨的問題是,我只是從我的XML解析中獲取第一行數據,儘管有8個數據量來。jQuery Mobile XML解析到表中

我猜測網格會自動爲每個新設置添加一行發現Tabe佈局不在哪裏,並且可能需要某種「每個」來發現它的每一個數據 - 我不知道如何做到這一點,如果是這樣的話,但如果任何人可以幫助,我會非常感激 - 謝謝。

<!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/[email protected]" /> 
    <link rel="apple-touch-icon" sizes="144x144" href="_/images/iOS_Icons/[email protected]" /> 

    <!-- 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> 

回答

0

我已經想通了編碼或刪除:

$('#dpvtable').tableview('refresh'); 

已經把整個表的地方!現在我只需要弄清楚如何配置它以使用新的列隱藏功能...