JavaScript 스프레드시트에 자동완성 셀을 추가하는 방법
페이지 정보
작성자 GrapeCity 작성일 2019-06-04 00:00 조회 1,896회 댓글 0건본문
첨부파일
관련링크
CellTypes의 개념은 SpreadJS의 주요 기능 중 하나입니다. 셀에 표시되는 정보 유형과 정보 표시 방법 및 사용자와의 상호 작용 방법을 정의합니다.
SpreadJS를 사용하면 Button , ComboBox , CheckBox 및 Hyperlink 와 같은 다양한 유형의 셀을 만들 수 있습니다 . 다른 셀 유형을 자세히 설명하는 문서 링크를 참조하세요. 이 목록에는 사용자 정의 유형 셀인 CustomCellType 도 포함됩니다. CustomCellType을 사용하면 SpreadJS에서 다른 유형의 기능을 갖는 여러 가지 새로운 유형의 셀을 작성할 수 있습니다. 예를 들어, FivePointedStarCellType , FullNameCellType 등을 작성할 수 있습니다. 이와 관련된 자세한 설명은 여기를 참조하세요.
이 포스팅에서는 SpreadJS에서 동일한 개념을 사용하여 AutoCompleteCellType을 작성하는 방법에 대해 설명합니다. 이름에서 알 수 있듯이 AutoCompleteCellType은 사용자에게 선택할 값 목록을 제공합니다. 그러나 목록과 함께 셀을 입력할 수 있는 옵션도 제공하고 입력한 문자를 기반으로 드롭다운 목록에서 일치하는 값을 입력 제안으로 표시합니다. 사용자는 다음 옵션 중 하나를 선택하여 셀 값으로 설정할 수 있습니다.
어떻게 이 기능을 구현할 수 있는지 살펴보겠습니다.
- AutoComplete 셀 유형에 대한 배열을 만듭니다.
var availableTags = [
"ActionScript",
"Asp",
"BASIC",
"C",
"C++",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Java",
"JavaScript",
"Perl",
"PHP",
"Ruby"
];
- CustomCellType 을 사용하여 AutoCompleteCellType을 작성합니다.
function AutoCompleteCellType()
{ }
AutoCompleteCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
- 드롭 다운 목록을 표시하도록 셀에 사용자 정의 편집기를 추가합니다.
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;
}
- 드롭 다운 목록에서 위로 및 아래로 키를 처리하기 위해 다음 코드를 작성합니다.
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);
}
- 스프레드 시트에 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);
- 애플리케이션을 실행하면 AutocompleteCellType이 작동하는 것을 볼 수 있습니다.
완성되었습니다. 첨부 파일을 통해 샘플을 다운로드 하세요.
댓글목록
등록된 댓글이 없습니다.