From bda4b0e410cd27eb10d32dee1e0f01927ef3463b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BD=AD=E7=81=BF?= <2669958319@qq.com> Date: Sun, 4 Jan 2026 15:26:09 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README_zh.md | 235 ++++++++++++++++++ entry/src/main/ets/pages/Index.ets | 28 +-- .../src/main/ets/util/VTableController.ets | 3 +- 3 files changed, 251 insertions(+), 15 deletions(-) create mode 100644 README_zh.md diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000..29163fd --- /dev/null +++ b/README_zh.md @@ -0,0 +1,235 @@ +# VTable +## 简介 + +VTable是一款表格生成器，支持表格自定义header、可缩放、可自定义单元格、可指定分割线颜色、支持冻结行列、支持onScroll滚动回调、支持指定行列的宽高、支持单元格的点击、可滚动到指定行列。 + + +## 下载安裝 + +``` + ohpm install @ohos/vtable +``` + +OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://gitcode.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md)。 + + +## 使用说明 + +#### initTable +初始化表格数据 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.initTable(this.option) +``` + +#### updateColumns +修改表头标题 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.updateColumns(this.columns) +``` + +#### frozenToCol +冻结至列 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.frozenToCol(Number(value1)) +``` + +取消冻结列 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.frozenToCol(0) +``` + +#### frozenRow +冻结至行 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.frozenRow(Number(value1) + 1) +``` + +取消冻结行 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.frozenRow(1) +``` + +#### mergeCell +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.mergeCell( + Math.min(this.mergeCellParams[0], this.mergeCellParams[2]), // startRow + Math.min(this.mergeCellParams[1], this.mergeCellParams[3]), // startCol + Math.max(this.mergeCellParams[0], this.mergeCellParams[2]), // endRow + Math.max(this.mergeCellParams[1], this.mergeCellParams[3]) // endCol + ); +``` + +#### customRender +自定义渲染 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.customRender(this.mergeCellParams[0], this.mergeCellParams[1],this.mergeCellParams[2], this.mergeCellParams[3]) +``` + +#### cancelCustomRender +取消自定义渲染 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.cancelCustomRender(this.mergeCellParams[0], this.mergeCellParams[1],this.mergeCellParams[2], this.mergeCellParams[3]) +``` + +#### scrollToCol +滚动到列 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.scrollToCol(Number(value1) - 1) +``` + +#### scrollToRow +滚动到行 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.scrollToRow(Number(value1)) +``` + +#### setRowHeight +改变行高 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.setRowHeight(Number(value1), Number(value2)) +``` + +#### setColWidth +改变列宽 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.setColWidth(Number(value1) - 1, Number(value2)) +``` + +#### setSplitLineColor +改变列分割线颜色 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.setSplitLineColor([value1]) +``` + +#### clearSelected +清除旋转 +```typescript +import { initTable } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.clearSelected() +``` + +## 接口说明 +接口 + +| 功能名称 | 入参内容 | 功能描述 | +|--------------------|--------------------------------------------------------------------------|------------------------------| +| initTabulator | (headers: IHeaderData[], data: Record[], index?: number \| string) | 初始化表格数据 | +| updateDefinition | (title1: string, title2: string) | 修改表头标题 | +| frozenColumn | (title: string) | 冻结指定标题的列 | +| unfrozenColumn | (title: string) | 取消冻结指定标题的列 | +| frozenRow | (index: number) | 冻结指定索引的行 | +| unfrozenRow | (index: number) | 取消冻结指定索引的行 | +| scrollColumn | (title: string) | 滚动到指定标题的列 | +| scrollRow | (index: number) | 滚动到指定索引的行，可指定位置和额外参数 | +| setRowHeight | (index: number, height: number, force?: boolean) | 改变指定索引行的高度，可选是否强制设置 | +| setColumnWidth | (title: string, width: number) | 改变指定标题列的宽度 | +| setColumnDivider | (borderColor?: string) | 设置纵向分割线样式（颜色），默认样式为实线，默认颜色为黑色 | +| setRowDivider | (borderColor?: string) | 设置横向分割线样式（颜色），默认样式为实线，默认颜色为黑色 | +| getScrollCallback | (callback: (top?: number, left?: number) => void) | 设置滚动回调函数，获取滚动时的顶部和左侧位置 | +| tapHoldCell | (func?: () => void) | 设置单元格长按操作的回调函数 | +| richText | (num: number) | 设置文本大小 | +| changeline | 无参数 | 为单元格设置斜线 | +| setBorder | 无参数 | 为单元格设置内嵌边框 | +| setBackground | (backgroundColor: string) | 设置单元格背景色 | +| setBorderColor | (borderColor: string) | 设置单元格边框颜色 | +| restore | 无参数 | 恢复单元格默认样式 | + + +IHeaderData + +| 字段名称 | 类型 | 功能描述 | +|---------------------|----------------------------------------------------------------------|--------------------------------------------------------------------------| +| title | string \| undefined | 表头显示的标题文本 | +| field | string \| undefined | 对应数据中的字段名，用于绑定列数据 | +| editor | CellInputType \| boolean \| undefined | 单元格编辑类型，可指定编辑组件类型或是否启用编辑 | +| width | number \| undefined | 列的宽度（像素） | +| headerSort | boolean \| undefined | 是否启用表头排序功能 | +| resizable | "header" \| "cell" \| boolean \| undefined | 列宽是否可调整，可选仅表头调整、单元格调整或布尔值控制整体 | +| formatter | FormatType \| string \| undefined | 单元格内容格式化类型，支持内置格式类型或自定义格式字符串 | +| formatterParams | MoneyFormatterParams \| ImageFormatterParams \| LinkFormatterParams \| DateTimeFormatterParams \| TickCrossFormatterParams \| StarFormatterParams \| TrafficFormatterParams \| ProgressFormatterParams \| ArrayFormatterParams \| JSONFormatterParams \| ToggleFormatterParams \| undefined | 单元格格式化器的参数，根据 formatter 类型匹配对应参数类型 | +| titleFormatter | FormatType \| undefined | 表头标题的格式化类型 | +| titleFormatterParams | MoneyFormatterParams \| ImageFormatterParams \| LinkFormatterParams \| DateTimeFormatterParams \| TickCrossFormatterParams \| StarFormatterParams \| TrafficFormatterParams \| ProgressFormatterParams \| ArrayFormatterParams \| JSONFormatterParams \| ToggleFormatterParams \| undefined | 表头标题格式化器的参数，根据 titleFormatter 类型匹配对应参数类型 | +| hozAlign | "left" \| "center" \| "right" \| undefined | 单元格内容的水平对齐方式（左对齐/居中/右对齐） | +| editorParams | InputEditorParams \| TextAreaEditorParams \| NumberEditorParams \| RangeEditorParams \| ProgressEditorParams \| ListEditorParams \| undefined | 单元格编辑器的参数，根据 editor 类型匹配对应参数类型 | + +### 依赖类型说明 +| 类型名称 | 说明 | +|-------------------------|--------------------------| +| CellInputType | 单元格输入类型枚举 | +| FormatType | 格式化类型枚举 | +| MoneyFormatterParams | 金额格式化器参数类型 | +| ImageFormatterParams | 图片格式化器参数类型 | +| LinkFormatterParams | 链接格式化器参数类型 | +| DateTimeFormatterParams | 日期时间格式化器参数类型 | +| TickCrossFormatterParams| 勾选/叉号格式化器参数类型| +| StarFormatterParams | 星级格式化器参数类型 | +| TrafficFormatterParams | 流量格式化器参数类型 | +| ProgressFormatterParams | 进度条格式化器参数类型 | +| ArrayFormatterParams | 数组格式化器参数类型 | +| JSONFormatterParams | JSON格式化器参数类型 | +| ToggleFormatterParams | 开关格式化器参数类型 | +| InputEditorParams | 输入框编辑器参数类型 | +| TextAreaEditorParams | 文本域编辑器参数类型 | +| NumberEditorParams | 数字编辑器参数类型 | +| RangeEditorParams | 范围编辑器参数类型 | +| ProgressEditorParams | 进度条编辑器参数类型 | +| ListEditorParams | 列表编辑器参数类型 | + + + +## 约束与限制 + +在下述版本验证通过： +- DevEco Studio: DevEco Studio 6.0.1 Release(6.0.1.251), SDK: API12(5.0.0.71) + +## 贡献代码 + +使用过程中发现任何问题都可以提交 [Issue](https://gitcode.com/openharmony-tpc/openharmony_tpc_samples/issues)，当然，也非常欢迎提交 [PR](https://gitcode.com/openharmony-tpc/openharmony_tpc_samples/pulls) 。 + +## 开源协议 + +本项目遵循 [BSD-2-Clause]()， 请自由的享受和参与开源。 diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 05b1204..fa09af3 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -35,13 +35,6 @@ struct Index { "cellType": "text", "width": "auto", "editor": "input-editor", - "icon":{ - "type":"image", - "src": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg", - "width":12, - "height":12, - "positionType":"left" - } }, { "field": "D", @@ -108,22 +101,29 @@ struct Index { } imageRecords: Record[] = [ { - "A": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg", - "B": "a", + "A": "a", + "B": "aa", "text": "aaa" }, { - "A": "a", - "B": "b", + "A": "b", + "B": "bb", "text": "bbb" }, ] - imageColumns: Record[] = [ + imageColumns: Record>[] = [ { "field": "A", "title": "icon", "width": "auto", - "editor": "input" + "editor": "input", + "icon":{ + "type":"image", + "src": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg", + "width":12, + "height":12, + "positionType":"left" + } }, { "field": "B", @@ -141,7 +141,7 @@ struct Index { "editCellTrigger": "doubleclick" } buttons: Array> = [ - // ['文件', 'ADD_FILE'], + ['文件', 'ADD_FILE'], ['修改标题', 'MODIFY_TITLE'], //done ['冻结至行', 'FREEZE_ROW'], //done ['取消冻结行', 'UNFREEZE_ROW'], //done diff --git a/library/src/main/ets/util/VTableController.ets b/library/src/main/ets/util/VTableController.ets index 5666a44..b2869bb 100644 --- a/library/src/main/ets/util/VTableController.ets +++ b/library/src/main/ets/util/VTableController.ets @@ -206,7 +206,7 @@ export class VTableController { }) } - // 更新表参数 + // 更新列参数 updateColumns(newColumns: Array>) { if (!this.checkInitialized()) { return; @@ -228,6 +228,7 @@ export class VTableController { }) } + // 更新表格参数 updateOption(option: Record>){ if (!this.checkInitialized()) { return; -- Gitee From 15f30278e4c89f6ca6491679412698a60f55408e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BD=AD=E7=81=BF?= <2669958319@qq.com> Date: Sun, 4 Jan 2026 15:35:32 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/src/main/resources/rawfile/vtable_util.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/library/src/main/resources/rawfile/vtable_util.js b/library/src/main/resources/rawfile/vtable_util.js index 799fc91..c81b96f 100644 --- a/library/src/main/resources/rawfile/vtable_util.js +++ b/library/src/main/resources/rawfile/vtable_util.js @@ -259,6 +259,9 @@ function initializeTable(option) { width: 0 } }, + scrollStyle: { + visible: "none" + }, headerStyle: { hover: { cellBgColor: 'transparent' -- Gitee