Type : Enum 열(Column)은 클릭 시 리스트가 펼쳐지며 설정한 내용이 보이게 됩니다.



이 리스트 안에 아이템을 여러 개 열(Column)형태로 표현하거나, 이미지를 표시하는 등 다양한 기능을 구현 할 수 있습니다.



1. 리스트의 내용을 Enum과 다르게 표현하기

EditEnum 속성을 통해 선택된 값과 리스트의 값을 다르게 표현 할 수 있습니다.

Enum, EditEnum 속성 설정 시 리스트 값에 \t를 추가하여 다 단 형태를 구현할 수 있습니다.

// IBSheet8 생성 부
Cols:[
    {"Header": "현재작업상태","Type": "Enum","Name": "PRate", 
       "EnumKeys": "|01|02|03",   // 디비 저장 값
       "Enum": "|대기|진행중|완료", // 셀(Cell)에 표시되는 값
       "EnumEdit": "|대기\tDelay\t01|진행중\tProcess\t02|완료\tComplete\t03" // 리스트에 표시되는 값
    },
   ...
]


2. attribute+Formula 를 통한 리스트 내용 동적 변경

{
"Def": {
      "Row": {
      "CanFormula": true,
      "CalcOrder": "sPosEnum,sPosEnumKeys"
},
"Cols":[
    ....

    {"Header": "직급","Type": "Enum","Name": "sPos","Width": "95","Align": 
    "Center","ColorFormula": changeColorFormula,"CanEdit": 1,"RawSort": 1,
    "Enum": "|대표이사|이사|상무|소장|차장|부장|과장|대리|사원",
    "EnumKeys": "|01A|02A|03A|04A|04B|05B|06B|07B|08B|09B",
    "EnumFormula": enumFormula,"EnumKeysFormula": enumKeysFormula},

    ....
    ]
}

function enumFormula(f) {
  return f.Row['Chk'] ? '|대표이사|이사|상무|소장' : '|차장|부장|과장|대리|사원';
}

function enumKeysFormula(f) {
  return f.Row['Chk'] ? '|01A|02A|03A|04A' : '|04B|05B|06B|07B|08B|09B';
}

[채크박스 체크시]


[체크박스 언체크시]


예제보기)

https://jsfiddle.net/83fzck0v/


3. Type:"Enum"인  열(Column)에 Menu 기능 사용하기

1) 일부 아이템 선택 불가

{
  
"Cols": [
  {
    Header: "Type Enum",           
    Type: "Enum",
    Name: "sEnum",
    Enum: "|안산1|안산2|화성1|화성2|화성3|일산1|일산2",
    EnumKeys: "|A0|B0|C0|D0|E0|F0|G0",
    EnumMenu : {
      Items: [
        { Text: "안산1", Value: "A0", Disabled: 1 },
        { Text: "안산2", Value: "B0" },
        { Text: "화성1", Value: "C0" },
        { Text: "화성2", Value: "D0" },
        { Text: "화성3", Value: "E0", Disabled: 1 },
        { Text: "일산1", Value: "F0" },
        { Text: "일산2", Value: "G0" },
      ]
    },
    Width: 200,
    }
]
}


예제보기)

https://jsfiddle.net/kdwzexp0/


2) EnumMenu를 이용한 버튼 추가

var menuInit = {
  Color: "#DDFFDD",
  MenuMaxHeight: 50, //드랍리스트의 높이를 줄임
  Enum: "|안산1|안산2|화성1|화성2|화성3|일산1|일산2",
  EnumKeys: "|01|02|03|04|05|06|07",
  EnumMenu : {
    Items: [
          {Text: "공사현장 리스트",Caption: 1},
          {Text: "[안산1] 경기도 안산시 단원구 광덕3로 201",Value: "안산1"},
          {Text: "[안산2] 경기도 안산시 단원구 신길동 1509",Value: "안산2"},
          {Text: "[화성1] 경기도 화성시 반송동", Value: "화성1"},
          {Text: "[화성2] 경기도 화성시 동탄대로22길 30", Value: "화성2"},
          {Text: "[화성3] 경기도 화성시 산척동 283", Value: "화성3"},     
          {Text: "[일산1] 경기도 고양시 일산동구 정발산로82번길 10", Value: "일산1"},
          {Text: "[일산2] 경기도 고양시 일산동구 장항동 1761", Value: "일산2"},
    ],
    "Buttons":["item 추가"],
    OnButton:function(selectitem){
      if(selectitem == "item 추가"){
        alert("아이템 추가 버튼을 클릭하셨습니다.")
      }
    }
  }
}

options.Cols  = "Cols": [
   ...
    {"Header": "콤보(Enum)","Type": "Enum","Name": "ComboData",Extend:menuInit},
   ...
 ]


예제보기)

https://jsfiddle.net/6t9q21gk/