콤보 상자 셀

SpreadJS는 드롭다운 목록을 표시하는 콤보 상자 셀을 지원합니다.

항목 너비가 셀 너비보다 작으면, 항목 너비는 셀 너비로 설정됩니다. 반대로 항목 너비가 더 길면, 가장 긴 항목의 너비가 항목 너비로 설정됩니다.

다음 예제는 항목 목록이 포함된 콤보 상자 셀을 생성합니다.

var cellType2 = new GC.Spread.Sheets.CellTypes.ComboBox();
cellType2.items(["a","b","c"]);
activeSheet.getCell(2, 2).cellType(cellType2);

콤보 상자 셀은 편집 가능하며, 셀의 입력 영역에 직접 입력할 수 있습니다. 사용자가 입력한 내용과 일치하는 항목이 드롭다운 리스트에서 자동으로 선택됩니다.

다음 예제는 편집 가능한 콤보 상자 셀을 생성하고, 항목 목록을 설정하는 코드입니다.

var items2 = ["a", "ab", "abc", "apple", "boy", "cat", "dog"];
var eComboBoxCellType = new GC.Spread.Sheets.CellTypes.ComboBox().items(items2).editable(true);
activeSheet.getCell(1, 3).cellType(eComboBoxCellType);
activeSheet.setColumnWidth(3,120);

드롭다운 목록에 표시되는 항목의 최대 개수는 20개입니다. 드롭다운 목록이 표시된 상태에서는 위쪽 및 아래쪽 화살표 키를 사용하여 항목을 선택할 수 있습니다. 왼쪽 및 오른쪽 화살표 키는 선택한 항목을 확정하고 이전 또는 다음 셀로 이동합니다. Enter 키도 선택한 항목을 확정하며, Esc 키는 선택한 항목을 취소합니다.

빠른 입력 모드(rapid input mode)를 사용하는 경우 화살표 키의 동작이 달라질 수 있습니다. 셀의 편집기 상태가 EditorStatus.Enter인 경우, 왼쪽 또는 오른쪽 화살표 키를 누르면 편집을 종료하고 이전 또는 다음 셀로 이동합니다. 반면, 편집기 상태가 EditorStatus.Edit인 경우에는 왼쪽 또는 오른쪽 화살표 키를 눌러도 편집이 종료되지 않습니다.

콤보 상자 셀 바인딩

SpreadJS는 ComboBox를 테이블 이름이나 수식 평가 결과와 같은 데이터 소스에 바인딩하여 스프레드시트 셀 내에 동적 드롭다운 목록을 생성할 수 있도록 지원합니다. 사용자는 수식을 사용해 데이터를 필터링하거나 고유 값만 추출하거나 정렬된 데이터를 데이터 소스로 사용할 수 있습니다.

ComboBoxCellType 클래스의 dataBinding 메서드를 사용하여 ComboBox 셀 타입을 바인딩하며, 이 메서드는 dataSource, text, value 속성을 인자로 받습니다.

• text 또는 value 중 하나는 테이블의 열 이름 또는 수식 평가 결과의 열 인덱스여야 합니다.

• text 또는 value 중 하나만 설정되면, 나머지도 같은 값으로 설정됩니다.

• text 및 value 모두 설정하지 않으면, 둘 다 데이터 소스의 첫 번째 열에 바인딩됩니다.

  
  

다음 코드는 테이블 이름을 데이터 원본으로 사용하는 경우와 수식 평가 결과를 데이터 소스로 사용하는 경우에 콤보 상자 셀 유형을 바인딩하는 방법을 보여줍니다.

Ask ChatGPT

spread.options.allowDynamicArray = true;
const dataManager = spread.dataManager();
const productsTable = dataManager.addTable("Products", {
     remote: {
         read: {
             url: 'https://northwind.vercel.app/api/products'
         }
     }
 });
await productsTable.fetch(true);

// 테이블 이름에 바인딩
let sheet = spread.getSheet(0);
sheet.name("Binding To A Table Name");
sheet.setColumnWidth(2, 250);
let binding = { dataSource: "Products", text: "name", value: "id" };
let cellType = new GC.Spread.Sheets.CellTypes.ComboBox();
cellType.dataBinding(binding);
sheet.getCell(2, 2).cellType(cellType);

// 수식 쿼리에 바인딩
let sheet1 = spread.getSheet(1);
sheet1.name("Binding To A Formula Query");
sheet1.setColumnWidth(2, 250);
let binding1 = { dataSource: '=SORT(UNIQUE(QUERY("Products", {"name","id"})))', text: 0, value: 1 };
let cellType1 = new GC.Spread.Sheets.CellTypes.ComboBox();
cellType1.dataBinding(binding1);
sheet1.getCell(2, 2).cellType(cellType1);

드롭다운 위치 설정

SpreadJS의 ComboBox 셀 타입은 allowFloat 속성을 제공하여 드롭다운의 위치를 제어할 수 있습니다. 이 속성은 SpreadJS 컴포넌트에 드롭다운을 표시할 충분한 공간이 없거나 드롭다운이 영역을 벗어나는 것을 방지하고자 할 때 유용합니다.

• allowFloat 속성이 false로 설정된 경우 SpreadJS 내부에 드롭다운을 표시할 공간이 부족하면, 드롭다운 크기를 조정하여 SpreadJS 인스턴스 영역을 넘지 않도록 합니다.

• 반대로 allowFloat 속성이 true(기본값)로 설정된 경우, 드롭다운이 열릴 때 SpreadJS 컴포넌트 영역 위에 떠 있는(floating) 형태로 표시되며, 사용자가 스크롤해도 드롭다운의 크기나 위치에 영향을 주지 않습니다.

다음 이미지는 allowFloat 속성이 적용된 ComboBox 셀 타입의 동작을 보여줍니다.