功能项：
1、json动态，分批次加载表格数据
2、固定表格头部
3、播放表格数据
问题待解决：
定义类，实时更新数据（定义类保存表格行）。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/zgy.css"> <style> table { width: 100%; table-layout: fixed; } td, th { height: 25px; line-height: 25px; border-right: 1px solid #ff4136; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .tb_head { overflow-x: hidden; } .tb_cont { height: 200px; overflow: auto; } .tdw { width: 180px; } .xuhao { width: 30px; } .empty { width: 27px; } </style> </head> <body> <div class="fz"> <div class="tb_head" id="tb_head"> <table> <thead> <tr class="bg-grey"> <th class="xuhao"></th> <th class="tdw">车牌号码</th> <th class="tdw">定位时间</th> <th class="tdw">接收时间</th> <th class="tdw">精度</th> <th class="tdw">速度</th> <th class="tdw">方向</th> <th class="tdw">里程</th> <th class="tdw">状态</th> <th class="tdw">附加信息</th> <th class="tdw">地理位置</th> <th class="empty"></th> </tr> </thead> </table> </div> <div class="tb_cont" id="tb_cont"> <table id="dataTable"> <tbody> </tbody> </table> </div> <!--<input type="button" value="更新数据" id="reBtn">--> <span id="msg"></span> <input type="button" value="播放" id="play"> <input type="button" value="减慢" id="slowly"> <input type="text" value="5" id="speedValue"> <input type="button" value="加速" id="quickly"> </div> </body> <script src="js/jquery-1.9.1.min.js"></script> <script> var contDiv = document.getElementById("tb_cont"); //2 3 var tab = document.getElementById("dataTable"); //1 3 // var rowSave; // 3 分批加载 var scrollHeight = contDiv.offsetHeight; //数据滚动div的高度 var tabH = 25; //td的高度 var loadingNum = 10; //每次加载行数 var totalNum = 0; //已经加载的行数 var loadingEnd = 0; //数据加载完毕标识 //播放 var scrollPosition = -5 * tabH;;//滚动条位置 var currentPlayLine=0; //当前播放位置 var playFlag=false; //控制播放/暂停 var m_JiShiQi=null; //计时器 var baseSpeed = 100;//基础移动速度 var speedLv = 5;//移动速度等级 // 定义json，初始化数据 var arr = { "ChePaiHao": '湘AE4009', "DingWeiShiJian": '2015-01-25 09:04:12', "JieShouShiJian": '2015-01-25 09:03:52', "JingDu": '精确', "Speed": '54', "Direction": '北', "Mileage": '145,515.00', "ZhuangTai": 'ACC关/卫星定位：锁定/定位模块：正常/通信模块：正常', "FuJiaXinxi": '停车时间：142分钟 车辆状态：车辆-熄火', "WeiZhi": '广东省佛山市南海区联和路' } var jsonstr = "[{'ChePaiHao':'粤AE4009','DingWeiShiJian':'2015-01-25 09:04:12','JieShouShiJian':'2015-01-25 09:03:52','JingDu':'精确','Speed':'54','Direction':'北','Mileage':'145,515.00','ZhuangTai':'ACC关/卫星定位：锁定/定位模块：正常/通信模块：正常','FuJiaXinxi':'停车时间：142分钟 车辆状态：车辆-熄火','WeiZhi':'广东省佛山市南海区联和路'}]"; var jsonData = eval('(' + jsonstr + ')'); for (var i = 0; i <= 1000; i++) { jsonData.push(arr); } $(function () { // 1加载数据 AddDT(); // 播放 $("#play").click(function(){ if(!playFlag) { Play(); }else{ Pause(); } }); // 加/减速 $("#quickly").click(function(){ PlaySpeedAdd(); }); $("#slowly").click(function(){ PlaySpeedMinus(); }); //// 更新数据 // $("#reBtn").click(function () { // RefreshDT(); // }); // 2表格固定 contDiv.onscroll = function () { // 纵向滚动 if (CheckFlag()) { AddDT(); } // 横向滚动 var scrollLeft = contDiv.scrollLeft; $("#tb_head").scrollLeft(scrollLeft); } }); //判断是否滚动到加载 function CheckFlag() { var lasttabHeight = (tab.rows.length - 1) * tabH; var scrollTop = document.getElementById("tb_cont").scrollTop; if (lasttabHeight < scrollHeight + scrollTop && loadingEnd == 0) { return true; } } // 1加载数据 function AddDT() { var len = parseInt(totalNum + loadingNum); if (len >= jsonData.length) { len = jsonData.length; loadingEnd = 1; } $("#msg").html(totalNum + "+" + loadingNum + "+" + len + "+" + jsonData.length); for (var j = totalNum; j < len; j++) { var rowsNumber = tab.rows.length; var row = tab.insertRow(rowsNumber); var cell = row.insertCell(); cell.innerHTML = row.rowIndex + 1; cell.setAttribute("class", "xuhao"); cell = row.insertCell(); cell.innerHTML = jsonData[j].ChePaiHao; cell.setAttribute("class", "tdw"); cell = row.insertCell(); cell.innerHTML = jsonData[j].DingWeiShiJian; cell.setAttribute("class", "tdw"); cell = row.insertCell(); cell.innerHTML = jsonData[j].JieShouShiJian; cell.setAttribute("class", "tdw"); cell = row.insertCell(); cell.innerHTML = jsonData[j].JingDu; cell.setAttribute("class", "tdw"); cell = row.insertCell(); cell.innerHTML = jsonData[j].Speed; cell.setAttribute("class", "tdw"); cell = row.insertCell(); cell.innerHTML = jsonData[j].Direction; cell.setAttribute("class", "tdw"); cell = row.insertCell(); cell.innerHTML = jsonData[j].Mileage; cell.setAttribute("class", "tdw"); cell = row.insertCell(); cell.innerHTML = jsonData[j].ZhuangTai; cell.setAttribute("class", "tdw"); cell = row.insertCell(); cell.innerHTML = jsonData[j].FuJiaXinxi; cell.setAttribute("class", "tdw"); cell = row.insertCell(); cell.innerHTML = jsonData[j].WeiZhi; cell.setAttribute("class", "tdw"); cell = row.insertCell(); rowSave = row; } totalNum = len; } //播放数据 function ResetMkPoint(){ $("#tb_cont").scrollTop(scrollPosition); $("#dataTable tr:eq(" + currentPlayLine + ")").addClass("red").siblings().removeClass("red"); scrollPosition += tabH; currentPlayLine++; if(currentPlayLine<jsonData.length){ m_JiShiQi = setTimeout(function () { ResetMkPoint(); }, speedLv * baseSpeed); //移动速度 } } // // 更新数据 // function RefreshDT() { // rowSave.cells[3].firstChild.nodeValue = "变更更"; // } // 播放 function Play(){ ResetMkPoint(); $("#play").val("暂停"); playFlag=true; } // 暂停 function Pause(){ if (m_JiShiQi != null) { clearTimeout(m_JiShiQi); } $("#play").val("播放"); playFlag=false; } // 加速 function PlaySpeedAdd(){ speedLv--; if (speedLv <= 1) { speedLv = 1; } $("#speedValue").val(GetCurrentSpeed(speedLv)); } // 减速 function PlaySpeedMinus(){ speedLv++; if (speedLv >= 10) { speedLv = 10; } $("#speedValue").val(GetCurrentSpeed(speedLv)); } // 速度换算 function GetCurrentSpeed(s) { switch (s) { case 1: return 10; case 2: return 9; case 3: return 8; case 4: return 7; case 5: return 6; case 6: return 5; case 7: return 4; case 8: return 3; case 9: return 2; case 10: return 1; default: 1 } } </script> </html>
