@jswf/core/dist/ListView.d.ts

JavaScript Window Framework

import { BaseView, WINDOW_PARAMS, WINDOW_EVENT_MAP } from "./BaseView";
import "../scss/ListView.scss";
export interface LISTVIEW_EVENT_ITEM_CLICK {
    itemIndex: number;
    subItemIndex: number;
    event: MouseEvent;
}
export interface LISTVIEW_EVENT_DRAG_START {
    itemIndex: number;
    subItemIndex: number;
    event: DragEvent;
}
export interface ListViewEventMap extends WINDOW_EVENT_MAP {
    itemClick: [LISTVIEW_EVENT_ITEM_CLICK];
    itemDblClick: [LISTVIEW_EVENT_ITEM_CLICK];
    itemDragStart: [LISTVIEW_EVENT_DRAG_START];
}
/**
 *ListView用クラス
 *
 * @export
 * @class ListView
 * @extends {BaseView}
 */
export declare class ListView extends BaseView<ListViewEventMap> {
    private headers;
    private resizers;
    private itemArea;
    private overIndex;
    private lastIndex;
    private selectIndexes;
    private sortIndex;
    private sortVector;
    private columnWidth;
    private columnAutoIndex;
    private areaWidth;
    /**
     *Creates an instance of ListView.
     * @param {*} [params] ウインドウ作成パラメータ
     * @memberof ListView
     */
    constructor(params?: WINDOW_PARAMS);
    /**
     *カラムのサイズを設定
     *
     * @param {number} index
     * @param {number} size
     * @memberof ListView
     */
    setColumnWidth(index: number, size: number): void;
    /**
     *カラムのスタイルを設定
     *
     * @param {number} col カラム番号
     * @param {('left'|'right'|'center')} style スタイル
     * @memberof ListView
     */
    setColumnStyle(col: number, style: "left" | "right" | "center"): void;
    /**
     *カラムのスタイルを複数設定
     *
     * @param {(('left' | 'right' | 'center')[])} styles スタイル
     * @memberof ListView
     */
    setColumnStyles(styles: ("left" | "right" | "center")[]): void;
    /**
     *ヘッダを追加
     *配列にすると複数追加でき、さらに配列を含めるとサイズが指定できる
     * @param {(string|(string|[string,number])[])} labels ラベル | [ラベル,ラベル,・・・] | [[ラベル,幅],[ラベル,幅],・・・]
     * @param {number} [size] 幅
     * @memberof ListView
     */
    addHeader(label: string | (string | [string, number])[], size?: number): void;
    /**
     *アイテムのソートを行う
     *
     * @param {number} [index] カラム番号
     * @param {boolean} [order] 方向 true:昇順 false:降順
     * @memberof ListView
     */
    sortItem(index?: number, order?: boolean): void;
    /**
     *アイテムを選択する
     *すでにある選択は解除される
     * @param {(number | number[])} index レコード番号
     * @memberof ListView
     */
    selectItem(index: number | number[]): void;
    /**
     *アイテムの選択を全て解除する
     *
     * @memberof ListView
     */
    clearSelectItem(): void;
    /**
     *アイテムの選択を追加する
     *
     * @param {(number | number[])} index レコード番号
     * @memberof ListView
     */
    addSelectItem(index: number | number[]): void;
    /**
     *アイテムの選択を解除する
     *
     * @param {(number | number[])} index レコード番号
     * @memberof ListView
     */
    delSelectItem(index: number | number[]): void;
    /**
     *アイテムの数を返す
     *
     * @returns {number} アイテム数
     * @memberof ListView
     */
    getItemCount(): number;
    /**
     *アイテムが選択されているか返す
     *
     * @param {number} index レコード番号
     * @returns {boolean}
     * @memberof ListView
     */
    isSelectItem(index: number): boolean;
    private static getIndexOfNode;
    /**
     *アイテムを全て削除する
     *
     * @memberof ListView
     */
    clearItem(): void;
    /**
     *対象セルのノードを取得
     *
     * @param {number} row
     * @param {number} col
     * @returns
     * @memberof ListView
     */
    getCell(row: number, col: number): HTMLElement & {
        value?: unknown;
    } | null;
    /**
     *アイテムに値を設定する
     *
     * @param {number} index レコード番号
     * @param {*} value 値
     * @memberof ListView
     */
    setItemValue(index: number, value: unknown): void;
    /**
     *アイテムの値を取得する
     *
     * @param {number} index レコード番号
     * @returns 値
     * @memberof ListView
     * @returns {string} アイテムに設定されている値
     */
    getItemValue(index: number): unknown;
    /**
     *全てのアイテムの値を取得する
     *
     * @returns {unknown[]}
     * @memberof ListView
     */
    getItemValues(): unknown[];
    /**
     *アイテムのテキスト内容を取得
     *
     * @param {number} row 行
     * @param {number} col 列
     * @returns {string} アイテムに設定されているテキスト
     * @memberof ListView
     */
    getItemText(row: number, col: number): string | null;
    /**
     *最初に選択されているアイテムを返す
     *
     * @returns {number} 選択されているアイテム番号(見つからなかったら-1)
     * @memberof ListView
     */
    getSelectItem(): number;
    /**
     *選択されている値を全て取得する
     *
     * @returns {unknown[]} 選択されているアイテムの値
     * @memberof ListView
     */
    getSelectValues(): unknown[];
    /**
     *指定行のセルノードを返す
     *
     * @param {number} row
     * @returns
     * @memberof ListView
     */
    getLineCells(row: number): HTMLElement[];
    /**
     *アイテムを追加する
     *アイテムはテキストかノードが指定できる
     *配列を渡した場合は、複数追加となる
     * @param {(string|(string|HTMLElement)[])} value テキストもしくはノード
     * @returns
     * @memberof ListView
     */
    addItem(value: string | number | HTMLElement | ((string | number | HTMLElement)[]), itemValue?: unknown): number;
    /**
     *ソート用のキーを設定する
     *
     * @param {number} row レコード番号
     * @param {number} column カラム番号
     * @param {*} value キー
     * @returns
     * @memberof ListView
     */
    setSortKey(row: number, column: number, value: unknown): boolean;
    /**
     *ソート用のキーをまとめて設定する
     *
     * @param {number} row レコード番号
     * @param {unknown[]} values キー配列
     * @memberof ListView
     */
    setSortKeys(row: number, values: unknown[]): void;
    /**
     *アイテムを書き換える
     *
     * @param {number} row レコード番号
     * @param {number} column カラム番号
     * @param {(string|HTMLElement)} value テキストもしくはノード
     * @returns
     * @memberof ListView
     */
    setItem(row: number, column: number, value: string | number | HTMLElement): boolean;
    /**
     *ヘッダに合わせてカラムサイズを調整する
     *基本的には直接呼び出さない
     * @protected
     * @memberof ListView
     */
    protected resize(): void;
    /**
     *
     *
     * @param {boolean} flag
     * @memberof ListView
     */
    onLayout(flag: boolean): void;
}