如何使用 jQuery 通过选项卡式导航刷新 JSON 数据？

Question

尝试让相当简单的 UI 正常工作时遇到一些问题。我想也许这里有人可以提供一些建议并为我指明正确的方向。这就是我正在发生的事情。

1) 使用 getJSON 从 PHP 页面中提取 JSON 字符串（多维数组）。 2）使用2个jQuery.each语句迭代JSON数据并将数据显示到页面。第一个 jQuery.each 创建我的侧面导航（列出计算机实验室名称）。第二个 jQuery.each 创建一个包含机器、其状态和日期的数据表。

因此，我遇到的问题是我希望侧面导航充当选项卡和数据表中的选项卡。我可以让它工作得很好。这就是我遇到问题的地方......我希望我的 JSON 数据每 2 分钟刷新一次，所以我使用 setInterval 再次获取 JSON 字符串。这最终会破坏我的选项卡/导航。我理解它为什么会崩溃，但对于如何修复它或编码的替代方法我有点迷失。

JSON 字符串看起来像这样......

{
    "Labs": [
        {
            "name": "Computer Lab 1",
            "host": [
                {
                    "name": "c1ms",
                    "status": "up",
                    "date": "8/25/11  02:05 PM"
                }
            ],
            "downcount": 0
        },
        {
            "name": "Computer Lab 2",
            "host": [
                {
                    "name": "berk1",
                    "status": "up",
                    "date": "8/26/11  08:55 AM"
                },
                {
                    "name": "berk2",
                    "status": "up",
                    "date": "8/26/11  08:50 AM"
                },
                {
                    "name": "berk3",
                    "status": "up",
                    "date": "8/26/11  08:50 AM"
                },
                {
                    "name": "berk4",
                    "status": "up",
                    "date": "8/26/11  08:55 AM"
                }
            ],
            "downcount": 0
        },
        {
            "name": "Computer Lab 3",
            "host": [
                {
                    "name": "pc1",
                    "status": "up",
                    "date": "8/26/11  08:50 AM"
                },
                {
                    "name": "pc2",
                    "status": "up",
                    "date": "8/26/11  08:55 AM"
                },
                {
                    "name": "pc3",
                    "status": "up",
                    "date": "8/30/11  12:20 AM"
                },
                {
                    "name": "pc4",
                    "status": "up",
                    "date": "8/26/11  08:50 AM"
                },
                {
                    "name": "pc5",
                    "status": "up",
                    "date": "8/26/11  08:55 AM"
                }
            ],
            "downcount": 1
        },
        {
            "name": "Computer Lab 4",
            "host": [
                {
                    "name": "mac1",
                    "status": "up",
                    "date": "8/22/11  03:05 PM"
                },
                {
                    "name": "mac2",
                    "status": "up",
                    "date": "8/22/11  03:10 PM"
                },
                {
                    "name": "mac3",
                    "status": "up",
                    "date": "8/22/11  03:05 PM"
                },
                {
                    "name": "mac4",
                    "status": "up",
                    "date": "8/23/11  12:20 PM"
                },
                {
                    "name": "mac5",
                    "status": "up",
                    "date": "8/16/11  01:30 PM"
                },
                {
                    "name": "mac6",
                    "status": "up",
                    "date": "8/22/11  03:05 PM"
                }
            ],
            "downcount": 0
        }
    ]
}

---到目前为止的代码 ---

<script type="text/javascript">
$(document).ready(function() {


 setInterval('$("#table").trigger("getJson")', 3000);

 $("#table").bind("getJson", function(event){
  $.getJSON('json.php', function(data, textStatus, jqXHR){
    $("#table").trigger("drawTable", data);
  });
 })
 $("#table").bind("drawTable", function(event, json){
    //build the table, json is your jsonData from the call
    $.each(json.Service, function(i,object){
        $.each(object.host, function(e,o){
            $('#table').append("<tr><td width='30%'>"+o.name+"</td><td width='10%'><span class='status-"+o.status+"'>"+o.status+"</span></td><td width='60%'>"+o.date+"</td></tr>");
    });
    });
 });
 $(".tableRow").live("click", function(event){
   //sidenavigation code
   $.each(json.Service, function(n, nav) {
      $('#db-sidenav ul').append("<li>"+nav.name+"</li>"); 
   });
 });
});
</script>

Answer 1

您可以考虑使用 jQuery 的 .live() 功能。

http://api.jquery.com/live/

每次刷新 DOM 元素时，事件处理程序将绑定您添加的导航功能。

希望这会有所帮助。

Answer 2

修复常量表附加

html 的表

<table>
  <thead>...</thead> // columns
  <tfoot>...</tfoot> //footer in front of body to help render speed
  <tbody>...</tbody> // content
</table>
<? id="db-sidenav">
  <ul>....</ul>
</?>

js 建议

 <script type="text/javascript">
    $(document).ready(function() {


     setInterval('$("#table").trigger("getJson")', 3000);

     $("#table").bind("getJson", function(event){
      $.getJSON('json.php', function(data, textStatus, jqXHR){
        $("#table").trigger("drawTable", data);
        $("#db-sidenav").trigger("updateNavigation", data);
      });
     });
     $("#db-sidenav").bind("updateNavigation", function(event, json){
        //sidenavigation code
        var sideNav = $(this);
        var ul = $("<ul></ul>");
        $.each(json.Service, function(n, nav) {
         ul.append("<li>"+nav.name+"</li>"); 
        });
        $("ul", this).fadeOut("fast", function(){
          //on animation complete
// warning, this will remove all child nodes, tweak this to remove only the UL we care about if there is more content in the side-nav than just the UL
          $(this).remove();
          ul.appendTo(sideNav);
          ul.fadeIn();
        }); 
      });        
     });
     $("#table").bind("drawTable", function(event, json){
        //build the table, json is your jsonData from the call
        var table = $(this);
        var tbody = $("<tbody></tbody>"); //appending the tr's to an un-attached element prevents DOM thrashing as we rebuild (i have no idea how big this table may get)
        $.each(json.Service, function(i,object){
            $.each(object.host, function(e,o){
               tbody.append("<tr><td width='30%'>"+o.name+"</td><td width='10%'><span class='status-"+o.status+"'>"+o.status+"</span></td><td width='60%'>"+o.date+"</td></tr>");
        });
        $("#table tbody").fadeOut("fast", function(){
          $(this).remove();
          tbody.appendTo(table);
          tbody.fadeIn(); 
        }); 
        });
     });
    });
    </script>

---

旧答案

<script>
$(document).ready(){


 setInterval('$("#table").trigger("getJson")', 120000);

 $("#table").bind("getJson", function(event){
  $.getJson("myUrl.php", function(data, textStatus, jqXHR){
    $("#table").trigger("drawTable", data);
  });
 })
 $("#table").bind("drawTable", function(event, json){
    //build the table, json is your jsonData from the call
 });
 $(".tableRow").live("click", function(event){
   //sidenavigation code
 });
}
</script>