<JAVA SCRIPT> 정렬기능과 Excel 다운로드 기능.

2008. 9. 3. 17:14

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

728x90