Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: supplement apis #3232

Merged
merged 3 commits into from
Jan 8, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 58 additions & 1 deletion docs/assets/api/en/methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -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]

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
```
6 changes: 5 additions & 1 deletion docs/assets/api/en/properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,8 @@ Horizontal scroll bar position

## scrollTop

Vertical scroll bar position
Vertical scroll bar position

## pixelRatio

Canvas pixel ratio
62 changes: 61 additions & 1 deletion docs/assets/api/zh/methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ setRecords(records: Array<any>)
**ListTable 专有**
```

## getTaskShowIndexByRecordIndex(Function)
## getBodyRowIndexByRecordIndex(Function)

根据数据的索引获取应该显示在 body 的第几行, 参数和返回值的碎银均从 0 开始。如果是树形模式的表格,参数支持数组,如[1,2]

Expand Down Expand Up @@ -539,6 +539,29 @@ setRecords(records: Array<any>)
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)

获取行列表头的路径
Expand Down Expand Up @@ -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)

更新数据过滤规则
Expand Down Expand Up @@ -1326,3 +1375,14 @@ interface ISortedMapItem {
/** 设置单元格的树形展开收起状态为 loading */
setLoadingHierarchyState: (col: number, row: number) => void;
```

## setPixelRatio(Function)

设置画布的像素比,内部逻辑默认值为 window.devicePixelRatio 。如果感觉绘制内容模糊,可以尝试将这个值设置高一点。

获取 pixelRatio 画布像素比可以直接通过实例的 pixelRatio 属性获取。

```
/** 设置画布的像素比 */
setPixelRatio: (pixelRatio: number) => void;
```
6 changes: 5 additions & 1 deletion docs/assets/api/zh/properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

# Properties

表格实例的属性列表,以下列出的都有getter 部分有setter
表格实例的属性列表,以下列出的都有 getter 部分有 setter

## records

Expand Down Expand Up @@ -85,3 +85,7 @@
## scrollTop

纵向滚动条位置

## pixelRatio

画布像素比
6 changes: 6 additions & 0 deletions docs/assets/guide/en/Developer_Ecology/react.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
6 changes: 6 additions & 0 deletions docs/assets/guide/zh/Developer_Ecology/react.md
Original file line number Diff line number Diff line change
Expand Up @@ -295,3 +295,9 @@ register.chartModule('vchart', VChart);

// ......
```

### 自定义组件

为了方便 React 开发者快速实现自定义单元格内容,React-VTable 提供了封装组件并在单元格中使用的能力。

具体可以参考教程:[自定义组件](../custom_define/react-custom-component)
5 changes: 4 additions & 1 deletion packages/vtable/src/core/BaseTable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -943,6 +945,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
this.scenegraph.setPixelRatio(pixelRatio);
}
}

/**
* 窗口尺寸发生变化 或者像数比变化
* @return {void}
Expand Down
2 changes: 2 additions & 0 deletions packages/vtable/src/ts-types/base-table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -647,6 +647,8 @@ export interface BaseTableAPI {
_colRangeWidthsMap: Map<string, number>;
canvasSizeSeted?: boolean;

pixelRatio: number;

/** 获取表格绘制的范围 不包括frame的宽度 */
getDrawRange: () => Rect;
/** 将鼠标坐标值 转换成表格坐标系中的坐标位置 */
Expand Down
Loading