table test html

于 2017-08-26 14:41:00 发布
阅读量285 收藏
点赞数
文章标签： json javascript php ViewUI
原文链接：https://my.oschina.net/u/3428739/blog/1524232
版权

<!doctype html>
<html lang = "en">
<head>
<title> testbx </title>
<meta charset = "utf-8">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<style type="text/css"> 
body {
  color: #0f0;
  background: #fff;
  margin: 10;
  padding: 10;
  font-family: Georgia;
  }
  
table.gridtable {  
    font-family: verdana,arial,sans-serif;  
    font-size:11px;  
    color:#333333;  
    border-width: 1px;  
    border-color: #666666;  
    border-collapse: collapse;
//width:30%;    
}  
table.gridtable th {  
    border-width: 1px; 
    padding: 8px;  
    text-align:left;
    border-style: solid;  
    border-color: #666666;  
    background-color: #dedede;  
}  
table.gridtable td {  
    border-width: 1px;
    padding: 8px;  
    text-align:left;
    border-style: solid;  
    border-color: #666666;  
    //background-color: #ffffff;  
}  

#tbrankIcon
{
float:right;
}
</style> 

<script type="text/javascript" src="./JSON-js-master/json2.js"></script> 
<script>

var boxDate='2017-08-15 14:40:00';
var xmlHttp;
var iconColumn = 6;
var boxIdColumn = 0;
var parentIdColumn=1;
var locationColumn=2;
var statusCollumn=3;
var dateCollumn=4;
var inventoryTypeColumn=5;

var BOXOPEN=1;
var BOXCLOSE=0;

var filterlocation;
var filterstatus;

function makeSortable() {
//collapseInit();
    var table = document.getElementById("boxlog");
    var headers=table.getElementsByTagName("th");
    var rankicon = table.getElementsByTagName("i");
    //alert(rankicon.length);
    for(var i=0;i<headers.length-1;i++)
    {
        (function(n)
        {
            var flag=false;
            headers[n].οnclick=function()
            {        
                var thval = headers[n].getElementsByTagName("i");
                
                if(rankicon[n].className == "fa fa-chevron-up")
                {
                    rankicon[n].setAttribute("class","fa fa-chevron-down"); 
                }
                else
                {
                    rankicon[n].setAttribute("class","fa fa-chevron-up");
                }

                var tbody=table.tBodies[0];//第一个<tbody>
                //alert(tbody);
                var rows=tbody.getElementsByTagName("tr");//tbody中的所有行

   
                rows=Array.prototype.slice.call(rows,0);//真实数组中的快照

                //基于第n个<td>元素的值对行排序
                rows.sort(function(row1,row2){
                    var cell1=row1.getElementsByTagName("td")[n];//获得第n个单元格
                    
                    var cell2=row2.getElementsByTagName("td")[n];
                    var val1=cell1.textContent||cell1.innerText;//获得文本内容
                    var val2=cell2.textContent||cell2.innerText;

                    if(val1<val2){
                        return -1;
                    }else if(val1>val2){
                        return 1;
                    }else{
                        return 0;
                    }
                });
                if(flag){
                    rows.reverse();
                }
                //在tbody中按它们的顺序把行添加到最后
                //这将自动把它们从当前位置移走，故没必要预先删除它们
                //如果<tbody>还包含了除了<tr>的任何其他元素，这些节点将会悬浮到顶部位置
                for(var i=0;i<rows.length;i++){
                    tbody.appendChild(rows[i]);
                }

                flag=!flag;
            }
        }(i));
    }
}

function GetRequest()
{ 
    var url = location.search; //获取url中"?"符后的字串 
    var theRequest = new Object(); 
    if (url.indexOf("?") != -1) 
    { 
        var str = url.substr(1); 
        strs = str.split("&"); 
        for(var i = 0; i < strs.length; i ++) 
        { 
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
        } 
    } 
    return theRequest; 
} 


function collapseAll(obj)
{
   var boxTable = document.getElementById("boxlog");
   var trs=boxTable.getElementsByTagName("tr");

  var clickicon=obj.lastChild;

  for(var i=0; i<trs.length; i++)
  {
 
        if(trs[i].className == "master-row")
        {    
          var cell = trs[i].cells[iconColumn];
          if(clickicon.className == cell.lastChild.className)
          cell.onclick();
       }
   }
  /*if(clickicon.className == "fa fa-minus-square-o" )
  {
    clickicon.setAttribute("class","fa fa-plus-square-o");
  }
  else
  {
    clickicon.setAttribute("class","fa fa-minus-square-o")
  }*/
 
}

function collapseInit()
{
    var boxTable = document.getElementById("boxlog");
    var trs=boxTable.getElementsByTagName("tr");
    var headers=boxTable.getElementsByTagName("th");
    var clickicon=headers[iconColumn].lastChild;

  for(var i=0; i<trs.length; i++)
  {
 
        if(trs[i].className == "master-row")
        {    
          var cell = trs[i].cells[iconColumn];
          if("fa fa-minus-square-o" == cell.lastChild.className)
          cell.onclick();
       }
   }
  /*if(clickicon.className == "fa fa-minus-square-o" )
  {
    clickicon.setAttribute("class","fa fa-plus-square-o");
  }*/
 
}

function SlaveClick(TagName, obj)
{
//alert(TagName);
   var boxTable = document.getElementById("boxlog");
   var trs=boxTable.getElementsByTagName("tr");
      var headers=boxTable.getElementsByTagName("th");
    var thclickicon=headers[iconColumn].lastChild;
    
    var clickicon=obj.lastChild;
   

    if(clickicon.className == "fa fa-minus-square-o" )
    {
        clickicon.setAttribute("class","fa fa-plus-square-o");
    }
    else
    {
        clickicon.setAttribute("class","fa fa-minus-square-o")
    }


  var _nextrow = obj.parentNode.nextSibling; 
  var _orgparentrowindex = obj.parentNode.rowIndex; //最初的obj rowIndex  
  var _tbody=obj.parentNode.parentNode;


//rank it....
  for(var i=0,j=0; i<trs.length; i++)
  {
    _parentrowindex = obj.parentNode.rowIndex; //由于从新排序，本obj的rowindex也在改动，当把obj上面的row下移的时候，obj的rowindex减小
    if(trs[i].id == TagName&&trs[i].className == "slave-row")
    {    
        j++;
        var _movecount = _orgparentrowindex - _parentrowindex; //记录了一共移动了几条obj上面的记录
        if(i==_parentrowindex-_movecount+j) 
        {
            continue; //如果是紧接着下一行的，直接跳过
        }

        
        if(_nextrow)  _tbody.insertBefore(trs[i], _nextrow);
        else 
{
        _tbody.appendChild(trs[i]);
        //alert(i);
}
        i--;
        //alert(i);
        
    }
                    
  }
  
  var _minusflag=0;
  var _plusflag =0;
  
  for(var i=0; i<trs.length; i++)
  {
 
        if(trs[i].id == TagName&&trs[i].className == "slave-row")
        {    
              if(trs[i].style.display=="")
              {
                trs[i].style.display = "none";

              }else
              {
                trs[i].style.display = "";
              }

        }
        if(trs[i].className == "master-row")
        {    
          var cell = trs[i].cells[iconColumn];
          if("fa fa-minus-square-o" == cell.lastChild.className)
          {
            _minusflag++;
          }
          else
          {
            _plusflag++;
          }
          
       }

    }

    if(_minusflag == 0) thclickicon.setAttribute("class","fa fa-plus-square-o");
    else if (_plusflag == 0) thclickicon.setAttribute("class","fa fa-minus-square-o");
    
    //alert(_minusflag);
    //alert(_plusflag);
 
}

function addMasterRows(boxId,parentId,location,status,onlinedate,inventorytype) 
{
        var boxTable = document.getElementById("tbMain");

        var newTr = boxTable.insertRow();
        
        //newTr.style.fontWeight="bold";
        /*if(status == 1) //close...
        {
            newTr.style.color="#f00";
            newTr.style.background="##EA0000";
            //newTr.style.background="#f00";
        }*/
        newTr.setAttribute("id", boxId);  
        newTr.setAttribute("class", "master-row");        
          
           //添加列
        var newTd0 = newTr.insertCell(); //boxId
        var newTd1 = newTr.insertCell(); //parentId
        var newTd2 = newTr.insertCell(); //location
        var newTd3 = newTr.insertCell(); //status        
        var newTd4 = newTr.insertCell(); //deliver status
        var newTd5 = newTr.insertCell(); //date
        var newTd6 = newTr.insertCell(); //detail
            //设置列内容和属性

        newTd0.innerHTML = boxId;
        newTd1.innerHTML = parentId;
        newTd2.innerHTML = location;
        
        var nodestatus=document.createElement("i");
        if(status == BOXCLOSE) //close
        {
            nodestatus.setAttribute("class", "fa fa-envelope-o");
        }
        else if(status==BOXOPEN) //open
        {
            nodestatus.setAttribute("class", "fa fa-envelope-open-o");
        }
        newTd3.appendChild(nodestatus);
        //newTd3.innerHTML = status;
        
        var delivertatus=document.createElement("i");
        switch(inventorytype)
        {
//alert(inventoryType);
        case "1": //总仓
          if(status==BOXOPEN) delivertatus.setAttribute("class", "fa fa-refresh");
          else delivertatus.setAttribute("class", "fa fa-share");
          break;
        case "2": //配送站
          if(status==BOXOPEN) delivertatus.setAttribute("class", "fa fa-reply-all");
          else delivertatus.setAttribute("class", "fa fa-share");
          break;
        case "3": //卡车
          if(status==BOXCLOSE) delivertatus.setAttribute("class", "fa fa-truck");
          else {
          delivertatus.setAttribute("class", "fa fa-bell-slash-o");
          newTr.style.color="#EA0000";
        // newTr.style.background="#EA0000";
          }
          break;
        case "4": //
          if(status==BOXCLOSE) delivertatus.setAttribute("class", "fa fa-share");
          else delivertatus.setAttribute("class", "fa fa-reply-all");
          break;
      default:
          //delivertatus.setAttribute("class", "fa fa-truck");
        }

        //delivertatus.setAttribute("class", "fa fa-truck");
        newTd4.appendChild(delivertatus);
        //fa fa-truck
        
        newTd5.innerHTML = onlinedate;
        var node=document.createElement("i");
        node.setAttribute("class", "fa fa-minus-square-o");
        //alert(node.className);
        newTd6.appendChild(node);
        //alert(newTd4.lastChild.className);
        newTd6.setAttribute("onClick", "SlaveClick('"+boxId+"',this);");
        
//            saveTableValue();//保存值
        return false;
}


function addSlaveRows(boxId,parentId,location,status,onlinedate) 
{
        var boxTable = document.getElementById("tbMain");

        var newTr = boxTable.insertRow();
        newTr.style.background="#F0F0F0";
        newTr.style.fontSize="11px";
        /*if(status == 1) //close...
        {
            newTr.style.color="#f00";
            newTr.style.background="#0ff";
            //newTr.style.background="#f00";
        }*/
        newTr.setAttribute("id", boxId);   
        newTr.setAttribute("class", "slave-row");  
           //添加列
        var newTd0 = newTr.insertCell(); //boxId
        var newTd1 = newTr.insertCell(); //parentId
        var newTd2 = newTr.insertCell(); //location
        var newTd3 = newTr.insertCell(); //status
        
        var newTd4 = newTr.insertCell(); //deliver status
        
        var newTd5 = newTr.insertCell(); //date
        var newTd6 = newTr.insertCell(); //detail        
            //设置列内容和属性

        newTd0.innerHTML = boxId;

        newTd1.innerHTML = parentId;
        newTd2.innerHTML = location;
        
        var nodestatus=document.createElement("i");
        if(status == BOXCLOSE)
        {
            nodestatus.setAttribute("class", "fa fa-envelope-o");
        }
        else if(status==BOXOPEN)
        {
            nodestatus.setAttribute("class", "fa fa-envelope-open-o");
        }
        newTd3.appendChild(nodestatus);
        
       // newTd3.innerHTML = status;
        newTd5.innerHTML = onlinedate;
        
        //        var node=document.createElement("i");
        //node.setAttribute("class", "fa fa-file-o");
        //alert(node.className);
        //newTd5.appendChild(node);
        

//            saveTableValue();//保存值
        return false;
}


function GetXmlHttpObject()
{
    var xmlHttp=null;
    try
     {
         // Firefox, Opera 8.0+, Safari
         xmlHttp=new XMLHttpRequest();
     }
    catch (e)
     {
     //Internet Explorer
         try
          {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
         catch (e)
          {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
     }
    return xmlHttp;
}

function showBoxStatus()
{ 
 //alert("showBoxStatus...");
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
     {
     alert ("Browser does not support HTTP Request");
     return;
     }
    var url="http://localhost/retrievestatus.php";
    url=url+"?onlinedate="+boxDate;
    url=url+"&sid="+Math.random();
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
    
}
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {  
   // alert("getrespone...");
    //var dataObj = JSON.parse(xmlHttp.responseText);
    //alert(xmlHttp.responseText);
    var dataObj=eval("("+xmlHttp.responseText+")")
    
    var rows = dataObj['data'];
    
    //var x = 0;
    for(var x=0; x<rows.length; x++) 
    {
        
        var record = String(rows[x]);
        var boxstatus = record.split(",");
    //    alert(boxstatus[dateCollumn]);
        if(boxstatus[inventoryTypeColumn] == filterlocation)
        {
            addMasterRows(boxstatus[boxIdColumn],boxstatus[parentIdColumn],boxstatus[locationColumn],boxstatus[statusCollumn],boxstatus[dateCollumn],boxstatus[inventoryTypeColumn]);
        }
        boxDate = boxstatus[dateCollumn];

    }

   // var boxTable = document.getElementById("boxlog");
   // makeSortable(boxTable);
    //document.getElementById("txtHint").innerHTML="Last update date: " + boxDate;
showBoxStatusSlave();

 } 
}

function showBoxStatusSlave()
{ 
 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
     {
     alert ("Browser does not support HTTP Request");
     return;
     }
    var url="http://localhost/retrievelog.php";
    url=url+"?onlinedate="+boxDate;
    url=url+"&sid="+Math.random();
    xmlHttp.onreadystatechange=stateChangedSlave;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
function stateChangedSlave() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {  
   // alert("getrespone slave...");
    //var rec = JSON.parse(xmlHttp.responseText);
    var dataObj=eval("("+xmlHttp.responseText+")")
    
    var rows = dataObj['data'];
    //alert(rows.length);
    //var x = 0;
    for(var x=0; x<rows.length; x++) 
    {
        
        var record = String(rows[x]);
        var boxstatus = record.split(",");
        
        var checkmaster = document.getElementById(boxstatus[boxIdColumn]); //check master-row 是否存在。。。
        if(checkmaster)
        {
            addSlaveRows(boxstatus[boxIdColumn],boxstatus[parentIdColumn],boxstatus[locationColumn],boxstatus[statusCollumn],boxstatus[dateCollumn]);
        }
        boxDate = boxstatus[dateCollumn];

    }

    var boxTable = document.getElementById("boxlog");
    makeSortable(boxTable);
    collapseInit();
    //document.getElementById("txtHint").innerHTML="Last update date: " + boxDate;


 } 
}


window.onload = function()
{ 
//initTable();

   // addRows('B170000004','G1788889','0','2017-08-15 14:40:00');

    filterlocation = GetRequest()['location'];
    //filterstatus = GetRequest()['status'];
    
    showBoxStatus();
    
    //addMasterRows("B170000001","G1788889","1","2017-08-15 14:40:01");
    //addSlaveRows("B170000001","G1788789","0","2017-08-15 14:40:02");
    //addSlaveRows("B170000001","G1788789","1","2017-08-15 14:40:13");
    //addSlaveRows("B170000001","G1788799","0","2017-08-15 14:40:24");
    
    /*addMasterRows("B170000002","G1788889","1","2017-08-15 14:40:05");
    addSlaveRows("B170000002","G1788789","0","2017-08-15 14:40:07");
    addSlaveRows("B170000002","G1788789","1","2017-08-15 14:40:08");
    addSlaveRows("B170000002","G1788799","0","2017-08-15 14:40:09");
    
    addMasterRows("B170000003","G1788889","1","2017-08-15 14:40:30");
    addSlaveRows("B170000003","G1788789","0","2017-08-15 14:40:42");
    addSlaveRows("B170000003","G1788789","1","2017-08-15 14:40:20");
    addSlaveRows("B170000003","G1788799","0","2017-08-15 14:40:22");
    */


   // setInterval(showBoxStatus, 3000);
}

</script>
</head>
<body>

<br><br>
 <table id="boxlog" class="gridtable">  
    <thead>  
        <tr id="hmaster">  
            <th οnclick="makeSortable();">盒子编号<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>  
            <th οnclick="makeSortable();">网关编号<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>  
            <th οnclick="makeSortable();">地    点<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>  
            <th οnclick="makeSortable();">盒子状态<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>  
            <th οnclick="makeSortable();">物流状态<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>  
            <th οnclick="makeSortable();">刷新时间<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> <th οnclick="collapseAll(this);">详细信息 &nbsp;&nbsp;&nbsp;<i class="fa fa-minus-square-o" ></i></th>                  
        </tr>  
    </thead>  
   <tbody id="tbMain">
        
   </tbody> 
 </table>    
 
</body>
</html>

转载于:https://my.oschina.net/u/3428739/blog/1524232

chunzhenruan2595
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值