블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
2006. 11. 8. 15:57 Programing/HTML/JavaScript/CSS

selectbox 에 항목을 추가 삭제 할때 자동으로 정렬을 해주는 방법이다.
만들때는 생각을 안했는데 해 놓고 보니 MVC or MVP 패턴과 닮았다.
Smalltalk의 영향인가...

항목(item)에 대한 Model 객체(Array)가 있고

var keyword_list = new Array();

Model에 변화가 생기면 View를 바꾼다.

function refreshList(){
   var listObj = document.getElementById('list');

   clearList();
   keyword_list.sort();

   var arr_text = '';

   for(var i=0; i<keyword_list.length; i++){
       var newOpt = document.createElement('OPTION');
       newOpt.value = keyword_list[i];
       newOpt.text = keyword_list[i];

       arr_text += '[' + i + '] => ' + keyword_list[i] + '<br />';
       listObj.add(newOpt);
   }

   document.getElementById('arrayDesc').innerHTML = arr_text;
}

전체 소스를 보자....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script language="JavaScript">
<!--

var keyword_list = new Array();

function itemAdd(){
   var keywordObj = document.getElementById('keyword');

   if(keywordObj.value == ''){
       keywordObj.focus();
       return false;
   }

   keyword_list.push(keywordObj.value);
   keywordObj.value = '';
   keywordObj.focus();

   refreshList();
}

function refreshList(){
   var listObj = document.getElementById('list');

   clearList();
   keyword_list.sort();

   var arr_text = '';

   for(var i=0; i<keyword_list.length; i++){
       var newOpt = document.createElement('OPTION');
       newOpt.value = keyword_list[i];
       newOpt.text = keyword_list[i];

       arr_text += '[' + i + '] => ' + keyword_list[i] + '<br />';
       listObj.add(newOpt);
   }

   document.getElementById(arrayStat).innerHTML = arr_text;
}

function itemRemove(){
   var listObj = document.getElementById('list');

   if(listObj.selectedIndex < 0){
       return false;
   }

   keyword_list.splice(listObj.selectedIndex,1);
   refreshList();
}

function clearList(){
   var listObj = document.getElementById('list');

   while(listObj.length > 0){
       listObj.remove(0);
   }
}
//-->
</script>
</head>

<body>
<input type="text" id="keyword" value="" />&nbsp;
<input type="button" value="추가" onClick=" itemAdd();" />
<hr />

<div>
   <div style="width: width: 120px; padding: 0; float: left;">
       <select id="list" size="10" style="width: 100px;">
       </select><input type="button" value="삭제" onClick=" itemRemove();" />
   </div>
   <div id="arrayStat" style="border: solid 1px #D9D9D9; width: 120px;"></div>
</div>
</body>
</html>

* 오른쪽에 보이는 레이어(arrayStat)는 Model의 상태를 나타내는 역할을 한다.

아무래도 배열을 쓰고 Model이 바뀔때마다 View를 초기화 하고 다시 뿌려주니
많은 데이터를 처리할때는 속도가 걸림돌이 될 것 같다.

posted by 초딩입맛제주아재