[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo_Input.Listbox

ListBox クラス

ListBox コントロールは、プレーンテキストまたはHTMLを含む項目のリストを 表示し、ユーザーがキーボードまたはマウスで項目を選択できるようにします。

ListBox.selectedIndex プロパティを使用して、現在選択されている項目を 特定します。

ListBox に項目を挿入するには、文字列の配列またはオブジェクトの配列を 使用できます。 オブジェクトの配列の場合は、 ListBox.displayMemberPath プロパティで、リストに表示するオブジェクトのプロパティを指定します。

プレーンテキストではなくHTMLを保持する項目を表示するには、 ListBox.isContentHtml プロパティをtrueに設定します。

ListBox コントロールは以下のキーボードコマンドをサポートします。

キーの組み合わせアクション
↑/↓前の項目/次の項目を選択します。
PageUp/Down選択項目の1ページ上または1ページ下の項目を選択します。
Home/End最初の項目/最後の項目を選択します。
Space現在の項目のチェックボックスを切り替えます(checkedMemberPath プロパティを参照)。
その他の文字入力されたテキスト(複数文字の自動検索)を含む項目を検索します。

次の例は、 ListBox コントロールを作成した後、 'countries'配列を使用して設定します。 ユーザーが選択範囲を移動すると、コントロールはその ListBox.selectedIndex プロパティと ListBox.selectedItem プロパティを更新します。

Example

階層

  • any
    • ListBox

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • new ListBox(element: any, options?: any): ListBox

  • ListBox クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター（例: '#theCtrl'）。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    戻り値 ListBox

プロパティ

checkedItems

checkedItems: any[]

現在チェックされている項目を含む配列を取得または設定します。

checkedMemberPath

checkedMemberPath: string

各項目の隣に配置したチェックボックスを制限するために使用されるプロパティの名前を取得または設定します。

このプロパティを使用して、複数選択ListBoxを作成します。 項目をオンまたはオフにすると、itemChecked イベントが発生します。 オン/オフにした項目を取得するには、selectedItem プロパティを使用します。 現在オンの項目のリストを取得するには、checkedItems プロパティを使用します。

collectionView

collectionView: ICollectionView

項目ソースとして使用されるICollectionView オブジェクトを取得します。

displayMemberPath

displayMemberPath: string

項目の視覚表示として使用するプロパティの名前を取得または設定します。

isContentHtml

isContentHtml: boolean

項目の内容がプレーンテキストとHTMLのどちらであるかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

itemFormatter

itemFormatter: Function

リストに表示される値のカスタマイズに使用される関数を取得または設定します。 この関数は、2つの引数として項目インデックスとデフォルトのテキストまたはHTMLを 受け取り、表示する新しいテキストまたはHTMLを返します。

書式設定関数がスコープ（意味のある'this'値など）を必要とする場合は、 'bind'関数を使用してフィルタを設定し、 'this'オブジェクトを指定してください。次に例を示します。 

  listBox.itemFormatter = customItemFormatter.bind(this);
  function customItemFormatter(index, content) {
    if (this.makeItemBold(index)) {
      content = '<b>' + content + '</b>';
    }
    return content;
  }

itemRole

itemRole: string

リスト項目に追加されている「role」属性の値を取得または設定します。このプロパティのデフォルト値は 「option」です。

itemsSource

itemsSource: any

リスト項目を含む配列またはICollectionView オブジェクトを取得または設定します。

maxHeight

maxHeight: number

リストの最大の高さを取得または設定します。

selectedIndex

selectedIndex: number

現在選択されている項目のインデックスを取得または設定します。

selectedItem

selectedItem: any

現在選択されている項目を取得または設定します。

selectedValue

selectedValue: any

selectedValuePath を使用して取得されたselectedItem の値を取得または設定します。

selectedValuePath

selectedValuePath: string

selectedValue をselectedItem から取得するために使用するプロパティの名前を 取得または設定します。

showGroups

showGroups: boolean

データグループを区切るために ListBox にグループヘッダー項目を含めるかどうかを決定する値を 取得または設定します。

データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのICollectionView.groupDescriptions プロパティを変更します。 ListBox には、グループ化の最初のレベルのみが表示されます。

このプロパティのデフォルト値はfalseです。

メソッド

getDisplayText

  • getDisplayText(index: number): string

  • 指定したインデックスにある項目に対して表示されるテキストを（プレーンテキストとして）取得します。

    引数

    • index: number

      itemsSource 内の項目のインデックス。

    戻り値 string

getDisplayValue

  • getDisplayValue(index: number): string

  • 指定したインデックスにある項目に対して表示される文字列を取得します。

    この文字列は、isContentHtml プロパティの設定に応じてプレーンテキストまたはHTMLのどちらかになります。

    引数

    • index: number

      itemsSource 内の項目のインデックス。

    戻り値 string

getItemChecked

  • getItemChecked(index: number): boolean

  • リストの項目のチェック状態を取得します。

    このメソッドは、複数選択ListBoxにのみ適用できます （checkedMemberPath プロパティを参照）。

    引数

    • index: number

      項目インデックス。

    戻り値 boolean

indexOf

  • indexOf(e: HTMLElement): number

  • リスト内の要素のデータインデックスを取得します。

    引数

    • e: HTMLElement

      検索する要素。

    戻り値 number

    The index of the element in the list, or -1 if the element is not a member of the list.

isItemEnabled

  • isItemEnabled(index: number): boolean

  • 指定したインデックスにある項目が有効かどうかを決定する値を取得します。

    引数

    • index: number

      itemsSource 内の項目のインデックス。

    戻り値 boolean

loadList

  • loadList(): void

  • 現在のitemsSource からの項目を含むリストをロードします。

    戻り値 void

onCheckedItemsChanged

onFormatItem

onItemChecked

  • itemChecked イベントを発生させます。

    引数

    戻り値 void

onItemsChanged

onLoadedItems

  • loadedItems イベントを発生させます。

    引数

    戻り値 void

onLoadingItems

onSelectedIndexChanged

  • onSelectedIndexChanged(e?: EventArgs): void

refresh

  • refresh(fullUpdate?: boolean): void

  • コントロールを更新します。

    引数

    • オプション fullUpdate: boolean

      内容だけでなくコントロールのレイアウトも更新するかどうか。

    戻り値 void

setItemChecked

  • setItemChecked(index: number, checked: boolean): void

  • リストの項目のオン/オフ状態を設定します。

    このメソッドは、複数選択ListBoxにのみ適用できます （checkedMemberPath プロパティを参照）。

    引数

    • index: number

      項目インデックス。

    • checked: boolean

      項目の新しいチェック状態。

    戻り値 void

showSelection

  • showSelection(setFocus?: boolean): void

  • 選択された項目を強調表示し、画面に入るようにスクロールします。

    引数

    • オプション setFocus: boolean

      選択された項目をスクロールして画面に表示した後にフォーカスをリストに設定するかどうかを示す値。

    戻り値 void

toggleItemChecked

  • toggleItemChecked(index: number): void

  • リストの項目のオン/オフ状態を切り替えます。 このメソッドは、複数選択ListBoxにのみ適用できます （checkedMemberPath プロパティを参照）。

    引数

    • index: number

      項目インデックス。

    戻り値 void

イベント

checkedItemsChanged

checkedItemsChanged: Event

checkedItems プロパティの値が変更されたときに発生します。

formatItem

formatItem: Event

リスト項目を表す要素が作成されたときに発生します。

このイベントは、目的はitemFormatter プロパティと同じですが、 複数の独立したハンドラを使用できる利点があります。

itemChecked

itemChecked: Event

ユーザーが現在の項目をオンまたはオフにすると発生します。

このイベントは、checkedMemberPath にプロパティの名前を設定して、 コントロール内の各項目に チェックボックスを追加した場合に発生します。 オン/オフにした項目を取得するには、 selectedItem プロパティを使用します。

itemsChanged

itemsChanged: Event

項目のリストが変更されたときに発生します。

loadedItems

loadedItems: Event

リスト項目が生成される後に発生します。

loadingItems

loadingItems: Event

リスト項目が生成される前に発生します。

selectedIndexChanged

selectedIndexChanged: Event

selectedIndex プロパティの値が変更されたときに発生します。