constructor(element: any, options?: any): ListBox
ListBoxクラスの新しいインスタンスを初期化します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
The JavaScript object containing initialization data for the control.
検索するときに大文字と小文字を区別するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は **false**です。
各項目の隣に配置したチェックボックスを制限するために使用されるプロパティの名前を取得または設定します。
このプロパティを使用して、複数選択ListBoxを作成します。
項目のチェックボックスをオンまたはオフにすると、itemChecked イベントが発生します。
オン/オフにした項目を取得するには、selectedItem プロパティを使用します。または、現在オンの項目のリストを取得するには、checkedItems プロパティを使用します。
このプロパティのデフォルト値は空の文字列**''**です。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
リストに表示される値のカスタマイズに使用される関数を取得または設定します。
この関数は、2つの引数として項目インデックスとデフォルトのテキストまたはHTMLを受け取り、表示する新しいテキストまたはHTMLを返します。
書式設定関数がスコープ(意味のある'this'値など)を必要とする場合は、 'bind'関数を使用してフィルタを設定し、 'this'オブジェクトを指定してください。例:
```typescript listBox.itemFormatter = customItemFormatter.bind(this); function customItemFormatter(index, content) { if (this.makeItemBold(index)) { content = '<b>' + content + '</b>'; } return content; } ```
リストの最大の高さ(ピクセル単位)を取得または設定します。
このプロパティのデフォルト値はnullです。これは、ListBoxに最大の高さ制限がないことを意味します。
現在選択されている項目を取得または設定します。
selectedValue をselectedItem から取得するために使用するプロパティの名前を取得または設定します。
このプロパティのデフォルト値は空の文字列**''**です。
データグループを区切るために {ListBox にグループヘッダー項目を含めるかどうかを決定する値を 取得または設定します。
データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのgroupDescriptions プロパティを変更します。
ListBox には、グループ化の最初のレベルのみが表示されます。
このプロパティのデフォルト値は **false**です。
Gets or sets a value of the **tabindex** attribute associated with the control.
**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.
Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.
仮想化を有効にするために必要な最小行数、最小列数、 またはその両方を取得または設定します。
ListBoxが仮想化されると、現在表示されているアイテムのみがDOMに追加されます。 これにより、ListBoxに多数のアイテム(たとえば1,000程度)が含まれている場合、 にパフォーマンスに大きな影響を与えます。
このプロパティのデフォルト値は非常に大きい数値であり、仮想化が無効になっていることを意味します。 仮想化を有効にするには、値を0または正の数に設定します。
仮想化は、垂直に積み重ねられたレイアウトを想定しています。 そのため、ListBox が複数列の表示(フレックスボックスやグリッドレイアウトなど)を使用している場合は、 仮想化が自動的に無効になります。
addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、コントロールが破棄されているときにそれらを簡単に削除すること ができます(dispose と removeEventListener メソッドを参照してください)。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners">Improving scrolling performance with passive listeners</a>」を参考してください。
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener should be handled by the control before it is handled by the target element.
Indicates that the handler will never call preventDefault().
applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
```typescript this.applyTemplate('wj-control wj-inputnumber', templateString, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input'); ``````
Names of classes to add to the control's host element.
An HTML string that defines the control template.
A dictionary of part variables and their names.
Name of the part to be named after the host element. This determines how the control submits data when used in forms.
deferUpdate(fn: Function): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed.
dispose(): void
ホスト要素との関連付けを解除することによってコントロールを破棄します。
dispose メソッドは、addEventListener メソッドによって追加されたイベントリスナーを自動的に削除します。
コントロールを動的に作成および削除するアプリケーションでは、dispose メソッドを呼び出すことが重要です。コントロールを破棄しないと、メモリリークが発生する可能があります。
disposeAll(e?: HTMLElement): void
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
Container element.
getControl(element: any): Control
指定したDOM要素でホストされているコントロールを取得します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
getDisplayText(index: number): string
指定したインデックスにある項目に対して表示されるテキストを(プレーンテキストとして)取得します。
The index of the item in the itemsSource.
getDisplayValue(index: number): string
指定したインデックスにある項目に対して表示される文字列を取得します。
この文字列は、isContentHtml プロパティの設定に応じてプレーンテキストまたはHTMLのどちらかになります。
The index of the item in the itemsSource.
getItemChecked(index: number): boolean
リストの項目のチェック状態を取得します。
このメソッドは、複数選択ListBoxにのみ使用できます (checkedMemberPath プロパティを参照)。
Item index.
getTemplate(): string
indexOf(e: HTMLElement): number
リスト内の要素のデータインデックスを取得します。
Element to search for.
initialize(options: any): void
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
```typescript 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; // など ```
初期化データは適用時に型チェックされます。初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
Object that contains the initialization data.
invalidate(fullUpdate?: boolean): void
非同期更新を発生させるため、コントロールを無効にします。
Whether to update the control layout as well as the content.
invalidateAll(e?: HTMLElement): void
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。
これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
isItemEnabled(index: number): void
指定したインデックスにある項目が有効かどうかを決定する値を取得します。
The index of the item in the itemsSource.
onCheckedItemsChanged(e?: EventArgs): void
checkedItemsChangedイベントを発生させます。
onFormatItem(e: FormatItemEventArgs): void
formatItem イベントを発生させます。
FormatItemEventArgs that contains the event data.
onGotFocus(e?: EventArgs): void
gotFocus イベントを発生させます。
onInvalidInput(e: CancelEventArgs): void
invalidInput イベントを発生させます。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。
onItemChecked(e?: EventArgs): void
itemCheckedイベントを発生させます。
onItemsChanged(e?: EventArgs): void
itemsChangedイベントを発生させます。
onLoadedItems(e?: EventArgs): void
loadedItemsイベントを発生させます。
onLoadingItems(e?: EventArgs): void
loadingItemsイベントを発生させます。
onLostFocus(e?: EventArgs): void
lostFocus イベントを発生させます。
onRefreshed(e?: EventArgs): void
refreshedイベントを発生させます。
onRefreshing(e?: EventArgs): void
refreshingイベントを発生させます。
onSelectedIndexChanged(e?: EventArgs): void
selectedIndexChangedイベントを発生させます。
refresh(fullUpdate?: boolean): void
コントロールを更新します。
Whether to update the control layout as well as the content.
refreshAll(e?: HTMLElement): void
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
Target element for the event. If null, removes listeners attached to all targets.
String that specifies the event. If null, removes listeners attached to all events.
Handler to remove. If null, removes all handlers.
Whether the listener is capturing. If null, removes capturing and non-capturing listeners.
setItemChecked(index: number, checked: boolean | null): void
リストの項目のオン/オフ状態を設定します。
このメソッドは、複数選択ListBoxにのみ適用できます (checkedMemberPath プロパティを参照)。
項目のオン/オフ状態が変わると、項目が選択されます。
Item index.
Item's new checked state.
showSelection(setFocus?: this): void
選択された項目を強調表示し、画面に入るようにスクロールします。
Whether to set the focus to the list after scrolling the selected item into view.
toggleItemChecked(index: number): void
リストの項目のオン/オフ状態を切り替えます。 このメソッドは、複数選択ListBoxにのみ適用できます (checkedMemberPath プロパティを参照)。
Item index.
リスト項目を表す要素が作成されたときに発生します。
このイベントを使用して、表示するリストアイテムをフォーマットできます。このイベントは、目的はitemFormatter プロパティと同じですが、 複数の独立したハンドラを使用できる利点があります。
パラメータとして渡されるFormatItemEventArgsオブジェクトには、 項目にバインドされたデータ項目を参照する**data**プロパティと、 現在のビューに項目インデックスを提供する**index**プロパティがあります。
showGroupsプロパティがtrueに設定され、 項目がグループヘッダーを表す場合、dataプロパティにはグループを表す showGroupsオブジェクトへの参照が含まれます。 このオブジェクトには、グループの**name**、**items**、および**groupDescription**が含まれています。 グループヘッダーは実際のデータ項目に対応していないため、 この場合の**index**プロパティは**-1**に設定されます。
無効な入力値が検出された場合に発生します。
ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。
イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。
ユーザーが現在の項目をオンまたはオフにすると発生します。
このイベントは、checkedMemberPathにプロパティの名前を設定してコントロールの各項目にチェックボックスを追加した場合に発生します。
オン/オフにした項目を取得するには、selectedItem プロパティを使用します。
ListBox コントロールは、プレーンテキストまたはHTMLを含む項目のリストを 表示し、ユーザーがキーボードまたはマウスで項目を選択できるようにします。
現在選択されている項目を確認するには、selectedIndexプロパティを使用します。
ListBox に項目を挿入するには、文字列の配列またはオブジェクトの配列を使用できます。オブジェクトの配列の場合は、displayMemberPath プロパティで、リストに表示するオブジェクトのプロパティを指定します。
プレーンテキストではなくHTMLを保持する項目を表示するには、 isContentHtml プロパティをtrueに設定します。
ListBox コントロールは、次のキーボードコマンドをサポートしています。
次の例は、 ListBox コントロールを作成した後、 'countries'配列を使用して設定します。 ユーザーが選択範囲を移動すると、コントロールはそのselectedIndex プロパティと selectedItem プロパティを更新します。
{@sample Input/ListBox/Overview/purejs デモ}