CellTypes의 개념은 SpreadJS의 주요 기능 중 하나입니다. 셀에 표시되는 정보 유형과 정보 표시 방법 및 사용자와의 상호 작용 방법을 정의합니다.

SpreadJS를 사용하면 Button , ComboBox , CheckBox 및 Hyperlink 와 같은 다양한 유형의 셀을 만들 수 있습니다 . 다른 셀 유형을 자세히 설명하는 문서 링크를 참조하세요. 이 목록에는 사용자 정의 유형 셀인 CustomCellType 도 포함됩니다.  CustomCellType을 사용하면 SpreadJS에서 다른 유형의 기능을 갖는 여러 가지 새로운 유형의 셀을 작성할 수 있습니다. 예를 들어, FivePointedStarCellType , FullNameCellType 등을 작성할 수 있습니다. 이와 관련된 자세한 설명은 여기를 참조하세요.

이 포스팅에서는 SpreadJS에서 동일한 개념을 사용하여 AutoCompleteCellType을 작성하는 방법에 대해 설명합니다. 이름에서 알 수 있듯이 AutoCompleteCellType은 사용자에게 선택할 값 목록을 제공합니다. 그러나 목록과 함께 셀을 입력할 수 있는 옵션도 제공하고 입력한 문자를 기반으로 드롭다운 목록에서 일치하는 값을 입력 제안으로 표시합니다. 사용자는 다음 옵션 중 하나를 선택하여 셀 값으로 설정할 수 있습니다.

어떻게 이 기능을 구현할 수 있는지 살펴보겠습니다.

1. AutoComplete 셀 유형에 대한 배열을 만듭니다.

var availableTags = [
                "ActionScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Java",
                "JavaScript",
                "Perl",
                "PHP",
                "Ruby"
            ];

2. CustomCellType 을 사용하여 AutoCompleteCellType을 작성합니다.

function AutoCompleteCellType() 
{   }
AutoCompleteCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();

3. 드롭 다운 목록을 표시하도록 셀에 사용자 정의 편집기를 추가합니다.

AutoCompleteCellType.prototype.createEditorElement = function (context) {

        var firstElementText;
        var editor = document.createElement("input");
        $( editor ).autocomplete({
               source: availableTags,
                     minLength: 1,
                     focus: function() { return false; },
                     open: function( event, ui ) 
                     {
                     firstElement = $(this).data("uiAutocomplete").menu.element[0].children[0],
                     inpt = $(editor),
                     original = inpt.val(),
                     firstElementText = $(firstElement).text();
                     if (firstElementText.toLowerCase().indexOf(original.toLowerCase()) === 0) 
                     {
                     inpt.val(firstElementText); //change the input to the first match
                     inpt[0].selectionStart = original.length; //highlight from end of input
                     inpt[0].selectionEnd = firstElementText.length; //highlight to the end
                     console.log(inpt);
                     console.log(original);
                     console.log(firstElementText);
                     }
                     },
                    close:function(event,ui)
                    {
                        context.sheet.setValue(context.row,context.col,firstElementText);
                    },
                     autoFocus:true
            });
            return editor;

             }

4. 드롭 다운 목록에서 위로 및 아래로 키를 처리하기 위해 다음 코드를 작성합니다.
   

AutoCompleteCellType.prototype.isReservedKey = function (e, context) {
// reserve up/down key to select items
if (context.isEditing && (e.keyCode == 40 || e.keyCode == 38)) 
{ 
       return true;
}
return GC.Spread.Sheets.CellTypes.Text.prototype.isReservedKey.apply(this, arguments);
}

5. 스프레드 시트에 AutoCompleteCellType을 지정하기 위해 다음 코드를 추가합니다.
   

var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);
var sheet = spread.getActiveSheet();
sheet.suspendPaint(true);
sheet.setValue(0, 1, "AutoComplete", GC.Spread.Sheets.SheetArea.colHeader);
sheet.getRange(-1, 1, -1, 1).cellType(new AutoCompleteCellType()).width(100);
sheet.resumePaint(false);

6. 애플리케이션을 실행하면 AutocompleteCellType이 작동하는 것을 볼 수 있습니다.
   

완성되었습니다. 첨부 파일을 통해 샘플을 다운로드 하세요.