사용자 정의 컴포넌트 추가

디자이너 컴포넌트에 사용자 정의 컴포넌트를 추가할 수 있습니다. 예를 들어, 다음 샘플은 SpreadJS 디자이너 컴포넌트에 '날짜 선택기(Date Picker)' 컴포넌트를 추가합니다.

1. 프로젝트에서 사용자 정의 컴포넌트 클래스를 정의하세요.

   // 사용자 정의 컴포넌트 추가
   var DatePicker = defineCustomComponent();
   
   //컴포넌트 클래스 구조 만들기
   function defineCustomComponent() {
       function DatePicker() {
           GC.Spread.Sheets.Designer.AtomicComponentBase.call(this, ...arguments)
       };
       DatePicker.prototype = new GC.Spread.Sheets.Designer.AtomicComponentBase();
       // 이 함수는 컴포넌트의 innerHTML을 정의하는 데 사용됩니다.
       DatePicker.prototype.getTemplate = function () {
           return `
               <div class="input-append date" style="margin-top: 35px;">
                 <input size="20" class ='form_date' type="text">
               </div>
               `;
       }
       // 이제 호스트 요소가 DOM에 추가되었으며, 여기에 이벤트 리스너를 추가할 수 있습니다.
       DatePicker.prototype.onMounted = function (host) {
           $(".form_date", host).datepicker();
   
           // 날짜 선택기가 변경되면 값 변경 이벤트를 발생시킵니다.
           $(".form_date", host).change((e) => {
               this.raiseValueChanged()
           })
       }
       DatePicker.prototype.onValueChanged = function (prevValue, nextValue, host) {
           $(".form_date", host).datepicker('setDate', (nextValue && nextValue.toLocaleString) ? nextValue.toLocaleString('en-us', { year: 'numeric', month: 'numeric', day: 'numeric' }) : "");
       }
       // 이 함수는 raiseValueChanged() 이후에 호출됩니다.
       DatePicker.prototype.updateValue = function (host) {
           var value = $(".form_date", host).datepicker('getDate')
           if (value) {
               return new Date(value);
           }
           return null;
       }
       // 부트스트랩 데이트피커를 제거하고 change 이벤트의 바인딩을 해제하세요.
       DatePicker.prototype.onDestroy = function (host) {
           $(".form_date", host).datepicker("destroy");
           $(".form_date", host).unbind("change");
       }
   
       return DatePicker;
   }

2. Designer.RegisterComponent 메서드를 사용하여 사용자 정의 컴포넌트를 디자이너에 등록하세요.

   // 사용자 정의 컴포넌트를 디자이너에 등록하기
   GC.Spread.Sheets.Designer.Designer.RegisterComponent("DatePicker", DatePicker);

3. 프로젝트에서 사용자 정의 컴포넌트 명령을 정의하세요.

   // 사용자 정의 컴포넌트 명령 사용법 – 명령 구현
   var date = initCommand();
   
   //명령 구현
   function initCommand() {
       return {
           title: "Set Date",
           text: "Set Date",
           commandName: "date",
           type: 'DatePicker',
           execute: (designer, propertyName, value) => {
               let sheet = designer.getWorkbook().getActiveSheet();
               if (sheet) {
                   var row = sheet.getActiveRowIndex();
                   var col = sheet.getActiveColumnIndex();
                   sheet.setValue(row, col, value);
               }
           },
           getState: (designer) => {
               var spread = designer.getWorkbook();
               var sheet = spread.getActiveSheet();
               var row = sheet.getActiveRowIndex();
               var col = sheet.getActiveColumnIndex();
               var value = sheet.getValue(row, col);
               return value;
           }
       };
   }

4. 위 명령을 commandMap에 설정하고 디자이너 구성에 사용자 정의 컴포넌트를 추가하세요.

   // 사용자 정의 디자이너 구성
   var config = initConfig(date);
   
   //디자이너 구성 맞춤화하기
   function initConfig(date) {
       var config = GC.Spread.Sheets.Designer.DefaultConfig;
       // commandMap에 명령을 설정하세요.
       config.commandMap = {
           cmdDatePicker: date
       }
       // 구성에 사용자 정의 컴포넌트 버튼을 추가하세요.
       var command = {
           text: "DATE",
           id: "date",
           buttonGroups: [
               {
                   label: "DATE",
                   commandGroup: {
                       direction: "horizontal",
                       commands: ["cmdDatePicker"]
                   }
               }
           ]
       };
       config.ribbon.unshift(command);
       return config;
   }

5. 사용자 맞춤 구성을 위해 관련 설정 파라미터를 전달하여 디자이너 인스턴스를 초기화하세요.

   // 구성을 사용해 디자이너 생성하기
   designer = new GC.Spread.Sheets.Designer.Designer(designer_host, config);

아래와 같은 결과가 생성됩니다: