js example

<!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].ο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 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 ο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/1519528

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Paperback: 280 pages Publisher: Packt Publishing - ebooks Account (February 1, 2016) Language: English ISBN-10: 1785280082 ISBN-13: 978-1785280085 Key Features Learn to use the facilities provided by D3.js to create data-driven visualizations Explore the concepts of D3.js through examples that enable you to quickly create visualizations including charts, network diagrams, and maps Get practical examples of visualizations using real-world data sets that show you how to use D3.js to visualize and interact with information to glean its underlying meaning Book Description This book will take you through all the concepts of D3.js starting with the most basic ones and progressively building on them in each chapter to expand your knowledge of D3.js. Starting with obtaining D3.js and creating simple data bindings to non-graphical HTML elements, you will then master the creation of graphical elements from data. You'll discover how to combine those elements into simple visualizations such as bar, line, and scatter charts, as well as more elaborate visualizations such as network diagrams, Sankey diagrams, maps, and choreopleths. Using practical examples provided, you will quickly get to grips with the features of D3.js and use this learning to create your own spectacular data visualizations with D3.js. What you will learn Install and use D3.js to create HTML elements within the document Use development tools such as JSBIN and Chrome Developer Tools to create D3.js applications Retrieve JSON data and use D3.js selections and data binding to create visual elements from data Create and style graphical elements such as circles, ellipses, rectangles, lines, paths, and text using SVG Turn your data into bar and scatter charts, and add margins, axes, labels, and legends Use D3.js generators to perform the magic of creating complex visualizations from data Add interactivity to your visualizations, including tool-tips, sorting, hover-to-highlight, and grouping and dragging of visuals
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值