[]
        
(Showing Draft Content)

사용자 정의 컴포넌트 추가

디자이너 컴포넌트에 사용자 정의 컴포넌트를 추가할 수 있습니다. 예를 들어, 다음 샘플은 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);

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