js example

于 2017-08-23 19:19:00 发布
阅读量205 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： json php
原文链接：https://my.oschina.net/u/3428739/blog/1519528

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

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;

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].onclick=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 testval=headers[n].textContent||cell1.innerText;//获得文本内容
  //alert(n);
    
                // sortrows(table,n);
                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 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].id == "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].id == "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 TestBlack(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 _nextrowindex= _nextrow.rowIndex; 
  var _orgparentrowindex = obj.parentNode.rowIndex; //最初的obj rowIndex 
   var _tbody=obj.parentNode.parentNode;
  //alert(_parentrow);

//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)
 { 
     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)
  { 
     if(trs[i].style.display=="")
     {
      trs[i].style.display = "none";
      //     if(trs[i].rowIndex != _parentrow+1)
     // {

    //  }
     // clickicon.setAttribute("class","fa fa-plus-square-o");
     }else
     {
      trs[i].style.display = "";

     }
    

  }
  if(trs[i].id == "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="#0ff";
   //newTr.style.background="#f00";
  }*/
        newTr.setAttribute("id", "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 == 0)
  {
   nodestatus.setAttribute("class", "fa fa-envelope-o");
  }
  else if(status==1)
  {
   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": //总仓
    delivertatus.setAttribute("class", "fa fa-refresh");
    break;
  case "2": //配送站
    delivertatus.setAttribute("class", "fa fa-reply-all");
    break;
  case "3": //卡车
    delivertatus.setAttribute("class", "fa fa-truck");
    break;
  case "4": //
    delivertatus.setAttribute("class", "fa fa-share");
    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", "TestBlack('"+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);  
   
     //添加列
        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 == 0)
  {
   nodestatus.setAttribute("class", "fa fa-envelope-o");
  }
  else if(status==1)
  {
   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 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(",");
 // alert(boxstatus[dateCollumn]);
  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(",");
  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');
 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 onclick="makeSortable();">盒子编号<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> 
            <th onclick="makeSortable();">网关编号<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> 
            <th onclick="makeSortable();">地    点<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> 
            <th onclick="makeSortable();">盒子状态<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> 
            <th onclick="makeSortable();">物流状态<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> 
            <th onclick="makeSortable();">刷新时间<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> <th onclick="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/1519528

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值