diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000000000000000000000000000000000000..29163fdd4dd34fc7c838e147b0281a4f2dbf89f6 --- /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 c9fed02e92b4316138115fa4a375c2bf49e82b57..3b00f1db4c0a07508d8dcc34ff29132720d6ba47 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", diff --git a/library/src/main/ets/util/VTableController.ets b/library/src/main/ets/util/VTableController.ets index 2890052e6816b5f69944c6bd493a1e4cc659ae60..7405725ebcd26abba9caf7926d751dfbf9a68a90 100644 --- a/library/src/main/ets/util/VTableController.ets +++ b/library/src/main/ets/util/VTableController.ets @@ -227,7 +227,7 @@ export class VTableController { }) } - // 更新表参数 + // 更新列参数 updateColumns(newColumns: Array>) { if (!this.checkInitialized()) { return; @@ -249,7 +249,8 @@ export class VTableController { }) } - updateOption(option: Record>) { + // 更新表格参数 + updateOption(option: Record>){ if (!this.checkInitialized()) { return; } diff --git a/library/src/main/resources/rawfile/vtable_util.js b/library/src/main/resources/rawfile/vtable_util.js index 6343c4a76bb8cae8c3d64b404819b65a422b2ac3..73e1a096a55620285bf33a241243dfafeff861b5 100644 --- a/library/src/main/resources/rawfile/vtable_util.js +++ b/library/src/main/resources/rawfile/vtable_util.js @@ -272,6 +272,9 @@ function initializeTable(option) { width: 0 } }, + scrollStyle: { + visible: "none" + }, headerStyle: { hover: { cellBgColor: 'transparent'