Type이 Enum이나 Radio 인 열(Column)들 간에 연관성을 통해, 대분류/중분류/소분류와 같은 관계형 콤보를 설정하는 방법입니다.


대분류(혹은 최상위)에 해당하는 열은 Related를 설정할 필요가 없고, 중분류 열에는 대분류 열의 이름(Name)을, 소분류 열에는 중분류 열 이름(Name)을 설정합니다.


샘플페이지 > 컬럼 유형과 기능 > 관계형 콤보 에서 예제 확인 가능합니다.



아래 샘플은 공통코드 테이블의 구조가 자신의 id와 parent id로 구성된 것을 가정하여, json으로 가져온 데이터로 대분류/중분류/소분류 리스트 내용을 추가하는 예제입니다.




onRenderFirstFinish 이벤트에서 조회 전에 Enum, EnumKeys 내용을 추가하는 방법


onRenderFirstFinish:function(evt){  
  //대분류
  //조회전에 Enum,EnumKeys 내용을 추가합니다.
  evt.sheet.setAttribute( null, "Category1", "Enum",
          enumData.filter((v)=>!v.pid).reduce((a,c)=>"|"+c.value+a , "" ) );
  evt.sheet.setAttribute( null, "Category1", "EnumKeys",
          enumData.filter((v)=>!v.pid).reduce((a,c)=>"|"+c.id+a , "" ) );
  
  
  
  //중분류
  //대분류 EnumKeys을 기준으로 item을 추가합니다.
  const cat1EnumKeys = evt.sheet.getAttribute(null, "Category1","EnumKeys").split("|").splice(1);
  let cat2EnumKeys = [];
  for(let i=0;i<cat1EnumKeys.length;i++){
    let tempKeys = enumData.filter((v)=>v.pid==cat1EnumKeys[i]);
    
    evt.sheet.setAttribute(null, "Category2", "Enum"+cat1EnumKeys[i],
          enumData.filter((v)=>v.pid==cat1EnumKeys[i]).reduce((a,c)=>"|"+c.value+a, ""));
    evt.sheet.setAttribute(null, "Category2","EnumKeys"+cat1EnumKeys[i],
          empKeys.reduce((a,c)=>"|"+c.id+a, ""));
    
    //중분류의 EnumKeys를 모아둡니다. 
    cat2EnumKeys.push(...(tempKeys.map(v=>v.id)));
  } 
  
  
  
  //소분류
  //중분류 EnumKeys를 기준으로 item을 추가합니다.
  for(let i=0;i<cat2EnumKeys.length;i++){
    let tempKeys = enumData.filter((v)=>v.pid==cat2EnumKeys[i]);
    
    evt.sheet.setAttribute(null, "Category3", "Enum"+cat2EnumKeys[i],
        enumData.filter((v)=>v.pid==cat2EnumKeys[i]).reduce((a,c)=>"|"+c.value+a, ""));
    evt.sheet.setAttribute(null, "Category3", "EnumKeys"+cat2EnumKeys[i],
        tempKeys.reduce((a,c)=>"|"+c.id+a, ""));
  }

  evt.sheet.loadSearchData(ib.data);
}

예제) https://jsfiddle.net/45wm07vj/