[]
【重要】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 プロパティを更新します。

デモ

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

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

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

    引数

    • element: any

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

    • オプション options: any

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

    戻り値 ListBox

プロパティ

caseSensitiveSearch

caseSensitiveSearch: boolean

検索するときに大文字と小文字を区別するかどうかを決定する値を取得または設定します。

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

checkedItems

checkedItems: any[]

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

このプロパティを設定しても、selectedIndexプロパティの値が変更されません。

checkedMemberPath

checkedMemberPath: string

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

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

collectionView

collectionView: ICollectionView

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

displayMemberPath

displayMemberPath: string

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

このプロパティのデフォルト値は空の文字列''です。

hostElement

hostElement: HTMLElement

コントロールをホストしているDOM要素を取得します。

isContentHtml

isContentHtml: boolean

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

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

isDisabled

isDisabled: boolean

コントロールが無効かどうかを判定する値を取得または設定します。

無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。

isTouching

isTouching: boolean

現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。

isUpdating

isUpdating: boolean

コントロールが現在更新中かどうかを示す値を取得します。

itemFormatter

itemFormatter: IItemFormatter

リストに表示される値のカスタマイズに使用する関数を取得または設定します。

この関数は、アイテムインデックスおよびデフォルトのテキストやhtmlの2つの引数を取り、表示する新しいテキストまたは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

リストの最大の高さ（ピクセル単位）を取得または設定します。

このプロパティのデフォルト値はnullです。これは、ListBoxに最大の高さ制限がないことを意味します。

rightToLeft

rightToLeft: boolean

要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。

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です。

virtualizationThreshold

virtualizationThreshold: number

仮想化を有効にするために必要な最小行数、最小列数、 またはその両方を取得または設定します。

ListBoxが仮想化されると、現在表示されているアイテムのみがDOMに追加されます。 これにより、ListBoxに多数のアイテム（たとえば1,000程度）が含まれている場合、 にパフォーマンスに大きな影響を与えます。

このプロパティのデフォルト値は非常に大きい数値であり、 仮想化が無効になっていることを意味します。 仮想化を有効にするには、値を0または正の数に設定します。

仮想化は、垂直に積み重ねられたレイアウトを想定しています。 そのため、ListBoxが複数列の表示（フレックスボックスやグリッドレイアウトなど）を使用している場合は、 仮想化が自動的に無効になります。

メソッド

addEventListener

  • addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void

  • このControl が所有する要素にイベントリスナーを追加します。

    コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、 コントロール が破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener ) メソッドを参照してください）。

    イベントリスナーを削除しないと、メモリリークが発生する可能があります。

    デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。 タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。

    passive　イベントリスナーの詳細については、「Improving scrolling performance with passive listeners」を参考してください。

    引数

    • target: EventTarget

      イベントのターゲット要素。

    • type: string

      イベントを指定する文字列。

    • fn: any

      イベントが発生したときに実行する関数。

    • オプション capture: boolean

      リスナーがターゲット要素によって処理される前にコントロールによって処理される必要があるかどうかを示します。

    • オプション passive: boolean

      ハンドラーが preventDefault() を呼び出さないことを示します。

    戻り値 void

applyTemplate

  • applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement

  • コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。

    このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出され、 テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。

    以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。

    this.applyTemplate('wj-control wj-inputnumber', templateString, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');

    @param classNames コントロールのホスト要素に追加するクラスの名前。 @param template コントロールのテンプレートを定義するHTML文字列。 @param parts パーツ変数とその名前のディクショナリー。 @param namePart ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。

    引数

    • classNames: string
    • template: string
    • parts: Object
    • オプション namePart: string

    戻り値 HTMLElement

beginUpdate

  • beginUpdate(): void

containsFocus

  • containsFocus(): boolean

  • このコントロールにフォーカスのある要素が含まれているかどうかをチェックします。

    戻り値 boolean

deferUpdate

  • deferUpdate(fn: Function): void

  • beginUpdate/endUpdate ブロック内で関数を実行します。

    この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。

    引数

    • fn: Function

      実行する関数。

    戻り値 void

dispose

  • dispose(): void

  • ホスト要素との関連付けを解除することによってコントロールを破棄します。

    dispose メソッドは、addEventListener メソッドによって 追加されたイベントリスナーを自動的に削除します。

    コントロールを動的に作成および削除するアプリケーションでは、 dispose メソッドを呼び出すことが重要です。 コントロールを破棄しないと、 メモリリークが発生する可能があります。

    戻り値 void

endUpdate

  • endUpdate(): void

focus

  • focus(): void

  • このコントロールにフォーカスを設定します。

    戻り値 void

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

getTemplate

  • getTemplate(): string

  • コントロールのインスタンスの作成に使用されたHTMLテンプレートを取得します。

    このメソッドは、クラス階層をさかのぼってコントロールのテンプレートを指定する最も近い祖先を探します。 たとえば、ComboBox コントロールのプロトタイプを指定した場合、 そのプロトタイプによってDropDown 基本クラスで定義されたテンプレートがオーバーライドされます。

    戻り値 string

hasOwnProperty

  • hasOwnProperty(v: PropertyKey): boolean

  • オブジェクトが指定されたプロパティを持つかどうかを判定します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

indexOf

  • indexOf(e: HTMLElement): number

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

    引数

    • e: HTMLElement

      検索する要素。

    戻り値 number

    リスト内の要素のインデックス。要素がリストのメンバーでない場合は-1。

initialize

  • initialize(options: any): void

  • 指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。

    このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。

    例: 

    grid.initialize({
  itemsSource: myList,
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'Code', width: 130 },
    { binding: 'name', header: 'Name', width: 60 }
  ]
});

// 以下と同等です。
grid.itemsSource = myList;
grid.autoGenerateColumns = false;
// など

    初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外を発生します。

    引数

    • options: any

      初期化データを含むオブジェクト。

    戻り値 void

invalidate

  • invalidate(fullUpdate?: boolean): void

  • 非同期更新を発生させるため、コントロールを無効にします。

    引数

    • オプション fullUpdate: boolean

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

    戻り値 void

isItemEnabled

  • isItemEnabled(index: number): boolean

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

    引数

    • index: number

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

    戻り値 boolean

isPrototypeOf

  • isPrototypeOf(v: Object): boolean

  • オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。

    引数

    • v: Object

      プロトタイプチェーンが判定される別のオブジェクト。

    戻り値 boolean

loadList

  • loadList(): void

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

    戻り値 void

onCheckedItemsChanged

onFormatItem

onGotFocus

onInvalidInput

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

    イベントハンドラーがイベントをキャンセルした場合、コントロールは無効な入力内容とフォーカスを保持します。

    引数

    戻り値 boolean

onItemChecked

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

    引数

    戻り値 void

onItemsChanged

onLoadedItems

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

    引数

    戻り値 void

onLoadingItems

onLostFocus

onRefreshed

onRefreshing

onSelectedIndexChanged

  • onSelectedIndexChanged(e?: EventArgs): void

propertyIsEnumerable

  • propertyIsEnumerable(v: PropertyKey): boolean

  • 指定されたプロパティが列挙可能かどうかを判断します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

refresh

  • refresh(fullUpdate?: boolean): void

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

    引数

    • オプション fullUpdate: boolean

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

    戻り値 void

removeEventListener

  • removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number

  • このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。

    引数

    • オプション target: EventTarget

      イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます

    • オプション type: string

      イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。

    • オプション fn: any

      削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。

    • オプション capture: boolean

      リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。

    戻り値 number

    削除されたリスナーの数。

setItemChecked

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

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

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

    項目のオン/オフ状態が変わると、項目が選択されます。

    引数

    • index: number

      項目インデックス。

    • checked: boolean | null

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

    戻り値 void

showSelection

  • showSelection(setFocus?: boolean): void

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

    引数

    • オプション setFocus: boolean

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

    戻り値 void

toLocaleString

  • toLocaleString(): string

  • 現在のロケールを使用して文字列に変換された日付を返します。

    戻り値 string

toString

  • toString(): string

  • オブジェクトの文字列表現を返します。

    戻り値 string

toggleItemChecked

  • toggleItemChecked(index: number): void

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

    引数

    • index: number

      項目インデックス。

    戻り値 void

valueOf

  • valueOf(): Object

  • 指定されたオブジェクトのプリミティブ値を返します。

    戻り値 Object

静的 disposeAll

  • disposeAll(e?: HTMLElement): void

  • HTML要素に含まれるすべてのWijmoコントロールを破棄します。

    引数

    • オプション e: HTMLElement

      コンテナー要素。

    戻り値 void

静的 getControl

  • getControl(element: any): Control

  • 指定したDOM要素でホストされているコントロールを取得します。

    引数

    • element: any

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

    戻り値 Control

静的 invalidateAll

  • invalidateAll(e?: HTMLElement): void

  • 指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。

    このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

静的 refreshAll

  • refreshAll(e?: HTMLElement): void

  • HTML要素で存在するすべてのWijmoコントロールを更新する。

    コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

イベント

checkedItemsChanged

checkedItemsChanged: Event<ListBox, EventArgs>

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

formatItem

formatItem: Event<ListBox, FormatItemEventArgs>

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

このイベントは、表示するリスト項目を書式設定するために使用できます。 本イベントは、itemFormatterプロパティに似ていますが、複数の独立したハンドラーを許可できるという利点があります。

パラメータとして渡されるFormatItemEventArgsオブジェクトには、 項目にバインドされたデータ項目を参照するdataプロパティと、 現在のビューに項目インデックスを提供するindexプロパティがあります。

showGroupsプロパティがtrueに設定され、 項目がグループヘッダーを表す場合、dataプロパティにはグループを表す CollectionViewGroupオブジェクトへの参照が含まれます。 このオブジェクトには、グループのname、items、およびgroupDescriptionが含まれています。 グループヘッダーは実際のデータ項目に対応していないため、 この場合のindexプロパティは-1*に設定されます。

gotFocus

gotFocus: Event<Control, EventArgs>

コントロールがフォーカスを取得したときに発生します。

invalidInput

invalidInput: Event<Control, CancelEventArgs>

無効な文字が入力されたときに発生します。

ユーザーが入力した値が適切な種類に変換できない値、または有効な範囲外の値を貼り付ける場合、 無効な入力エラーが発生する場合があります。

イベントハンドラーがイベントをキャンセルする場合、 ユーザーがエラーを修正できるように、 コントロールは無効なコンテンツとフォーカスを保持します。

イベントがキャンセルされない場合、コントロールは無効な入力エラーを無視し、 元のコンテンツを保持します。

itemChecked

itemChecked: Event<ListBox, EventArgs>

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

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

itemsChanged

itemsChanged: Event<ListBox, EventArgs>

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

loadedItems

loadedItems: Event<ListBox, EventArgs>

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

loadingItems

loadingItems: Event<ListBox, EventArgs>

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

lostFocus

lostFocus: Event<Control, EventArgs>

コントロールがフォーカスを失ったときに発生します。

refreshed

refreshed: Event<Control, EventArgs>

コントロールが内容を更新した後で発生します。

refreshing

refreshing: Event<Control, EventArgs>

コントロールが内容を更新する直前に発生します。

selectedIndexChanged

selectedIndexChanged: Event<ListBox, EventArgs>

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