ListBox 개요

ListBox 컨트롤은 일반 텍스트 또는 HTML을 포함하는 항목 목록을 표시하며, 마우스 또는 키보드를 사용하여 항목을 선택할 수 있습니다. 이것은 멋있는 검색 as-you-type 기능을 가지고 있습니다.

문자열 배열을 사용하거나 객체 배열을 사용하여 ListBox를 채울 수 있는데, 이 경우 displayMemberPath 속성에 따라 목록에 표시되는 객체 속성이 결정됩니다. 그리고 selectedIndex 속성을 사용하여 현재 선택되어 있는 항목을 확인합니다.

일반 텍스트가 아닌 HTML이 포함된 항목을 표시하려면 isContentHtml 속성을 true로 설정하시길 바랍니다.

ListBox 컨트롤은 다음 키보드 명령을 지원합니다:

예시: ListBox 컨트롤을 만들고 국가에 대한 정보가 있는 객체 배열을 사용하여 채웁니다. displayMemberPath 속성은 __'country'__필드로 설정되어 ListBox에 국가 이름을 표시합니다.

HTML

<div style="width:250px;" id="theListBox"></div>

Javascript

onload = function() {
import * as wjInput from '@grapecity/wijmo.input';
import { getData } from './data';

function init() {
    var theListBox = new wjInput.ListBox('#theListBox', {
        displayMemberPath: 'country',
        itemsSource: getData()
    });
}

Binding to HTML content

예시: 앵커 태그(html<a>)의 배열을 사용하고 isContentHtml 속성을 true로 설정하여 다양한 그레이프시티(Grapecity) 제품에 대한 링크를 나열하는 ListBox 컨트롤을 만듭니다.

HTML

<label style="font-size:30px;" for="theListBox">Grapecity Products</label>
<br/>
<div style="width:250px;" id="theListBox"></div>

Javascript

import * as wjInput from '@grapecity/wijmo.input';

function init() {

  // ListBox
  var theListBox = new wjInput.ListBox('#theListBox', { isContentHtml: true,
    itemsSource: getData(),
    maxHeight: 200,
    selectedIndex: -1
  });

	// list of Grapecity product pages
  function getData() {
	  return ['<a href="https://www.grapecity.com/en/#product-wj">Javascript</a>',
    '<a href="https://www.grapecity.com/en/#product-sp">Spreadsheets</a>',
    '<a href="https://www.grapecity.com/en/#product-ar">Reports</a>',
    '<a href="https://www.grapecity.com/en/#product-dx">Document APIs</a>',
    '<a href="https://www.grapecity.com/en/#product-c1">.Net, Xamarin</a>',
    ];
  }
}