리스트박스

ListBox 개요

ListBox 컨트롤은 일반 텍스트 또는 HTML을 포함할 수 있는 항목 목록을 표시하며 마우스나 키보드를 사용하여 항목을 선택할 수 있습니다. 원하는 대로 검색할 수 있는 기능이 있습니다.

문자열 배열을 사용하여 ListBox를 채우거나 객체 배열을 사용할 수 있습니다. 이 경우 displayMemberPath 속성에 따라 목록에 표시되는 객체 속성이 결정됩니다. 현재 선택된 항목을 결정하기 위한 selectedIndex 속성을 사용할 수 있습니다.

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

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

키(Key)	동작
Up/Down	이전/다음 항목 선택
PageUp/Down	선택 항목 위 또는 아래 한 페이지 항목 선택
Home/End	첫 번째/마지막 항목 선택
Space	현재 항목의 checkbox을 전환(checkedMemberPath 속성 참조)
Other	문자 입력한 텍스트가 포함된 항목 검색(다중 문자 자동 검색)}

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

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

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

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

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

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.co.kr/wijmojs">Javascript</a>',
    '<a href="https://www.grapecity.co.kr/spreadjs">Spreadsheets</a>',
    '<a href="https://www.grapecity.co.kr/activereports">Reports</a>',
    '<a href="https://www.grapecity.co.kr/gcexcel-core">Excel APIs</a>',
    '<a href="https://www.grapecity.co.kr/componentone-enterprise">.Net</a>',
    ];
  }
}

시간입력

개요