<html>
<head>
<title>sorting a Table</title>
<script type="text/javascript">
var dataset = new Array();// 모든 data를 가지고 있고 정렬시 사용.
/*
작은것이 가장 위로 정렬
colIndex : 원하는 columnIndex
*/
function asc(colIndex){
var sortArray = new Array();
// 정렬을 수행 할 수 있는 행을 추출
for(var i = 0; i < dataset.length; i++){
sortArray[i] = dataset[i][colIndex];
}
// 해당 행으로 정렬을 수행
var first, second, min;
for(first = 0; first < sortArray.length-1; first++){
//a[j]...a[a.length]사이에 가장작은 원소의 인덱스를 찾음
for(second = first+1, min = first; second < sortArray.length; second++){
if(sortArray[second] < sortArray[min])
min = second;
}
swap(sortArray, min, first, min, first);
}
}
// 정렬 중 필요한 인자들의 위치를 바꿔줌
function swap(array, first, second, arrayIndexA, arrayIndexB){
var temp = array[first];
array[first] = array[second];
array[second] = temp;
var tempDataSet = dataset[arrayIndexA];
dataset[arrayIndexA] = dataset[arrayIndexB];
dataset[arrayIndexB] = tempDataSet;
}
/*
큰것이 가장 위로 정렬
colIndex : 원하는 columnIndex
*/
function desc(colIndex){
var sortArray = new Array();
// 정렬을 수행 할 수 있는 행을 추출
for(var i = 0; i < dataset.length; i++){
sortArray[i] = dataset[i][colIndex];
}
// 해당 행으로 정렬을 수행
var first, second, max;
for(first = 0; first < sortArray.length-1; first++){
//a[j]...a[a.length]사이에 가장큰 원소의 인덱스를 찾음
for(second = first+1, max = first; second < sortArray.length; second++){
if(sortArray[second] > sortArray[max])
max = second;
}
swap(sortArray, first, max, first, max);
}
}
/*
List 생성 : 실제로는 가져온 Data를 뿌려 줄 때 JSP등에서 직접 생성하므로 필요 없을 듯 함.
*/
function create(tName, tBodyId){
//var tbody = document.getElementById(id).getElementsByTagName("TBODY")[1];
var tbody = document.getElementById(tBodyId);
for(var i = 1; i < 14; i++){
var row = document.createElement("TR");
var td1 = document.createElement("TD");
var td2 = document.createElement("TD");
var td3 = document.createElement("TD");
var td4 = document.createElement("TD");
var td5 = document.createElement("TD");
td1.appendChild(document.createTextNode(i));
td2.appendChild(document.createTextNode("id " + i));
td3.appendChild(document.createTextNode("title "+ i));
td4.appendChild(document.createTextNode("name " + i));
td5.appendChild(document.createTextNode("date " + i));
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
tbody.appendChild(row);
// rowData create
var rowDatas = new Array();
rowDatas[0] = i;
rowDatas[1] = "id" + i;
rowDatas[2] = "title" + i;
rowDatas[3] = "name" + i;
rowDatas[4] = "date" + i;
dataset.push(rowDatas);
}
}
/*
List 생성
필요인자 :
tBodyId : List할 table 아래에 <TBODY>로 이름지은 elementID
colNum : number of columns
*/
function update(tName, tBodyId, colNum){
clearTable(tName);
for(var i = 0; i < dataset.length; i ++){
var row = document.createElement("tr");
var rowArray = dataset[i];
for(var j = 0; j < colNum; j++){
row.appendChild(createCellWithText(rowArray[j]));
}
document.getElementById(tBodyId).appendChild(row);
}
}
function createCellWithText(text){
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(text));
return cell;
}
/*
해당 Table의 주어진 index의 Row를 삭제
*/
function deleteRow(tName, rowIndex){
var tbody = document.getElementById(tName).getElementsByTagName("TBODY")[1];
tbody.removeChild(rowIndex);
}
/*
해당Table 의 첫번째 Row를 제외한 나머지 Row 모두 제거
*/
function clearTable(tName){
var tbody = document.getElementById(tName).getElementsByTagName("TBODY")[1];
var trows = tbody.rows.length;
//for(var i = trows ; i > 1; i--){
while(tbody.rows.length > 0){
tbody.removeChild(tbody.lastChild);
}
}
/*
엑셀출력.
1. Title
2. Body
- 실제 Data는 표에 있는 내용이 아니라 이미 저장해 놓은 dataset으로 뿌려줌.
*/
function AutomateExcel(xTitle, xColumns){
if(xTitle == null){
xTitle = "Excel download";
}
if(xColumns == null){
xColumns = "Num,ID,Title,Writer,Date";
}
var cols = xColumns.split(",");
var left = "A";
var top = 3;
var right = indexToAlphabet(cols.length);
var bottom = dataset.length + top;
// Start Excel and get Application object.//
try{
var oXL = new ActiveXObject("Excel.Application");
oXL.Visible = true;
// Get a new workbook.
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
//Format Title as bold, vertical alignment = center.
//Title --------------------------------------------------------
oSheet.Range("A1", "E1").Font.Bold = true;
oSheet.Range("A1", "E1").VerticalAlignment = -4108; //xlVAlignCenter
oSheet.Cells(1, 1).Value = xTitle;
//BODY --------------------------------------------------------
//Format Table header
oSheet.Range("A2", "E2").Font.Bold = true;
oSheet.Range("A2", "E2").VerticalAlignment = -4108; //xlVAlignCenter
// Add table headers going cell by cell.
for(var i = 0; i < cols.length; i++){
var j = i+1;
oSheet.Cells(2, j).Value = cols[i];
}
// Create an array to set multiple values at once.
// Range
//oSheet.Range(left + top + "," + right + bottom).Font.Bold = true;
//oSheet.Range(left + top + "," + right + bottom).VerticalAlignment = -4108;
for(var m = 0; m < (bottom-top); m++){
var nowCol = indexToAlphabet(m);
var c = m + 3;
for(var l = 0; l < cols.length; l++){
var r = l + 1;
//oSheet.Cells(c, r).Value = m + " : " + r;
oSheet.Cells(c, r).Value = dataset[m][l];
}
}
///////////////// options of saving //////////////////////////
// Make sure Excel is visible and give the user control
// of Excel's lifetime.
//oXL.Visible = true;
//oXL.UserControl = true;
// save as a file directly
oWB.SaveAs("c:\\test.xls");
oXL.Quit();
}catch(e){
alert("브라우저 옵션 > 도구 > 인터넷옵션 > 보안 > 안전하지 않는 것으로 표시된 ActivX 컨트롤 초기화 및 스크립트 > 확인 ");
}
}
/*
원하는 칼럼의 알파벳을 찾기위한 function
*/
function indexToAlphabet(idx){
var alphabet = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
return alphabet[idx];
}
</script>
</head>
<body>
<input type="button" value="asc" onClick="asc(0);"/>
<input type="button" value="desc" onClick="desc(0);"/>
<input type="button" value="create" onClick="create('tblMain', 'employeeList');"/>
<input type="button" value="update" onClick="update('tblMain', 'employeeList', 5);"/>
<input type="button" value="clear" onClick="clearTable('tblMain');"/>
<input type=button value="Download Excel" onclick="AutomateExcel();">
<p>
<span id="employeeListSpan">
<h2>게시판Test : </h2>
<table id="tblMain" border="1" width="80%">
<tr>
<td>Num</td>
<td>ID</td>
<td>Title</td>
<td>Writer</td>
<td>Date</td>
</tr>
<tbody id="employeeList"></tbody>
</table>
</span>
</body>
</html>
