sync issue fixes, and add more comments.

lib/ui/css/grid.scss

@@ -19,6 +19,7 @@
         --row-bg-color: #fff;
         --row-active-bg-color: #fafafa;
         --row-selected-bg-color: #e6f2fb;
+        --total-row-bg-color: #b3b3b3;
         --text-disabled-color: gray;
 
         --filter-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
@@ -79,8 +80,9 @@
             table-layout: fixed;
 
             >thead {
-                tr {
                 color: var(--header-fore-color);
+
+                tr {
                     position: sticky;
                     top: 0;
                     z-index: 2;
@@ -251,15 +253,54 @@
                 }
             }
 
-            >tbody {
+            >tbody,
-                color: var(--cell-fore-color);
+            >tfoot {
 
                 >.ui-grid-row {
                     line-height: var(--line-height);
                     white-space: nowrap;
+                    box-sizing: border-box;
+
+                    >td {
+                        padding: 0;
+
+                        &.sticky {
+                            position: sticky;
+                            z-index: 1;
+                        }
+
+                        >span {
+                            padding: var(--spacing-cell);
+                            display: block;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: pre;
+                        }
+                    }
+                }
+            }
+
+            >tfoot {
+                color: var(--header-fore-color);
+                position: absolute;
+                width: 100%;
+                background-color: var(--total-row-bg-color);
+
+                >.ui-grid-row>td {
+                    font-weight: bold;
+
+                    &.sticky {
+                        background-color: var(--total-row-bg-color);
+                    }
+                }
+            }
+
+            >tbody {
+                color: var(--cell-fore-color);
+
+                >.ui-grid-row {
                     background-color: var(--row-bg-color);
                     border-bottom: 1px solid var(--cell-border-color);
-                    box-sizing: border-box;
 
                     &:hover {
                         background-color: var(--row-active-bg-color);
@@ -278,11 +319,8 @@
                     }
 
                     >td {
-                        padding: 0;
 
                         &.sticky {
-                            position: sticky;
-                            z-index: 1;
                             background-color: var(--row-bg-color);
                         }
 
@@ -302,14 +340,6 @@
                             }
                         }
 
-                        >span {
-                            padding: var(--spacing-cell);
-                            display: block;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: pre;
-                        }
-
                         >input[type="text"],
                         >textarea {
                             border: none;
@@ -387,6 +417,7 @@
                             justify-content: center;
                             align-items: center;
                             position: relative;
+                            padding: var(--spacing-s);
 
                             >svg {
                                 width: 16px;

lib/ui/grid/column.d.ts

@@ -1,370 +0,0 @@
-import { Grid, GridItem, GridItemWrapper, GridSourceItem } from "./grid";
-import { Dropdown, DropdownOptions } from "../dropdown";
-
-/** 列类型枚举 */
-declare enum GridColumnType {
-    /** 通用列 */
-    Common = 0,
-    /** 单行文本框列 */
-    Input = 1,
-    /** 下拉选择列 */
-    Dropdown = 2,
-    /** 复选框列 */
-    Checkbox = 3,
-    /** 图标列 */
-    Icon = 4,
-    /** 多行文本列 */
-    Text = 5,
-    /** 日期选择列 */
-    Date = 6
-}
-
-/** 列定义接口 */
-export interface GridColumnDefinition {
-    /** 列关键字，默认以该关键字从行数据中提取单元格值，行数据的关键字属性值里包含 DisplayValue 则优先显示此值 */
-    key?: string;
-    /** 列的类型，可以为 {@linkcode GridColumn} 的子类，或者内置类型 {@linkcode GridColumnType} */
-    type?: GridColumnType | typeof GridColumn;
-    /** 列标题文本 */
-    caption?: string;
-    /** 列标题的元素样式 */
-    captionStyle?: { [key: string]: string };
-    /** 大于 0 则设置为该宽度，否则根据列内容自动调整列宽 */
-    width?: number;
-    /** 列对齐方式 */
-    align?: "left" | "center" | "right";
-    /**
-     * 列是否可用（可编辑），允许以下类型<br/><br/>
-     * `boolean` 则直接使用该值<br/><br/>
-     * `string` 则以该值为关键字从行数据中取值作为判断条件<br/><br/>
-     * `(item: GridItem) => boolean` 则调用该函数（上下文为列定义对象），以返回值作为判断条件<br/><br/>
-     */
-    enabled?: boolean | string | ((item: GridItem) => boolean);
-    /**
-     * 单元格取值采用该方法返回的值
-     * @param item 行数据对象
-     * @param editing 是否处于编辑状态
-     * @param body Grid 控件的 `&lt;tbody&gt;` 部分
-     */
-    filter?: (item: GridItem, editing: boolean, body?: HTMLElement) => any;
-    /** 单元格以该值填充内容，忽略filter与关键字属性 */
-    text?: string;
-    /** 列是否可见 */
-    visible?: boolean;
-    /** 列是否允许调整宽度 */
-    resizable?: boolean;
-    /** 列是否允许排序 */
-    sortable?: boolean;
-    /** 列是否允许重排顺序 */
-    orderable?: boolean;
-    /** 列为复选框类型时是否在列头增加全选复选框 */
-    allcheck?: boolean;
-    /** 单元格css样式对象（仅在重建行元素时读取） */
-    css?: { [key: string]: string };
-    /** 根据返回值填充单元格样式（填充行列数据时读取） */
-    styleFilter?: (item: GridItem) => { [key: string]: string };
-    /** 根据返回值设置单元格背景色 */
-    bgFilter?: (item: GridItem) => string;
-    /** 给单元格元素附加事件（事件函数上下文为数据行对象） */
-    events?: { [event: string]: Function };
-    /** 根据返回值设置单元格元素的附加属性，允许直接设置对象也支持函数返回对象 */
-    attrs?: { [key: string]: string } | ((item: GridItem) => { [key: string]: string });
-    /** 是否允许进行列头过滤 */
-    allowFilter?: boolean;
-    /** 自定义列过滤器的数据源（函数上下文为Grid） */
-    filterSource?: Array<GridItem> | ((col: GridColumnDefinition) => Array<GridItem>);
-    /** 自定义列排序函数 */
-    sortFilter?: (a: GridItem, b: GridItem) => -1 | 0 | 1;
-    /** 列为下拉列表类型时以该值设置下拉框的参数 */
-    dropOptions?: DropdownOptions;
-    /** 列为下拉列表类型时以该值设置下拉列表数据源，支持函数返回，也支持返回异步对象 */
-    source?: Array<GridSourceItem> | ((item: GridItem) => Array<GridSourceItem> | Promise<Array<GridSourceItem>>);
-    /** 下拉列表数据源是否缓存结果（即行数据未发生变化时仅从source属性获取一次值） */
-    sourceCache?: boolean;
-    /** 列为图标类型时以该值设置图标样式（函数上下文为列定义对象），默认值 `fa-light` */
-    iconType?: "fa-light" | "fa-regular" | "fa-solid";
-    /** 列为图标类型时以该值作为单元格元素的额外样式类型（函数上下文为列定义对象） */
-    iconClassName?: string | ((item: GridItem) => string);
-    /** 列为日期类型时以该值作为最小可选日期值 */
-    dateMin?: string;
-    /** 列为日期类型时以该值作为最大可选日期值 */
-    dateMax?: string;
-    /** 列为日期类型时自定义日期转字符串函数 */
-    dateValueFormatter?: (date: Date) => string;
-    /** 以返回值额外设置单元格的tooltip（函数上下文为列定义对象） */
-    tooltip?: string | ((item: GridItem) => string);
-
-    /**
-     * 列头复选框改变时触发
-     * @param this 上下文为 Grid 对象
-     * @param col 列定义对象
-     * @param flag 是否选中
-     * @eventProperty
-     */
-    onAllChecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
-    /**
-     * 单元格发生变化时触发
-     * @param this 上下文为 Grid 对象
-     * @param item 数据行对象
-     * @param value 修改后的值
-     * @param oldValue 修改前的值
-     * @param e 列修改事件传递过来的任意对象
-     * @eventProperty
-     */
-    onChanged?: (this: Grid, item: GridItem, value: boolean | string | number, oldValue: boolean | string | number, e?: any) => void;
-    /**
-     * 文本单元格在输入完成时触发的事件
-     * @param this 上下文为 Grid 对象
-     * @param item 数据行对象
-     * @param value 修改后的文本框值
-     * @eventProperty
-     */
-    onInputEnded?: (this: Grid, item: GridItem, value: string) => void;
-    /**
-     * 列过滤点击OK时触发的事件
-     * @param this 上下文为 Grid 对象
-     * @param col 列定义对象
-     * @param selected 选中的过滤项
-     * @eventProperty
-     */
-    onFilterOk?: (this: Grid, col: GridColumnDefinition, selected: Array<GridItem>) => void;
-    /**
-     * 列过滤后触发的事件
-     * @param this 上下文为 Grid 对象
-     * @param col 列定义对象
-     * @eventProperty
-     */
-    onFiltered?: (this: Grid, col: GridColumnDefinition) => void;
-    /**
-     * 列为下拉框类型时在下拉列表展开时触发的事件
-     * @param this 上下文为列定义对象
-     * @param item 数据行对象
-     * @param drop 下拉框对象
-     * @eventProperty
-     */
-    onDropExpanded?: (this: GridColumnDefinition, item: GridItem, drop: Dropdown) => void;
-}
-
-/** 列定义基类 */
-export class GridColumn {
-    /** @ignore */
-    constructor();
-    /**
-     * 创建显示单元格时调用的方法
-     * @param col 列定义对象
-     * @returns 返回创建的单元格元素
-     * @virtual
-     */
-    static create(col: GridColumnDefinition): HTMLElement;
-    /**
-     * 创建编辑单元格时调用的方法<br/><br/>
-     * 元素修改后设置行包装对象的 `__editing` 后，支持在离开编辑状态时及时触发 {@linkcode leaveEdit} 方法<br/>
-     * 更多例子参考代码中 {@linkcode GridDropdownColumn} 的实现。
-     * @param trigger 编辑事件回调函数，e 参数会传递给 {@linkcode getValue} 方法
-     * @param col 列定义对象
-     * @param container 父容器元素
-     * @param vals 行包装对象，其 `values` 属性为行数据对象
-     * @returns 返回创建的编辑状态的单元格元素
-     * @virtual
-     */
-    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, container: HTMLElement, vals: GridItemWrapper): HTMLElement;
-    /**
-     * 创建列头时调用的方法
-     * @param col 列定义对象
-     * @returns 返回创建的列头元素
-     * @virtual
-     */
-    static createCaption?(col: GridColumnDefinition): HTMLElement;
-    /**
-     * 设置单元格值时调用的方法
-     * @param element 单元格元素
-     * @param val 待设置的单元格值
-     * @param vals 行包装对象
-     * @param col 列定义对象
-     * @param grid {@linkcode Grid} 对象
-     * @virtual
-     */
-    static setValue(element: HTMLElement, val: string | boolean | number, vals: GridItemWrapper, col: GridColumnDefinition, grid: Grid): void;
-    /**
-     * 获取编辑状态单元格值时调用的方法
-     * @param e 由 {@linkcode createEdit} 方法中 `trigger` 函数传递来的对象
-     * @param col 列定义对象
-     * @returns 返回单元格的值
-     * @virtual
-     */
-    static getValue(e: any, col: GridColumnDefinition): string | boolean | number;
-    /**
-     * 设置单元格样式时调用的方法
-     * @param element 单元格元素
-     * @param style 样式对象
-     * @virtual
-     */
-    static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
-    /**
-     * 设置单元格可用性时调用的方法
-     * @param element 单元格元素
-     * @param enabled 启用值，为false时代表禁用
-     * @virtual
-     */
-    static setEnabled(element: HTMLElement, enabled?: boolean): void;
-    /**
-     * 单元格离开编辑元素时触发，需要由行包装对象的 `__editing` 来确定是否触发。
-     * @param element 单元格元素
-     * @param container 父容器元素
-     * @virtual
-     */
-    static leaveEdit?(element: HTMLElement, container: HTMLElement): void;
-}
-
-/** 单行文本列 */
-export class GridInputColumn extends GridColumn {
-    /**
-     * 设置该类型是否支持触发 {@linkcode GridColumnDefinition.onInputEnded} 方法<br/>
-     * 该属性返回 `true` 后，在任意事件中修改行包装对象的 `__editing` 值，则会在行列元素变动时及时触发 {@linkcode GridColumnDefinition.onInputEnded} 方法，避免例如文本框还未触发 `onchange` 事件就被移除元素而导致的问题<br/>
-     * 更多例子参考代码中 {@linkcode GridInputColumn} 的实现
-     */
-    static get editing(): boolean;
-    /**
-     * @inheritdoc GridColumn.createEdit
-     * @override
-     */
-    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, container: HTMLElement, vals: GridItemWrapper): HTMLElement;
-    /**
-     * @inheritdoc GridColumn.setValue
-     * @override
-     */
-    static setValue(element: HTMLElement, val: string, vals: GridItemWrapper, col: GridColumnDefinition, grid: Grid): void;
-    /**
-     * @inheritdoc GridColumn.getValue
-     * @override
-     */
-    static getValue(e: any): string;
-    /**
-     * @inheritdoc GridColumn.setEnabled
-     * @override
-     */
-    static setEnabled(element: HTMLElement, enabled?: boolean): void;
-}
-
-/** 多行文本列 */
-export class GridTextColumn extends GridInputColumn {
-    /**
-     * @inheritdoc GridInputColumn.createEdit
-     * @override
-     */
-    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, container: HTMLElement, vals: GridItemWrapper): HTMLElement;
-    /**
-     * @inheritdoc GridInputColumn.setValue
-     * @override
-     */
-    static setValue(element: HTMLElement, val: string, vals: GridItemWrapper, col: GridColumnDefinition, grid: Grid): void;
-}
-
-/** 下拉选择列 */
-export class GridDropdownColumn extends GridColumn {
-    /**
-     * @inheritdoc GridColumn.createEdit
-     * @override
-     */
-    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, container: HTMLElement, vals: GridItemWrapper): HTMLElement;
-    /**
-     * @inheritdoc GridColumn.setValue
-     * @override
-     */
-    static setValue(element: HTMLElement, val: string, vals: GridItemWrapper, col: GridColumnDefinition): void;
-    /**
-     * @inheritdoc GridColumn.getValue
-     * @override
-     */
-    static getValue(e: any, col: GridColumnDefinition): string;
-    /**
-     * @inheritdoc GridColumn.setEnabled
-     * @override
-     */
-    static setEnabled(element: HTMLElement, enabled?: boolean): void;
-    /**
-     * @inheritdoc GridColumn.leaveEdit
-     * @override
-     */
-    static leaveEdit?(element: HTMLElement, container: HTMLElement): void;
-}
-
-/** 复选框列 */
-export class GridCheckboxColumn extends GridColumn {
-    /**
-     * @inheritdoc GridColumn.createEdit
-     * @override
-     */
-    static createEdit(trigger: (e: any) => void): HTMLElement;
-    /**
-     * @inheritdoc GridColumn.setValue
-     * @override
-     */
-    static setValue(element: HTMLElement, val: boolean): void;
-    /**
-     * @inheritdoc GridColumn.getValue
-     * @override
-     */
-    static getValue(e: any): boolean;
-    /**
-     * @inheritdoc GridColumn.setEnabled
-     * @override
-     */
-    static setEnabled(element: HTMLElement, enabled?: boolean): void;
-}
-
-/** 图标列 */
-export class GridIconColumn extends GridColumn {
-    /**
-     * @inheritdoc GridColumn.create
-     * @override
-     */
-    static create(): HTMLElement;
-    /**
-     * @inheritdoc GridColumn.setValue
-     * @override
-     */
-    static setValue(element: HTMLElement, val: string, vals: GridItemWrapper, col: GridColumnDefinition): void;
-    /**
-     * @inheritdoc GridColumn.setEnabled
-     * @override
-     */
-    static setEnabled(element: HTMLElement, enabled?: boolean): void;
-}
-
-/** 日期选择列 */
-export class GridDateColumn extends GridColumn {
-    /**
-     * @inheritdoc GridColumn.createEdit
-     * @override
-     */
-    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, container: HTMLElement, vals: GridItemWrapper): HTMLElement;
-    /**
-     * 设置单元格值时调用的方法<br/><br/>
-     * 支持以下几种数据类型<br/><br/>
-     * `"2024-01-26"`<br/>
-     * `"1/26/2024"`<br/>
-     * `"638418240000000000"`<br/>
-     * `new Date('2024-01-26')`<br/>
-     * @param element 单元格元素
-     * @param val 待设置的单元格值
-     * @override
-     */
-    static setValue(element: HTMLElement, val: string | number): void;
-    /**
-     * @inheritdoc GridColumn.getValue
-     * @override
-     */
-    static getValue(e: any): string | number;
-    /**
-     * @inheritdoc GridColumn.setEnabled
-     * @override
-     */
-    static setEnabled(element: HTMLElement, enabled?: boolean): void;
-    /**
-     * 格式化日期对象为 M/d/yyyy 格式的字符串
-     * @param date 日期对象
-     * @returns 返回格式化后的字符串
-     */
-    static formatDate(date: Date): string;
-}

lib/ui/grid/column.js

@@ -254,6 +254,12 @@ export class GridDropdownColumn extends GridColumn {
         return drop;
     }
 
+    /**
+     * @private
+     * @param {Map<string, ValueItem>} item 
+     * @param {GridColumnDefinition} col 
+     * @returns {GridSourceItem[]}
+     */
     static _getSource(item, col) {
         let source;
         if (col.sourceCache !== false) {

lib/ui/grid/grid.d.ts

@@ -1,323 +0,0 @@
-import { GridColumnDefinition } from "./column"
-/**
- * 单元格点击回调函数
- * 
- * @param {number} index - 点击的行索引
- * @param {number} colIndex - 点击的列索引
- * @returns {boolean} 返回 `false` 则取消事件冒泡
- */
-declare function cellClickedCallback(index: number, colIndex: number): boolean;
-
-/** 列数据接口 */
-interface GridItem {
-    /** 值 */
-    Value: any;
-    /** 显示值 */
-    DisplayValue: string;
-}
-
-/** 列数据行包装接口 */
-interface GridItemWrapper {
-    /** 真实数据对象 */
-    values: { [key: string]: GridItem | any };
-    /** 下拉数据源缓存对象 */
-    source: { [key: string]: Array<GridSourceItem> };
-}
-
-/** 下拉框列数据源接口 */
-interface GridSourceItem {
-    /** 值 */
-    value: string;
-    /** 显示文本 */
-    text: string;
-}
-
-/** Grid 语言资源接口 */
-interface GridLanguages {
-    /**
-     * “所有”文本，默认值 `( All )` */
-    all: string;
-    /** “确定”文本，默认值 `OK` */
-    ok: string;
-    /** “重置”文本，默认值 `Reset` */
-    reset: 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";
-}
-
-/** 列排序枚举 */
-declare enum GridColumnDirection {
-    /** 倒序 */
-    Descending = -1,
-    /** 升序 */
-    Ascending = 1
-}
-
-/** 列事件枚举 */
-declare enum GridColumnEvent {
-    /** 重排事件 */
-    Reorder = "reorder",
-    /** 宽调整事件 */
-    Resize = "resize",
-    /** 排序事件 */
-    Sort = "sort"
-}
-
-/** Grid 控件基础类 */
-export class Grid {
-    /** 列类型枚举 */
-    static ColumnTypes: {
-        /** 通用列（只读） */
-        Common: 0,
-        /** 单行文本列 */
-        Input: 1,
-        /** 下拉选择列 */
-        Dropdown: 2,
-        /** 复选框列 */
-        Checkbox: 3,
-        /** 图标列 */
-        Icon: 4,
-        /** 多行文本列 */
-        Text: 5,
-        /** 日期选择列 */
-        Date: 6,
-        /**
-         * 判断列是否为复选框列
-         * @param type 列类型
-         */
-        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` */
-    readonly?: boolean;
-    /** 是否允许多选，默认值 `false` */
-    multiSelect?: boolean;
-    /** 为 false 时只有点击在单元格内才会选中行，默认值 `true` */
-    fullrowClick?: boolean;
-    /** 单元格 tooltip 是否禁用，默认值 `false` */
-    tooltipDisabled?: boolean;
-    /** 列头是否显示，默认值 `true` */
-    headerVisible?: boolean;
-    /** 监听事件的窗口载体，默认值 `window` */
-    window?: Window
-    /** 排序列的索引，默认值 `-1` */
-    sortIndex?: number;
-    /** 排序方式，正数升序，负数倒序，默认值 `1` */
-    sortDirection?: GridColumnDirection;
-    /** 排序列 */
-    sortArray?: Array<GridColumnSortDefinition>;
-
-    /**
-     * Grid 控件构造函数
-     * @param container Grid 控件所在的父容器，可以是 string 表示选择器，也可以是 HTMLElement 对象<br/><br/>
-     * <i>构造时可以不进行赋值，但是调用 init 函数时则必须进行赋值</i>
-     * @param getText （可选参数）获取多语言文本的函数代理
-     */
-    constructor(container: string | HTMLElement, getText?: (id: string, def?: string) => string);
-
-    /**
-     * 即将选中行时触发，返回 false、null、undefined、0 等则取消选中动作
-     * @param index 即将选中的行索引
-     * @param colIndex 即将选中的列索引
-     * @eventProperty
-     */
-    willSelect?: (index: number, colIndex: number) => boolean;
-    /**
-     * 单元格单击时触发，colIndex 为 -1 则表示点击的是行的空白处，返回 false 则取消事件冒泡
-     * @eventProperty
-     */
-    cellClicked?: typeof cellClickedCallback;
-
-    /**
-     * 选中行发生变化时触发的事件
-     * @param index 选中的行索引
-     * @eventProperty
-     */
-    onSelectedRowChanged?: (index?: number) => void;
-    /**
-     * 单元格双击时触发的事件，colIndex 为 -1 则表示点击的是行的空白处
-     * @param index 双击的行索引
-     * @param colIndex 双击的列索引
-     * @eventProperty
-     */
-    onCellDblClicked?: (index: number, colIndex: number) => void;
-    /**
-     * 行双击时触发的事件
-     * @param index 双击的行索引
-     * @eventProperty
-     */
-    onRowDblClicked?: (index: number) => void;
-    /**
-     * 列发生变化时触发的事件
-     * @param type 事件类型<br/><br/>
-     * "reorder" 为发生列重排事件，此时 value 为目标列索引<br/>
-     * "resize" 为发生列宽调整事件，此时 value 为列宽度值<br/>
-     * "sort" 为发生列排序事件，此时 value 为 1（升序）或 -1（倒序）
-     * @param colIndex 发生变化事件的列索引
-     * @param value 变化的值
-     * @eventProperty
-     */
-    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 allSource(): Array<GridItem>;
-    /** 获取数据数组（已过滤） */
-    get source(): Array<GridItem>;
-    /** 设置数据，并刷新列表 */
-    set source(list: Array<GridItem>);
-    /** 获取当前选中的行索引的数组 */
-    get selectedIndexes(): Array<number>;
-    /** 设置当前选中的行索引的数组，并刷新列表 */
-    set selectedIndexes(indexes: Array<number>);
-    /** 获取 Grid 当前是否处于加载状态 */
-    get loading(): boolean;
-    /** 使 Grid 进入加载状态 */
-    set loading(flag: boolean);
-    /** 获取 Grid 当前滚动的偏移量 */
-    get scrollTop(): number;
-    /** 设置 Grid 滚动偏移量 */
-    set scrollTop(top: number);
-
-    /** 获取 Grid 的页面元素 */
-    get element(): HTMLElement;
-    /** 获取当前 Grid 是否已发生改变 */
-    get changed(): boolean;
-    /** 获取当前是否为虚模式状态 */
-    get virtual(): boolean;
-    /** 获取当前排序的列关键字，为 null 则当前无排序列 */
-    get sortKey(): string | undefined;
-    /** 获取当前选中行的索引，为 -1 则当前没有选中行 */
-    get selectedIndex(): number | -1;
-
-    /**
-     * 初始化Grid控件
-     * @param container 父容器元素，若未传值则采用构造方法中传入的父容器元素
-     */
-    init(container?: HTMLElement): void;
-    /**
-     * 设置数据列表，该方法为 set source 属性的语法糖
-     * @param source 待设置的数据列表
-     */
-    setData(source: Array<GridItem>): void;
-    /**
-     * 设置单行数据
-     * @param index 行索引
-     * @param item 待设置的行数据值
-     */
-    setItem(index: number, item: GridItem): void;
-    /**
-     * 添加行数据
-     * @param item 待添加的行数据值
-     * @param index 待添加的行索引
-     * @returns 返回已添加的行数据
-     */
-    addItem(item: GridItem, index?: number): GridItem;
-    /**
-     * 批量添加行数据
-     * @param array 待添加的行数据数组
-     * @param index 待添加的行索引
-     * @returns 返回已添加的行数据数组
-     */
-    addItems(array: Array<GridItem>, index?: number): Array<GridItem>
-    /**
-     * 删除行数据
-     * @param index 待删除的行索引
-     * @returns 返回已删除的行数据
-     */
-    removeItem(index: number): GridItem;
-    /**
-     * 批量删除行数据
-     * @param indexes 待删除的行索引数组，未传值时删除所有行
-     * @returns 返回已删除的行数据数组
-     */
-    removeItems(indexes?: Array<number>): Array<GridItem>;
-    /**
-     * 滚动到指定行的位置
-     * @param index 待滚动至的行索引
-     */
-    scrollToIndex(index: number): void;
-    /**
-     * 调整 Grid 元素的大小，一般需要在宽度变化时（如页面大小发生变化时）调用
-     * @param force 是否强制 {@linkcode reload}，默认只有待渲染的行数发生变化时才会调用
-     * @param keep 是否保持当前滚动位置
-     */
-    resize(force?: boolean, keep?: boolean): void;
-    /**
-     * 重新计算需要渲染的行，并载入元素，一般需要在高度变化时调用
-     * @param keep 是否保持当前滚动位置
-     */
-    reload(keep?: boolean): void;
-    /**
-     * 重新填充Grid单元格数据
-     */
-    refresh(): void;
-    /**
-     * 把所有行重置为未修改的状态
-     */
-    resetChange(): void;
-    /**
-     * 根据当前排序字段进行列排序
-     * @param reload 为 true 则在列排序后调用 {@linkcode Grid.reload} 方法
-     */
-    sortColumn(reload?: boolean): void;
-    /**
-     * 根据当前排序列数组进行多列排序
-     * @param reload 为 true 则在多列排序后调用 {@linkcode Grid.reload} 方法
-     */
-    sort(reload?: boolean): void;
-    /**
-     * 清除列头复选框的选中状态
-     */
-    clearHeaderCheckbox(): void;
-    /**
-     * 显示多列排序设置面板
-     */
-    showSortPanel(): void;
-}

lib/ui/tooltip.js

@@ -2,6 +2,8 @@ import './css/tooltip.scss';
 import { createElement } from "../functions";
 // import { global } from "../utility";
 
+const pointerHeight = 12;
+
 export function setTooltip(container, content, flag = false, parent = null) {
     const isParent = parent instanceof HTMLElement;
     if (isParent) {
@@ -77,9 +79,9 @@ export function setTooltip(container, content, flag = false, parent = null) {
                 const offsetHeight = wrapper.offsetHeight;
                 const offsetWidth = wrapper.offsetWidth;
                 if (isParent) {
-                    top -= offsetHeight + 14;
+                    top -= offsetHeight + pointerHeight;
-                    if (top < -offsetHeight) {
+                    if (top < 0) {
-                        top += c.offsetHeight + offsetHeight + 14;
+                        top += c.offsetHeight + offsetHeight + pointerHeight * 2;
                         wrapper.classList.add('ui-tooltip-down');
                     }
                     left += (c.offsetWidth - offsetWidth) / 2;
@@ -125,20 +127,20 @@ export function setTooltip(container, content, flag = false, parent = null) {
                             p = p.parentElement;
                         }
                     }
-                    if (t - offsetHeight - 14 < 0) {
+                    if (t - offsetHeight - pointerHeight < 0) {
                         const containerOffsetHeight = c.offsetHeight;
-                        if (t + containerOffsetHeight + offsetHeight + 14 > lastHeight) {
+                        if (t + containerOffsetHeight + offsetHeight + pointerHeight > lastHeight) {
                             top = t + (containerOffsetHeight - offsetHeight) / 2;
                             if (top + offsetHeight + 1 > lastHeight) {
                                 top = lastHeight - offsetHeight - 1;
                             }
                             wrapper.classList.add('ui-tooltip-no');
                         } else {
-                            top += containerOffsetHeight + 14;
+                            top += containerOffsetHeight + pointerHeight;
                             wrapper.classList.add('ui-tooltip-down');
                         }
                     } else {
-                        top -= offsetHeight + 14;
+                        top -= offsetHeight + pointerHeight;
                         wrapper.classList.remove('ui-tooltip-down');
                     }
                     left += (c.offsetWidth - offsetWidth) / 2;