Alopex UI Combo 설정방법 및 팁

Html Tag에 아래와 같이 설정

<select class="Combobox" id="nation_cd"
	data-bind-option="nation_cd:nation_nm"
	data-bind="options:data, selectedOptions: nation_cd">
</select>

data-bind-option : select value : select text를 의미한다

data-bind: select의 option을 생성하는 data

 

nation_cd는 $("#nation_cd").getData()시에 bind될 key값을 의미함

 

Initail이 되고 페이지 로드이후 아래의 script를 호출하면

var data = [
	{nation_cd:"KR", nation_nm:"KOREA" },
  	{nation_cd:"JP", nation_nm:"JAPAN" },
  	{nation_cd:"US", nation_nm:"USA"},
  	{nation_cd:"CN", nation_nm:"CHINA"}
];
  
  
$('#nation_cd').setData({data:data ,nation_cd: 'US'}); // 2번재 파라메터는 기본값

 

가끔 공통코드를 사용할대 CODE_CD/CODE_NM으로 올경우 select tag변환하기보다 아래의 함수를 통해 새로 컨버팅한다.

 

var data = [
	{CODE_CD:"KR", CODE_NM:"KOREA" },
  	{CODE_CD:"JP", CODE_NM:"JAPAN" },
  	{CODE_CD:"US", CODE_NM:"USA"},
  	{CODE_CD:"CN", CODE_NM:"CHINA"}
];

function codeToSelectOptionData(codeList,valueColumn, textColumn){	
	if(isExist(codeList) ==  false){
		return [];
	}	
	return codeList.map(function(val, idx){
		val.text = val[textColumn]
		val.value = val[valueColumn];
		return val; 
	});
}


var nationDataForCombo = codeToSelectOptionData(data,'CODE_CD', 'CODE_NM')
$('#nation_cd').setData({data:nationDataForCombo ,nation_cd: 'US'});