[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

목록 자동 채우기

SpreadJS는 사용자가 드래그 채우기(Drag Fill) 옵션을 사용하여 목록을 자동으로 채울 수 있도록 지원합니다. 아래와 같은 방식으로 목록을 채울 수 있습니다.

  1. 내장 목록을 사용한 드래그 채우기

  2. 사용자 지정 목록을 사용한 드래그 채우기


내장 목록을 사용한 드래그 채우기

SpreadJS는 기본적으로 사용할 수 있는 내장 목록을 제공합니다. 이러한 목록은 주로 요일 약어, 요일 전체 이름, 월 약어, 월 전체 이름을 채우고자 할 때 사용됩니다. 내장 목록을 대상으로 드래그 채우기 작업을 수행할 때는 대소문자를 구분하지 않지만, 채워질 값은 반드시 목록의 항목과 정확히 일치해야 합니다.

여러 문화권(culture)에 따라 내장 목록은 각기 다른 언어로 표시됩니다. 아래 표에 예시된 것처럼, 기본 문화권은 "en-US"이며, 이 경우 목록은 영어로 정의됩니다.

문화

목록

"en-US"

[

['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],

['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

]

"ja-JP"

[

['日', '月', '火', '水', '木', '金', '土'],

['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],

['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],

['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

]

"zh-cn"

[

['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],

['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

]

"ko-kr"

[

["일", "월", "화", "수", "목", "금", "토"],

["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],

["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],

["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]

]

사용자 지정 목록을 사용한 드래그 채우기

사용자 지정 목록을 생성하고 사용하는 것은, 반복적으로 데이터를 입력해야 하는 대규모 비즈니스 애플리케이션에서 특히 유용합니다. 예를 들어, 매출 수치 추정, 특정 지역 분석, 제품 카테고리 평가, 월간·분기별·연간 정보 시각화 등과 같은 작업을 수행할 때마다 데이터를 매번 수동으로 입력하는 것은 번거로운 일입니다. 또한 기본 자동 채우기 옵션만으로는 원하는 사용자 정의 시리즈나 순서, 스타일, 패턴을 정확히 재현할 수 없는 경우도 있습니다. 이런 경우에 사용자 지정 목록을 사용하면, 정의된 순서대로 반복되는 나만의 데이터 시리즈를 만들어 드래그 채우기 작업 시 자동으로 채워지도록 설정할 수 있습니다.

사용자 지정 목록을 만들기 위해서는, 채우고자 하는 셀에 두 개 이상의 항목을 순서대로 입력한 다음, 해당 셀 범위의 채우기 핸들을 위 또는 아래 방향으로 드래그하면 됩니다. 데이터는 사용자 지정 목록에 정의된 내용과 순서에 따라 자동으로 채워지며, 아래 이미지는 그 예를 보여줍니다.



아래의 코드 샘플은 SpreadJS에서 내장 목록 및 사용자 지정 목록을 사용하여 셀을 자동 채우는 방법을 보여줍니다.

$(document).ready(function () {
  // 사용자 지정 목록 정의
  var customList =
  [
    ['Light', 'Sun', 'Moon', 'Star', 'Sky', 'Rain'], ['Dog', 'Cat', 'Lion', 'Fish', 'Snake']
  ];

  // Spread 초기화
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2,  customList: customList });
  var sheet = spread.getSheet(0);
  sheet.name("Built-in DragFill");

  // 내장 목록 채우기
  sheet.setValue(0, 0, 'Sunday');
  sheet.setValue(1, 0, 'Monday');
  var startRange = new GC.Spread.Sheets.Range(0, 0, 2, 1);
  var fillRange = new GC.Spread.Sheets.Range(0, 0, 10, 1);
  sheet.fillAuto(startRange, fillRange, {
    fillType: GC.Spread.Sheets.Fill.FillType.auto,
    series: GC.Spread.Sheets.Fill.FillSeries.column
  });
  // 사용자 정의 DragFill
  var sheet1 = spread.getSheet(1);
  sheet1.name("Custom DragFill");
  sheet1.setValue(0, 0, 'Please drag up or down');
  sheet1.setValue(2, 0, 'The custom list customized two array currently');
  sheet1.setValue(3, 0, 'Enter one or more consecutive string from the list in the cell to dragfill');
  var customList = sheet1.parent.options.customList;
  for (var i = 0; i < customList.length; i++) {
    var itemList = customList[i];
    sheet1.setValue(5 + i, 0, 'List ' + i + ": ");
    itemList.forEach(function (item, index) {
      sheet1.setValue(5 + i, index + 1, item);
    });
  }
});