[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Inputman.GcListBox

GcListBox クラス

階層

  • GcListBox

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • var container = document.getElementById('listbox-container');
var config = {
    height: 300,
    width: 300,
    itemHeight: 30,
    colHeaderHeight: 25,
    items: [
        {id: 0, name: 'item0'},
        {id: 1, name: 'item1'},
        {id: 2, name: 'item2'},
        {id: 3, name: 'item3'},
        {id: 4, name: 'item4'},
        {id: 5, name: 'item5'},
        {id: 6, name: 'item6'},
        {id: 7, name: 'item7'},
    ],
    columns: [
         {name: 'id', label: 'ID', width: 70, isValuePath: true, visible: true, clickSort: true},
         {name: 'name', label: 'Name', width: "auto", visible: true, clickSort: true},
    ],
    allowResize: true,
    virtualMode: true,
    overflow: GC.InputMan.ScrollBars.Both,
    selectionMode: GC.InputMan.ListBoxSelectionMode.MultipleExt,
    formatItem: function(args){
        args.itemObject.id = "ID : " + args.itemObject.id;
    },
    generatingItem: function(args){
        args.item.classList.add(args.index % 2 ? "odd" : "even");
    }
};
var listbox = new GC.InputMan.GcListBox(container, config);

    引数

    • ele: HTMLSelectElement | HTMLInputElement | HTMLElement
    • オプション option: ListBoxConfig

      リストボックスの設定を示します。

    戻り値 GcListBox

プロパティ

allowColumnResize

allowColumnResize: boolean

リストの列幅をユーザーが変更できるかどうかを設定または取得します。

参照：setAllowColumnResize

allowResize

allowResize: boolean

リストボックスのリサイズを許可するかどうかを設定または取得します。

参照：setAllowResize

checkOnClick

checkOnClick: boolean

リストボックスをクリックしたときにチェックボックスをチェックするかどうかを設定または取得します。

参照：setCheckOnClick

checkedIndex

checkedIndex: number

インデックスで指定したアイテムをチェックします。

参照：setCheckedIndex

checkedIndices

checkedIndices: number[]

チェックしたアイテムのインデックスを取得または設定します。

参照：getCheckedIndices 参照：setCheckedIndices

読み取り専用 checkedItems

checkedItems: object[] | string[]

チェックしたアイテムを取得します。

参照：getCheckedItems

columns

columns: ColumnConfig[]

リストボックスに列を設定または取得します。

参照：setColumns

読み取り専用 componentName

componentName: string

コンポーネント名（'GcListBox'）を取得します。

dragDrop

dragDrop: boolean

ドラッグ&ドロップ機能を有効にするかどうか設定または取得します。

dragSource

dragSource: ListBoxDragSource

複数行をチェックして一括操作するかどうか設定または取得します。

enabled

enabled: boolean

コントロールやオブジェクトを有効にするかどうかを示す値を取得します。

参照：setEnabled

itemHeight

itemHeight: number

リストアイテムの高さを設定または取得します。

参照：setItemHeight

items

items: object[] | string[]

リストアイテムを含む配列データを取得または設定します。

参照：getItems 参照：setItems

overflow

overflow: ScrollBars

アイテムがリストボックスをはみ出る場合の表示方法を設定または取得します。

参照：setOverflow

selectedIndex

selectedIndex: number

選択されたアイテムのインデックスを取得または設定します。

参照：getSelectedIndex 参照：setSelectedIndex

selectedIndices

selectedIndices: number[]

選択されたアイテムのインデックスを取得または設定します。

参照：getSelectedIndices 参照：setSelectedIndices

読み取り専用 selectedItem

selectedItem: object | string

選択されたアイテムを取得します。

参照：getSelectedItem

読み取り専用 selectedItems

selectedItems: object[] | string[]

選択されたアイテムの配列を取得します。

参照：getSelectedItems

読み取り専用 selectedValue

selectedValue: number | string | boolean | object

valueMemberPathを使用して選択されたアイテムの値を取得します。

参照：getSelectedValue

読み取り専用 selectedValues

selectedValues: number[] | string[] | boolean[] | object[]

valueMemberPathを使用して選択されたアイテムの値を取得します。

参照：getSelectedValues

selectionMode

selectionMode: ListBoxSelectionMode

リストボックスのアイテムの選択モードを設定または取得します。

参照：setSelectionMode

showTip

showTip: boolean

セルの内容が見切れている場合に、すべてのセルのチップを表示するかどうかを設定または取得します。

参照：setShowTip

virtualMode

virtualMode: boolean

リストボックスの描画モードを設定または取得します。

参照：setVirtualMode

visible

visible: boolean

コントロールをページに表示するかどうかを示す値を設定または取得します。

参照：setVisible

visibleItemCount

visibleItemCount: number

リストボックスに表示するアイテムの数を設定または取得します。

参照：setVisibleItemCount

メソッド

addColumn

  • リストボックスの指定した位置に列を追加します。

    引数

    • col: ColumnConfig

      追加する列の名前

    • オプション insertIndex: number

      列を追加する位置

    戻り値 void

addEventListener

  • 指定したイベントが発生したときに実行する処理を設定します。

    
var selectedChangedHandler = function(){
    let selectedValues = listbox.getSelectedValues();
    console.log(selectedValues);
}
listbox.addEventListener(GC.InputMan.GcListBoxEvent.SelectedChanged, selectedChangedHandler);

    引数

    • eventType: GcListBoxEvent

      イベントの種類を表す文字列（大文字と小文字を区別しません）

    • listener: (sender: GcListBox, eventArgs?: object): void

      イベントが発生したときに実行する処理

        • (sender: GcListBox, eventArgs?: object): void

        • 引数

          • sender: GcListBox
          • オプション eventArgs: object

          戻り値 void

    戻り値 void

addItem

  • addItem(item: object | string): void

  • リストにアイテムを追加します。

    引数

    • item: object | string

      追加するアイテム

    戻り値 void

addItems

  • addItems(items: object[] | string[]): void

  • リストにアイテムの配列を追加します。

    引数

    • items: object[] | string[]

      アイテムの配列

    戻り値 void

clearChecked

  • clearChecked(): void

  • アイテムのチェックをクリアします。

    戻り値 void

clearItems

  • clearItems(): void

  • すべてのリストの項目をクリアします。

    戻り値 void

clearSelected

  • clearSelected(): void

  • アイテムの選択を解除します。

    戻り値 void

deleteColumn

  • deleteColumn(name: string): void

  • リストボックスから指定した列を削除します。

    引数

    • name: string

      削除する列の名前

    戻り値 void

filter

  • フィルター条件に合致したアイテムでリストをリロードします。 filterInfos が nullの場合、フィルター条件をクリアします。

    var filters = [{name: 'id', comparator: FilterComparator.Equal, filterString: '3'}];
// item['id'] === '3' の条件でフィルタリングします
listbox.filter(filters);

// フィルター条件をクリアします
listbox.filter(null);


// フィルター条件を関数で定義します。
listbox.filter(function (item) {
    return item.id > 5;
});

    引数

    戻り値 void

findString

  • findString(str: string, start?: number, col?: string): number

  • 指定した列で検索文字列を含む最初のアイテムを見つけます。

    引数

    • str: string

      検索する文字列

    • オプション start: number

      検索を開始する位置

    • オプション col: string

      検索する列

    戻り値 number

    検索で見つかった最初のアイテムのインデックス

findStringExact

  • findStringExact(str: string, start?: number, col?: string): number

  • 指定した列で検索文字列と一致する最初のアイテムを見つけます。

    引数

    • str: string

      検索する文字列

    • オプション start: number

      検索を開始する位置

    • オプション col: string

      検索する列

    戻り値 number

    検索で見つかった最初のアイテムのインデックス

focus

  • focus(): void

  • リストボックスにフォーカスを設定します。

    戻り値 void

getCheckedIndices

  • getCheckedIndices(): number[]

  • チェックしたアイテムのインデックスを取得します。
    参照：checkedIndices

    戻り値 number []

    チェックしたインデックスの配列

getCheckedItems

  • getCheckedItems(): object[] | string[]

  • チェックしたアイテムを取得します。
    参照：checkedItems

    戻り値 object [] | string []

    チェックしたアイテムの配列

getItems

  • getItems(): string[] | object[]

  • リストアイテムを含む配列データを取得します。
    参照：items

    戻り値 string [] | object []

    アイテムの配列

getSelectedIndex

  • getSelectedIndex(): number

  • 選択されたアイテムのインデックスを取得します。
    参照：selectedIndex

    戻り値 number

    選択されたアイテムのインデックス

getSelectedIndices

  • getSelectedIndices(): number[]

  • 選択されたアイテムのインデックスを取得します。
    参照：selectedIndices

    戻り値 number []

    選択されたインデックスの配列

getSelectedItem

  • getSelectedItem(): object | string

  • 選択されたアイテムを取得します。
    参照：selectedItem

    戻り値 object | string

    選択されたアイテム

getSelectedItems

  • getSelectedItems(): object[] | string[]

  • 選択されたアイテムを取得します。
    参照：selectedItems

    戻り値 object [] | string []

    選択されたアイテムの配列

getSelectedValue

  • getSelectedValue(): number | string | boolean | object

  • valueMemberPathを使用して選択されたアイテムの値を取得します。
    参照：selectedValue

    戻り値 number | string | boolean | object

    選択されたアイテムの値

getSelectedValues

  • getSelectedValues(): number[] | string[] | boolean[] | object[]

  • valueMemberPathを使用して選択されたアイテムの値を取得します。
    参照：selectedValues

    戻り値 number [] | string [] | boolean [] | object []

    選択されたアイテムの値の配列

insertItem

  • insertItem(item: object | string, start: number): void

  • リストの指定したインデックス位置にアイテムを挿入します。

    引数

    • item: object | string

      挿入するアイテム

    • start: number

      アイテムを挿入するインデックス位置

    戻り値 void

insertItems

  • insertItems(items: object[] | string[], start: number): void

  • リストの指定したインデックス位置に複数のアイテムを挿入します。

    引数

    • items: object[] | string[]

      挿入するアイテムの配列

    • start: number

      アイテムを挿入するインデックス位置

    戻り値 void

layout

  • layout(): void

  • リストボックスのレイアウトを設定します。

    戻り値 void

refresh

  • refresh(): void

  • リストボックスの表示をリフレッシュします。

    戻り値 void

removeEventListener

  • addEventListenerで登録したイベントを削除します。

    listbox.removeEventListener(GC.InputMan.GcListBoxEvent.SelectedChanged, selectedChangedHandler);

    引数

    • eventType: GcListBoxEvent

      イベントの種類を表す文字列（大文字と小文字を区別しません）

    • オプション listener: (sender: GcListBox, eventArgs?: object): void

      コントロールから削除するイベント処理

        • (sender: GcListBox, eventArgs?: object): void

        • 引数

          • sender: GcListBox
          • オプション eventArgs: object

          戻り値 void

    戻り値 void

resize

  • resize(height: number, width: number): void

  • リストボックスのサイズを設定します。

    引数

    • height: number

      リストボックスの高さ

    • width: number

      リストボックスの幅

    戻り値 void

resizeHeight

  • resizeHeight(height: number): void

  • リストボックスの高さを設定します。

    引数

    • height: number

      リストボックスの高さ

    戻り値 void

resizeWidth

  • resizeWidth(width: number): void

  • リストボックスの幅を設定します。

    引数

    • width: number

      リストボックスの幅

    戻り値 void

setAllowColumnResize

  • setAllowColumnResize(value: boolean): void

  • リストの列幅をユーザーが変更できるかどうかを設定します。
    参照：allowColumnResize

    引数

    • value: boolean

      列幅のリサイズを許可する場合はtrue、それ以外はfalse。

    戻り値 void

setAllowResize

  • setAllowResize(value: boolean): void

  • リストボックスのリサイズを許可するかどうかを設定します。
    参照：allowResize

    引数

    • value: boolean

      リストボックスのリサイズを許可するかどうか

    戻り値 void

setCheckOnClick

  • setCheckOnClick(value: boolean): void

  • リストボックスをクリックしたときにチェックボックスをチェックするかどうかを設定します。
    参照：checkOnClick

    引数

    • value: boolean

      クリックしたときにチェックする場合はtrue、それ以外はfalse。

    戻り値 void

setCheckedIndex

  • setCheckedIndex(index: number): void

  • インデックスで指定したアイテムをチェックします。
    参照：checkedIndex

    listbox.setCheckedIndex(1);

    引数

    • index: number

      チェックするアイテムのインデックス

    戻り値 void

setCheckedIndices

  • setCheckedIndices(indices: number[]): void

  • インデックスで指定したアイテムをチェックします。
    参照：checkedIndices

    listbox.setCheckedIndices([1, 3, 7]);

    引数

    • indices: number[]

      チェックするインデックスの配列

    戻り値 void

setColumns

  • リストボックスに列を設定します。
    参照：columns

    引数

    戻り値 void

setEnabled

  • setEnabled(value: boolean): void

  • コントロールやオブジェクトを有効にするかどうかを示す値を設定します。
    参照：enabled

    引数

    • value: boolean

      有効にする場合はtrue、それ以外はfalse。

    戻り値 void

setItemHeight

  • setItemHeight(height: number): void

  • リストアイテムの高さを設定します。
    参照：itemHeight

    引数

    • height: number

      リストアイテムの高さ

    戻り値 void

setItems

  • setItems(items: object[] | string[]): void

  • リストアイテムを含む配列データを設定します。
    参照：items

    引数

    • items: object[] | string[]

      アイテムの配列

    戻り値 void

setOverflow

  • アイテムがリストボックスをはみ出る場合の表示方法を設定します。
    参照：overflow

    引数

    • value: ScrollBars

      アイテムがリストボックスをはみ出る場合の表示方法（ScrollBars列挙体）。

    戻り値 void

setSelectedIndex

  • setSelectedIndex(index: number): void

  • 選択するアイテムのインデックスを設定します。
    参照：selectedIndex

    listbox.setSelectedIndex(0);

    引数

    • index: number

      選択するアイテムのインデックス

    戻り値 void

setSelectedIndices

  • setSelectedIndices(indices: number[]): void

  • 選択するアイテムのインデックスを設定します。
    参照：selectedIndices

    listbox.setSelectedIndices([0, 3]);

    引数

    • indices: number[]

      選択するアイテムのインデックスの配列

    戻り値 void

setSelectionMode

  • リストボックスのアイテムの選択モードを設定します。
    参照：selectionMode

    引数

    戻り値 void

setShowTip

  • setShowTip(value: boolean): void

  • セルの内容が見切れている場合に、すべてのセルのチップを表示するかどうかを設定します。
    参照：showTip

    引数

    • value: boolean

      セルの内容が見切れている場合に、すべてのセルのチップを表示するかどうかを表す値。

    戻り値 void

setVirtualMode

  • setVirtualMode(value: boolean): void

  • リストボックスの描画モードを設定します。
    参照：virtualMode

    引数

    • value: boolean

      仮想モードで描画する場合はtrue、それ以外はfalse。

    戻り値 void

setVisible

  • setVisible(value: boolean): void

  • コントロールをページに表示するかどうかを示す値を設定します。
    参照：visible

    引数

    • value: boolean

      表示する場合はtrue、それ以外はfalse。

    戻り値 void

setVisibleItemCount

  • setVisibleItemCount(num: number): void

  • リストボックスに表示するアイテムの数を設定します。
    参照：visibleItemCount

    引数

    • num: number

      表示するアイテムの数

    戻り値 void

sort

  • 指定した並び順でリロードします。 sortInfo が nullの場合、並び替えを解除します。

    // 'id'列を昇順で並び替えます
listbox.sort({name: 'id', isAsc: true});

// 並び替えを解除します。
listbox.sort(null);

// 値の比較にカスタム関数を使用します。
listbox.sort(function (left, right) {
    return right.item.name - left.item.name;
});

    引数

    戻り値 void

updateColumnAutoFit

  • 指定された列の自動調整設定を更新します。

    listbox.updateColumnAutoFit([
    {name: "id", autofit: true},
    {name: "name", autofit: true},
    {name: "age", autofit: false}
]);

    引数

    • config: AutofitInfo[]

      自動調整の設定方法を指定します。

    戻り値 void

updateColumnWidth

  • updateColumnWidth(col: string, width: number | string): void

  • 指定した列の幅を変更します。

    引数

    • col: string

      変更する列

    • width: number | string

      列の幅

    戻り値 void

イベント

CheckedChanged

  • アイテムのチェック状態が変更されたときに発生します。

    var checkedChangedHandler = function(sender){
    let checkedValues = sender.getCheckedValues();
    console.log(checkedValues);
}
// イベントリスナーを追加します。
listbox.addEventListener(GC.InputMan.GcListBoxEvent.CheckedChanged, checkedChangedHandler);
// イベントリスナーを削除します。
listbox.removeEventListener(GC.InputMan.GcListBoxEvent.CheckedChanged, checkedChangedHandler);

    引数

    • sender: GcListBox

      イベントが発生したコントロールのオブジェクト

    戻り値 any

FocusedChanged

  • 選択しているアイテムが変更されたときに発生します。

    var focusedChangedHandler = function(sender){
    console.log("FocusedChanged");
}
// イベントリスナーを追加します。
listbox.addEventListener(GC.InputMan.GcListBoxEvent.FocusedChanged, focusedChangedHandler);
// イベントリスナーを削除します。
listbox.removeEventListener(GC.InputMan.GcListBoxEvent.FocusedChanged, focusedChangedHandler);

    引数

    • sender: GcListBox

      イベントが発生したコントロールのオブジェクト

    戻り値 any

ItemClick

  • リストのアイテムをクリックしたときに発生します。

    var itemClickHandler = function(sender, args){
    console.log(args.index);
}
// イベントリスナーを追加します。
listbox.addEventListener(GC.InputMan.GcListBoxEvent.ItemClick, itemClickHandler);
// イベントリスナーを削除します。
listbox.removeEventListener(GC.InputMan.GcListBoxEvent.ItemClick, itemClickHandler);

    引数

    • sender: GcListBox

      イベントが発生したコントロールのオブジェクト

    • args: IItemArgs

      イベントデータ

    戻り値 any

ItemsChanged

  • アイテムのリストが変更されたときに発生します。

    var itemsChangedHandler = function(sender){
    console.log("ItemsChanged");
}
// イベントリスナーを追加します。
listbox.addEventListener(GC.InputMan.GcListBoxEvent.ItemsChanged, itemsChangedHandler);
// イベントリスナーを削除します。
listbox.removeEventListener(GC.InputMan.GcListBoxEvent.ItemsChanged, itemsChangedHandler);

    引数

    • sender: GcListBox

      イベントが発生したコントロールのオブジェクト

    戻り値 any

LoadComplete

  • アイテムがロードされたときに発生します。

    var loadCompleteHandler = function(sender){
    console.log("LoadComplete");
}
// イベントリスナーを追加します。
listbox.addEventListener(GC.InputMan.GcListBoxEvent.LoadComplete, loadCompleteHandler);
// イベントリスナーを削除します。
listbox.removeEventListener(GC.InputMan.GcListBoxEvent.LoadComplete, loadCompleteHandler);

    引数

    • sender: GcListBox

      イベントが発生したコントロールのオブジェクト

    戻り値 any

SelectedChanged

  • 選択しているアイテムが変更されたときに発生します。

    var selectedChangedHandler = function(sender){
    let selectedIndex = sender.getSelectedIndex();
    console.log(selectedIndex);
}
// イベントリスナーを追加します。
listbox.addEventListener(GC.InputMan.GcListBoxEvent.SelectedChanged, selectedChangedHandler);
// イベントリスナーを削除します。
listbox.removeEventListener(GC.InputMan.GcListBoxEvent.SelectedChanged, selectedChangedHandler);

    引数

    • sender: GcListBox

      イベントが発生したコントロールのオブジェクト

    戻り値 any