2014. 8. 27. 11:32ㆍ공부/JAVASCRIPT
업무상 테이블에 데이터를 뿌리고, 계속해서 새로운 데이터를 받으면서, 그걸 우측으로 스크롤시키는 작업이 필요했다.
작업 소스를 올려봄.. 나중에 또 쓸모가 있을 듯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- jquery CDN -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body style="font-size:13px">
<!-- 합계/평균/최대/최소 체크박스, 해제시 테이블 데이터 숨김 -->
<div id="checkFilter">
<input type=checkbox id="id3" checked>SUM
<input type=checkbox id="id4" checked>AVG
<input type=checkbox id="id5" checked>MAX
<input type=checkbox id="id6" checked>MIN
</div>
<!-- 테이블 1600px까지 고정 -->
<div style="width:1600px">
<!-- 좌측 컬럼 고정 부분 -->
<div style="float:left">
<table style="border-style:groove;border-width:1;border-color:#dddddd">
<thead>
<tr height=35>
<th class="ci" width="150"><div>통계항목</div></th>
<th class="cg" width="50"><div>그래프</div></th>
<th class="cs" width="50"><div>SUM</div></th>
<th class="ca" width="50"><div>AVG</div></th>
<th class="cx" width="50"><div>MAX</div></th>
<th class="cn" width="50"><div>MIN</div></th>
</tr>
</thead>
<tbody id="tbodyLeft">
</tbody>
</table>
</div>
<!-- 우측 데이터 부분 -->
<div id="timeData" style="float:left;overflow-x:auto;width:1024px;" >
<table style="border-style:groove;border-width:1;border-color:#eeeeee">
<thead>
<tr id="tHeaderRight" height=35>
</tr>
</thead>
<tbody id="tbodyRight">
</tbody>
</table>
</div>
</div>
<!-- 콘솔 -->
<div id=console style="clear:both"></div>
</body>
<script type="text/javascript">
// 아이템, 합계, 평균, 최대, 최소
var itemList = [ "aaa", "bbb", "ccc", "ddd" ];
var sumList = [ 0, 0, 0, 0 ];
var aveList = [ 0, 0, 0, 0 ];
var maxList = [ 0, 0, 0, 0 ];
var minList = [ 0, 0, 0, 0 ];
var isFirstData = true; // 첫번째 데이터인가
var addedColumn = 0; // 추가된 컬럼 수
var deletedColumn = 0; // 삭제된 컬럼 수
var scrollSize = 100; // 스크롤되는 사이즈
var maxColumn = 360; // 화면에 가지고 있는 컬럼 최대 수치
// 페이지 로딩 시 수행
$(document).ready(function() {
setItemList(); // 초기 리스트 세팅
setInterval( addColumn, 1000 ); // 1초에 한 번씩 컬럼 추가
});
// 초기 리스트 세팅 함수
function setItemList()
{
html = "";
for ( var i = 0; i < itemList.length; i++ )
{
html += '<tr id="trLeft' + i + '" height=25>'
+ ' <td class="ci">' + itemList[i] + '</td>'
+ ' <td class="cg" align="center"><input type=checkbox></td>'
+ ' <td class="cs" align="center">' + sumList[i] + '</td>'
+ ' <td class="ca" align="center">' + aveList[i] + '</td>'
+ ' <td class="cx" align="center">' + maxList[i] + '</td>'
+ ' <td class="cn" align="center">' + minList[i] + '</td>'
+ '</tr>';
}
$('#tbodyLeft').html(html);
html = "";
for ( var i = 0; i < itemList.length; i++ )
{
html += '<tr id="trRight' + i + '" height=25>'
+ '</tr>';
}
$('#tbodyRight').html(html);
}
// 데이터 컬럼 추가
function addColumn()
{
// 추가된 컬럼 수 증가시킴
addedColumn++;
// 타이틀에 시간 표시
var d = new Date();
$('#tHeaderRight').append('<th class="c'+ addedColumn + '">' + d.getHours() + ':' + d.getMinutes() + '<br>' + d.getSeconds() + '</th>');
// 각 아이템 컬럼에 데이터 표시
for ( var i = 0; i < itemList.length; i++ )
{
val = Math.floor( Math.random() * 100 );
grade = Math.floor( val / 10 );
$('#trRight'+ i).append('<td class="c'+ addedColumn + '" align="center">' + val + '</td>');
// 합계,평균,최대,최소 계산
sumList[i]+=val;
aveList[i] = Math.round(sumList[i] / addedColumn);
if ( val > maxList[i] ) maxList[i] = val;
if ( isFirstData == true ) minList[i] = val;
else if ( val < minList[i] ) minList[i] = val;
$('#trLeft' + i + ' > .cs').html( sumList[i] );
$('#trLeft' + i + ' > .ca').html( aveList[i] );
$('#trLeft' + i + ' > .cx').html( maxList[i] );
$('#trLeft' + i + ' > .cn').html( minList[i] );
}
// 스크롤 우측 이동
$("#timeData").animate({ scrollLeft: $("#timeData").scrollLeft() + scrollSize }, scrollSize );
// 최대로 화면에 가지고 있는 데이터 컬럼은 360개
if ( addedColumn > maxColumn )
{
deletedColumn = addedColumn - maxColumn;
$('.c'+ deletedColumn).hide();
}
// 콘솔에 정보출력
$('#console').html( "added :" + addedColumn + ", deleted : " + deletedColumn + ", scrollLeft:" + $("#timeData").scrollLeft() );
// 이 함수를 지나면 첫번째 데이터가 아님
isFirstData = false;
}
// CHECKBOX 처리
$('#id3').click( function() {
if ( $('input:checkbox[id="id3"]').is(":checked") == true ) $('.cs').show();
else $('.cs').hide();
});
$('#id4').click( function() {
if ( $('input:checkbox[id="id4"]').is(":checked") == true ) $('.ca').show();
else $('.ca').hide();
});
$('#id5').click( function() {
if ( $('input:checkbox[id="id5"]').is(":checked") == true ) $('.cx').show();
else $('.cx').hide();
});
$('#id6').click( function() {
if ( $('input:checkbox[id="id6"]').is(":checked") == true ) $('.cn').show();
else $('.cn').hide();
});
</script>
</html>