add internal sort panel.

2024-01-26 17:27:24 +08:00
parent 984496e08e
commit ac605895c5
7 changed files with 520 additions and 121 deletions
--- a/lib/ui/grid/grid.d.ts
+++ b/lib/ui/grid/grid.d.ts
@@ -1,4 +1,12 @@
 import { GridColumnDefinition } from "./column"
+/**
+ * 单元格点击回调函数
+ * 
+ * @callback cellClickedCallback
+ * @param {number} index - 点击的行索引
+ * @param {number} colIndex - 点击的列索引
+ * @returns {boolean} 返回 `false` 则取消事件冒泡
+ */

 /** 列数据接口 */
 interface GridItem {
@@ -27,17 +35,33 @@ interface GridSourceItem {
 /** Grid 语言资源接口 */
 interface GridLanguages {
    /**
-     * “所有”文本
-     * 
-     * @default `( All )`
-     */
+     * “所有”文本，默认值 `( All )` */
    all: string;
-    /** “确定”文本，默认值 OK */
+    /** “确定”文本，默认值 `OK` */
    ok: string;
-    /** “重置”文本，默认值 Reset */
+    /** “重置”文本，默认值 `Reset` */
    reset: string;
-    /** “空”文本，默认值 ( Null ) */
-    null: string
+    cancel: string;
+    /** “空”文本，默认值 `( Null )` */
+    null: string;
+    addLevel: string;
+    deleteLevel: string;
+    copyLevel: string;
+    asc: string;
+    desc: string;
+    column: string;
+    order: string;
+    sort: string;
+    requirePrompt: string;
+    duplicatePrompt: string;
+}
+
+/** Grid 列排序定义接口 */
+interface GridColumnSortDefinition {
+    /** 排序列的关键字 */
+    column: string;
+    /** 升序或降序 */
+    order: "asc" | "desc";
 }

 /** 列排序枚举 */
@@ -49,7 +73,7 @@ declare enum GridColumnDirection {
 }

 /** 列事件枚举 */
-declare enum GridColumnColumnEvent {
+declare enum GridColumnEvent {
    /** 重排事件 */
    Reorder = "reorder",
    /** 宽调整事件 */
@@ -80,41 +104,43 @@ export class Grid {
         * 判断列是否为复选框列
         * @param type 列类型
         */
-        isCheckbox(type: Number): boolean;
+        isCheckbox(type: number): boolean;
    };

    /** 列定义的数组 */
    columns: Array<GridColumnDefinition>;
    /** 多语言资源对象 */
    langs?: GridLanguages;
-    /** 行数大于等于该值则启用虚模式，默认值 100 */
-    virtualCount?: Number;
-    /** 表格行高，默认值 36 */
-    rowHeight?: Number;
-    /** 文本行高，默认值 24 */
-    lineHeight?: Number;
-    /** 列表底部留出额外行的空白，默认值 0 */
-    extraRows?: Number;
-    /** 过滤条件列表的行高，默认值 30 */
-    filterRowHeight?: Number;
-    /** 列表高度值，为 0 时列表始终显示全部内容（自增高），为非数字或者小于 0 则根据容器高度来确定虚模式的渲染行数，默认值 null */
-    height?: Number;
-    /** 列表是否为只读，默认值 false */
+    /** 行数大于等于该值则启用虚模式，默认值 `100` */
+    virtualCount?: number;
+    /** 表格行高，默认值 `36` */
+    rowHeight?: number;
+    /** 文本行高，默认值 `24` */
+    lineHeight?: number;
+    /** 列表底部留出额外行的空白，默认值 `0` */
+    extraRows?: number;
+    /** 过滤条件列表的行高，默认值 `30` */
+    filterRowHeight?: number;
+    /** 列表高度值，为 0 时列表始终显示全部内容（自增高），为非数字或者小于 0 则根据容器高度来确定虚模式的渲染行数，默认值 `null` */
+    height?: number;
+    /** 列表是否为只读，默认值 `false` */
    readonly?: boolean;
-    /** 是否允许多选，默认值 false */
+    /** 是否允许多选，默认值 `false` */
    multiSelect?: boolean;
-    /** 为 false 时只有点击在单元格内才会选中行，默认值 true */
+    /** 为 false 时只有点击在单元格内才会选中行，默认值 `true` */
    fullrowClick?: boolean;
-    /** 单元格 tooltip 是否禁用，默认值 false */
+    /** 单元格 tooltip 是否禁用，默认值 `false` */
    tooltipDisabled?: boolean;
-    /** 列头是否显示，默认值 true */
+    /** 列头是否显示，默认值 `true` */
    headerVisible?: boolean;
-    /** 监听事件的窗口载体，默认值 window */
+    /** 监听事件的窗口载体，默认值 `window` */
    window?: Window
-    /** 排序列的索引，默认值 -1 */
-    sortIndex?: Number;
-    /** 排序方式，正数升序，负数倒序，默认值 1 */
+    /** 排序列的索引，默认值 `-1` */
+    sortIndex?: number;
+    /** 排序方式，正数升序，负数倒序，默认值 `1` */
    sortDirection?: GridColumnDirection;
+    /** 排序列 */
+    sortArray?: Array<GridColumnSortDefinition>;

    /**
     * Grid 控件构造函数
@@ -130,34 +156,33 @@ export class Grid {
     * @param colIndex 即将选中的列索引
     * @eventProperty
     */
-    willSelect?: (index: Number, colIndex: Number) => boolean;
+    willSelect?: (index: number, colIndex: number) => boolean;
    /**
     * 单元格单击时触发，colIndex 为 -1 则表示点击的是行的空白处，返回 false 则取消事件冒泡
-     * @param index 点击的行索引
-     * @param colIndex 点击的列索引
+     * @property {cellClickedCallback}
     * @eventProperty
     */
-    cellClicked?: (index: Number, colIndex: Number) => boolean;
+    cellClicked?: (index: number, colIndex: number) => boolean;

    /**
     * 选中行发生变化时触发的事件
     * @param index 选中的行索引
     * @eventProperty
     */
-    onSelectedRowChanged?: (index?: Number) => void;
+    onSelectedRowChanged?: (index?: number) => void;
    /**
     * 单元格双击时触发的事件，colIndex 为 -1 则表示点击的是行的空白处
     * @param index 双击的行索引
     * @param colIndex 双击的列索引
     * @eventProperty
     */
-    onCellDblClicked?: (index: Number, colIndex: Number) => void;
+    onCellDblClicked?: (index: number, colIndex: number) => void;
    /**
     * 行双击时触发的事件
     * @param index 双击的行索引
     * @eventProperty
     */
-    onRowDblClicked?: (index: Number) => void;
+    onRowDblClicked?: (index: number) => void;
    /**
     * 列发生变化时触发的事件
     * @param type 事件类型<br/><br/>
@@ -168,31 +193,39 @@ export class Grid {
     * @param value 变化的值
     * @eventProperty
     */
-    onColumnChanged?: (type: GridColumnColumnEvent, colIndex: Number, value: Number | GridColumnDirection) => void;
+    onColumnChanged?: (type: GridColumnEvent, colIndex: number, value: number | GridColumnDirection) => void;
    /**
     * 列滚动时触发的事件
     * @param e 滚动事件对象
     * @eventProperty
     */
    onBodyScrolled?: (e: Event) => void;
+    /**
+     * 多列排序后触发的事件
+     * @param array 排序列定义数组
+     * @eventProperty
+     */
+    onSorted?: (array?: Array<GridColumnSortDefinition>) => void;

    /** 获取数据数组 */
-    get source(): GridItem;
+    get source(): Array<GridItem>;
    /** 设置数据，并刷新列表 */
    set source(list: Array<GridItem>);
    /** 获取当前选中的行索引的数组 */
-    get selectedIndexes(): Array<Number>;
+    get selectedIndexes(): Array<number>;
    /** 设置当前选中的行索引的数组，并刷新列表 */
-    set selectedIndexes(indexes: Array<Number>);
+    set selectedIndexes(indexes: Array<number>);
    /** 获取 Grid 当前是否处于加载状态 */
    get loading(): boolean;
    /** 使 Grid 进入加载状态 */
    set loading(flag: boolean);
    /** 获取 Grid 当前滚动的偏移量 */
-    get scrollTop(): Number;
+    get scrollTop(): number;
    /** 设置 Grid 滚动偏移量 */
-    set scrollTop(top: Number);
+    set scrollTop(top: number);

+    /** 获取已过滤后的当前列表中的数据数组 */
+    get sourceFiltered(): Array<GridItem>;
    /** 获取 Grid 的页面元素 */
    get element(): HTMLElement;
    /** 获取当前 Grid 是否已发生改变 */
@@ -202,7 +235,7 @@ export class Grid {
    /** 获取当前排序的列关键字，为 null 则当前无排序列 */
    get sortKey(): string | undefined;
    /** 获取当前选中行的索引，为 -1 则当前没有选中行 */
-    get selectedIndex(): Number | -1;
+    get selectedIndex(): number | -1;

    /**
     * 初始化Grid控件
@@ -219,26 +252,27 @@ export class Grid {
     * @param index 行索引
     * @param item 待设置的行数据值
     */
-    setItem(index: Number, item: GridItem): void;
+    setItem(index: number, item: GridItem): void;
    /**
     * 添加行数据
     * @param item 待添加的行数据值
     * @param index 待添加的行索引
     */
-    addItem(item: GridItem, index?: Number): void;
+    addItem(item: GridItem, index?: number): void;
    /**
     * 删除行数据
     * @param index 待删除的行索引
+     * @returns 返回已删除的行数据
     */
-    removeItem(index: Number): void;
+    removeItem(index: number): GridItem;
    /**
     * 滚动到指定行的位置
     * @param index 待滚动至的行索引
     */
-    scrollToIndex(index: Number): void;
+    scrollToIndex(index: number): void;
    /**
     * 调整 Grid 元素的大小，一般需要在宽度变化时（如页面大小发生变化时）调用
-     * @param force 是否强制reload，默认只有待渲染的行数发生变化时才会调用reload
+     * @param force 是否强制 {@linkcode reload}，默认只有待渲染的行数发生变化时才会调用
     * @param keep 是否保持当前滚动位置
     */
    resize(force?: boolean, keep?: boolean): void;
@@ -257,11 +291,20 @@ export class Grid {
    resetChange(): void;
    /**
     * 根据当前排序字段进行列排序
-     * @param reload 为 true 则在列排序后调用 reload 方法
+     * @param reload 为 true 则在列排序后调用 {@linkcode Grid.reload} 方法
     */
    sortColumn(reload?: boolean): void;
+    /**
+     * 根据当前排序列数组进行多列排序
+     * @param reload 为 true 则在多列排序后调用 {@linkcode Grid.reload} 方法
+     */
+    sort(reload?: boolean): void;
    /**
     * 清除列头复选框的选中状态
     */
    clearHeaderCheckbox(): void;
+    /**
+     * 显示多列排序设置面板
+     */
+    showSortPanel(): void;
 }