diff --git a/docs/assets/api/en/methods.md b/docs/assets/api/en/methods.md index 0231f39ce..926c7c69f 100644 --- a/docs/assets/api/en/methods.md +++ b/docs/assets/api/en/methods.md @@ -373,7 +373,7 @@ If it is a table in tree mode, an array will be returned, such as [1,2], the 3rd **ListTable proprietary** ``` -## getTaskShowIndexByRecordIndex(Function) +## getBodyRowIndexByRecordIndex(Function) Get the row number that should be displayed in the body according to the index of the data. Both the parameter and the return value start from 0. If it is a table in tree mode, the parameter supports arrays, such as [1,2] @@ -543,6 +543,29 @@ Get the specific position of the cell in the entire table. Relative position is getCellRelativeRect(col: number, row: number): Rect ``` +## getCellRange(Function) + +Gets the merge range for the cell + +``` + /** + * @param {number} col column index + * @param {number} row row index + * @returns {Rect} +*/ +getCellRange(col: number, row: number): CellRange + +export interface CellRange { + start: CellAddress; + end: CellAddress; +} + +export interface CellAddress { + col: number; + row: number; +} +``` + ## getCellHeaderPaths(Function) Get the path to the row list header @@ -827,6 +850,29 @@ export type TooltipOptions = { ``` +## showDropdownMenu(Function) +Display dropdown menu, the content can be the menu items already set in the option, or display specific dom content. Use [demo](../demo/component/dropdown) +``` + /** + * Display dropdown menu + * @param col The column number of the cell where the dropdown menu is displayed + * @param row The row number of the cell where the dropdown menu is displayed + * @param menuOptions The content configuration of the dropdown menu + */ + showDropdownMenu(col: number, row: number, menuOptions?: DropDownMenuOptions) => void; + + /** Display dropdown menu settings or display specific dom content */ + export type DropDownMenuOptions = { + // menuList?: MenuListItem[]; + content: HTMLElement | MenuListItem[]; + position?: { x: number; y: number }; + referencePosition?: { + rect: RectProps; + /** Currently, the dropdown menu icon is aligned to the right, but the specified position is not yet implemented */ + placement?: Placement; + }; + }; +``` ## updateFilterRules(Function) Update data filtering rules @@ -1328,3 +1374,14 @@ Set the loading state of the tree expansion and collapse of the cell /** Set the loading state of the tree expansion and collapse of the cell */ setLoadingHierarchyState: (col: number, row: number) => void; ``` + +## setPixelRatio(Function) + +Sets the pixel ratio of the canvas. The default internal logic is window.devicePixelRatio. If the drawing feels fuzzy, try setting this value higher. + +The pixelRatio can be obtained directly from the instance's pixelRatio property. + +``` + /** Set the canvas pixel ratio */ + setPixelRatio: (pixelRatio: number) => void; +``` diff --git a/docs/assets/api/en/properties.md b/docs/assets/api/en/properties.md index d2b2cebb4..74c3b304b 100644 --- a/docs/assets/api/en/properties.md +++ b/docs/assets/api/en/properties.md @@ -84,4 +84,8 @@ Horizontal scroll bar position ## scrollTop -Vertical scroll bar position \ No newline at end of file +Vertical scroll bar position + +## pixelRatio + +Canvas pixel ratio diff --git a/docs/assets/api/zh/methods.md b/docs/assets/api/zh/methods.md index 57e89af17..1454ffada 100644 --- a/docs/assets/api/zh/methods.md +++ b/docs/assets/api/zh/methods.md @@ -371,7 +371,7 @@ setRecords(records: Array) **ListTable 专有** ``` -## getTaskShowIndexByRecordIndex(Function) +## getBodyRowIndexByRecordIndex(Function) 根据数据的索引获取应该显示在 body 的第几行, 参数和返回值的碎银均从 0 开始。如果是树形模式的表格,参数支持数组,如[1,2] @@ -539,6 +539,29 @@ setRecords(records: Array) getCellRelativeRect(col: number, row: number): Rect ``` +## getCellRange(Function) + +获取单元格的合并范围 + +``` + /** + * @param {number} col column index + * @param {number} row row index + * @returns {Rect} +*/ +getCellRange(col: number, row: number): CellRange + +export interface CellRange { + start: CellAddress; + end: CellAddress; +} + +export interface CellAddress { + col: number; + row: number; +} +``` + ## getCellHeaderPaths(Function) 获取行列表头的路径 @@ -824,6 +847,32 @@ export type TooltipOptions = { ``` +## showDropdownMenu(Function) + +显示下拉菜单,显示内容可以为 option 中已经设置好的菜单项, 或者显示指定 dom 内容。使用[demo](../demo/component/dropdown) + +``` + /** + * 显示下拉菜单 + * @param col 显示下拉菜单的单元格的列号 + * @param row 显示下拉菜单的单元格的行号 + * @param menuOptions 下拉菜单的内容配置 + */ + showDropdownMenu(col: number, row: number, menuOptions?: DropDownMenuOptions) => void; + + /** 显示下拉菜单设置项 或者显示指定dom内容 */ + export type DropDownMenuOptions = { + // menuList?: MenuListItem[]; + content: HTMLElement | MenuListItem[]; + position?: { x: number; y: number }; + referencePosition?: { + rect: RectProps; + /** 目前下拉菜单右对齐icon,指定位置暂未实现 */ + placement?: Placement; + }; + }; +``` + ## updateFilterRules(Function) 更新数据过滤规则 @@ -1326,3 +1375,14 @@ interface ISortedMapItem { /** 设置单元格的树形展开收起状态为 loading */ setLoadingHierarchyState: (col: number, row: number) => void; ``` + +## setPixelRatio(Function) + +设置画布的像素比,内部逻辑默认值为 window.devicePixelRatio 。如果感觉绘制内容模糊,可以尝试将这个值设置高一点。 + +获取 pixelRatio 画布像素比可以直接通过实例的 pixelRatio 属性获取。 + +``` + /** 设置画布的像素比 */ + setPixelRatio: (pixelRatio: number) => void; +``` diff --git a/docs/assets/api/zh/properties.md b/docs/assets/api/zh/properties.md index 48c2a0727..4c2b7313b 100644 --- a/docs/assets/api/zh/properties.md +++ b/docs/assets/api/zh/properties.md @@ -2,7 +2,7 @@ # Properties -表格实例的属性列表,以下列出的都有getter 部分有setter。 +表格实例的属性列表,以下列出的都有 getter 部分有 setter。 ## records @@ -85,3 +85,7 @@ ## scrollTop 纵向滚动条位置 + +## pixelRatio + +画布像素比 diff --git a/docs/assets/guide/en/Developer_Ecology/react.md b/docs/assets/guide/en/Developer_Ecology/react.md index e73d901a3..840e54c79 100644 --- a/docs/assets/guide/en/Developer_Ecology/react.md +++ b/docs/assets/guide/en/Developer_Ecology/react.md @@ -294,3 +294,9 @@ register.chartModule('vchart', VChart); // ...... ``` + +### Custom component + +To make it easy for React developers to quickly customize cell content, React-VTable provides the ability to encapsulate components and use them in cells. + +Refer to the tutorial for details:[Custom component](../custom_define/react-custom-component) diff --git a/docs/assets/guide/zh/Developer_Ecology/react.md b/docs/assets/guide/zh/Developer_Ecology/react.md index f0b821fb7..cda8214b3 100644 --- a/docs/assets/guide/zh/Developer_Ecology/react.md +++ b/docs/assets/guide/zh/Developer_Ecology/react.md @@ -295,3 +295,9 @@ register.chartModule('vchart', VChart); // ...... ``` + +### 自定义组件 + +为了方便 React 开发者快速实现自定义单元格内容,React-VTable 提供了封装组件并在单元格中使用的能力。 + +具体可以参考教程:[自定义组件](../custom_define/react-custom-component) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 78ffb47b2..bc89bf536 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -922,7 +922,9 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { const limits = this._getColWidthLimits(col); return Math.max(_applyColWidthLimits(limits, orgWidth), 0); } - + get pixelRatio(): number { + return this.internalProps.pixelRatio; + } /** * 设置像数比 * @param pixelRatio @@ -943,6 +945,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { this.scenegraph.setPixelRatio(pixelRatio); } } + /** * 窗口尺寸发生变化 或者像数比变化 * @return {void} diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 7cd285f24..1351350bf 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -647,6 +647,8 @@ export interface BaseTableAPI { _colRangeWidthsMap: Map; canvasSizeSeted?: boolean; + pixelRatio: number; + /** 获取表格绘制的范围 不包括frame的宽度 */ getDrawRange: () => Rect; /** 将鼠标坐标值 转换成表格坐标系中的坐标位置 */