1. 程式人生 > >使用setTimeout()實現頁面自動重新整理資料

使用setTimeout()實現頁面自動重新整理資料

背景:前不久給一個朋友寫了一個自動重新整理頁面資料的demo,修改成html內嵌js 的檔案,這樣便於理解,需要引入的外掛有jquery 和jquery.cookie.js(用於快取頁面的使用者資料)

以下是原始碼:

  
<!DOCTYPE html  >

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>autorefresh</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script src=" jquery.cookie.js"></script>
<style>

table, td, tr, th {
    font-size: 12px;
}

 
.list table th {
    background-color: #f2f4f6;
    border-bottom: 1px solid #c1c8d2;
    color: #7d7d7d;
    font-weight: normal;
    height: 35px;
    padding-left: 5px;
/*     text-align: left; */
}
.Toolbar_inbox {
    background-color: #d2dbea;
    border-bottom: 1px solid #c8cfda;
    line-height: 26px;
    overflow: hidden;
    padding: 5px;
}

table, td, tr, th {
    font-size: 12px;
}
.so_main {
    text-align: left;
}
body {
    color: #333;
    font: 12px Arial,Verdana,Helvetica,sans-serif;
    text-align: center;
}
</style>

</head>

<body>
        <div class="list" id="list">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tableID">
                <tbody>
                    <tr>
                        <th class="line_l">作業id</th>
                        <th class="line_l">作業名稱</th>
                        <th class="line_l">作業主機</th>
                        <th class="line_l">註釋</th>
                        <th class="line_l">操作</th>
                        <th class="line_l"> <input type="button"  class="btn_b "   id="reset"   value="重置"/></th>
                    </tr>
                </tbody>
            </table>
            
        </div>
        <!-- END LIST -->



</body>
</html>

<script>
$(function(){
        var idlist=[];
        var jsonranklist=[{"id":1,"name":"xxx","host":2,"remark":"好看類","autoflag":"false"},
                          {"id":2,"name":"lyjllllll","host":3,"remark":"不好看類","autoflag":"false"},
                          {"id":3,"name":"lyj","host":4,"remark":"好好好看類","autoflag":"false"},
                          {"id":5,"name":"HHHHHHHHHHHHHH","host":4,"remark":"好好好看類","autoflag":"false"},];  
        setData();

        
     $(".clickBut").click(function(){
            
             var id=$(this).attr("id");
             $(this).attr({"disabled":"disabled"});
            idlist.push(id);
            // 設定cookie 快取自動重新整理的id
             $.cookie('idlist', idlist);
            return false;
        });
        
          //重置自動重新整理button
        $("#reset").click(function(){
             $(".clickBut").attr("disabled",false);
             idlist=null;
             $.cookie('idlist', null);
        });
        
      //初始化頁面賦值
     function setData(){
          for(var i=0;i<jsonranklist.length;i++){
                  $("#tableID").append(" <tr id="+jsonranklist[i].id+" >");
                  $("#tableID").append(" <td>"+jsonranklist[i].id+"</td>");
                  $("#tableID").append(" <td>"+jsonranklist[i].name+"</td>");
                  $("#tableID").append(" <td>"+jsonranklist[i].host+"</td>");
                  $("#tableID").append(" <td>"+jsonranklist[i].remark+"</td>");
                  $("#tableID").append(" <td> <input type= \"button\" class=\"btn_b clickBut\" value=\"自動重新整理\" id="+jsonranklist[i].id+"/> <input type= \"button\" class=\"btn_b clickBut\" value=\"手動重新整理\" id="+jsonranklist[i].id+"/>      "+"</td>");
                  $("#tableID").append("</tr  >");
                }
          
      }
      
 
      
      
        //自動重新整理資料
     function autoRefreshData(){
                    //id列表為空驗證
         if(idlist==null){
             alert("請選擇自動重新整理的資料");
             return false;
         }
         if(!idlist.length==0||$.cookie('idlist')){
            if(idlist.length==0){
                idlist=$.cookie('idlist');
                idlist.split(",");
          }
                       
         for(var j=0;j<idlist.length;j++){
             for(var i=0;i<jsonranklist.length;i++){
                 if(jsonranklist[i].id==idlist[j]){
                        $("table body tr[id='"+jsonranklist[i].id+"'] td").eq(0).html(jsonranklist[i].id);
                        $("table body tr[id='"+jsonranklist[i].id+"'] td").eq(1).html(jsonranklist[i].name);
                        $("table body tr[id='"+jsonranklist[i].id+"'] td").eq(2).html(jsonranklist[i].host);
                        $("table body tr[id='"+jsonranklist[i].id+"'] td").eq(3).html(jsonranklist[i].remark);
                 }
                    location.reload();
             }
         }
         }
        
//         console.log(idlist);
         //設定超時
         setTimeout(autoRefreshData, 5000);
        }
        
     //設定超時
     setTimeout(autoRefreshData, 5000);  
    
});    
</script>