diff --git a/README.en.md b/README.en.md index ab54c7811396ed2784026ed98f56a0dc22080233..f778915b11b42a9368a1ce67bccbf4dbf1e40218 100644 --- a/README.en.md +++ b/README.en.md @@ -1,36 +1,188 @@ -# ohos_VTable +# VTable +## Introduction -#### Description -VTable的ArkWeb包装 +VTable is a table generator that supports custom headers, zooming, custom cells, specified divider colors, frozen rows and columns, onScroll callback, specified row/column widths and heights, cell clicking, and scrolling to specified rows and columns. -#### Software Architecture -Software architecture description +## Download and Installation -#### Installation +``` +ohpm install @ohos/vtable +``` -1. xxxx -2. xxxx -3. xxxx +For more details on configuring the OpenHarmony ohpm environment, refer to [How to Install OpenHarmony ohpm Packages](https://gitcode.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md). -#### Instructions +## Usage Instructions -1. xxxx -2. xxxx -3. xxxx +#### initTable +Initialize table data +```typescript +import { VTableController, initTable } from '@ohos/vtable'; -#### Contribution +@State vTableController: VTableController = new VTableController(); +this.vTableController.initTable(this.option) +``` -1. Fork the repository -2. Create Feat_xxx branch -3. Commit your code -4. Create Pull Request +#### updateColumns +Modify header titles +```typescript +import { VTableController, updateColumns } from '@ohos/vtable'; +@State vTableController: VTableController = new VTableController(); +this.vTableController.updateColumns(this.columns) +``` -#### Gitee Feature +#### frozenToCol +Freeze to column +```typescript +import { VTableController, frozenToCol } from '@ohos/vtable'; -1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md -2. Gitee blog [blog.gitee.com](https://blog.gitee.com) -3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) -4. The most valuable open source project [GVP](https://gitee.com/gvp) -5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) -6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) +@State vTableController: VTableController = new VTableController(); +this.vTableController.frozenToCol(Number(value1)) +``` + +Unfreeze column +```typescript +import { VTableController, frozenToCol } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.frozenToCol(0) +``` + +#### frozenRow +Freeze to row +```typescript +import { VTableController, frozenRow } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.frozenRow(Number(value1) + 1) +``` + +Unfreeze row (refresh required after unfreezing) +```typescript +import { VTableController, frozenRow } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.frozenRow(1) +``` + +#### mergeCell +Merge cells +```typescript +import { VTableController, mergeCell } 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 +Custom rendering +```typescript +import { VTableController, customRender } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.customRender(this.mergeCellParams[0], this.mergeCellParams[1], this.mergeCellParams[2], this.mergeCellParams[3]) +``` + +#### cancelCustomRender +Cancel custom rendering +```typescript +import { VTableController, cancelCustomRender } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.cancelCustomRender(this.mergeCellParams[0], this.mergeCellParams[1], this.mergeCellParams[2], this.mergeCellParams[3]) +``` + +#### scrollToCol +Scroll to column +```typescript +import { VTableController, scrollToCol } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.scrollToCol(Number(value1) - 1) +``` + +#### scrollToRow +Scroll to row +```typescript +import { VTableController, scrollToRow } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.scrollToRow(Number(value1)) +``` + +#### setRowHeight +Change row height +```typescript +import { VTableController, setRowHeight } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.setRowHeight(Number(value1), Number(value2)) +``` + +#### setColWidth +Change column width +```typescript +import { VTableController, setColWidth } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.setColWidth(Number(value1) - 1, Number(value2)) +``` + +#### setSplitLineColor +Change column divider color +```typescript +import { VTableController, setSplitLineColor } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.setSplitLineColor([value1]) +``` + +#### setZoom +Zoom +```typescript +import { VTableController, setZoom } from '@ohos/vtable'; + +@State vTableController: VTableController = new VTableController(); +this.vTableController.setZoom(true) +``` + +## API Documentation +### Interfaces + +| Function Name | Parameters | Description | +|-------------------------|------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------| +| initTable | [option](https://visactor.io/vtable/option/ListTable): Record> | Initialize table data | +| updateColumns | [newColumns](https://visactor.io/vtable/option/ListTable#columns): Array> | Modify header titles | +| frozenToCol | index: number | Freeze columns up to specified index | +| frozenRow | index: number | Freeze rows up to specified index | +| mergeCell | startCol: number, startRow: number, endCol: number, endRow: number | Merge cells | +| unmergeCells | startCol: number, startRow: number, endCol: number, endRow: number | Unmerge cells | +| customRender | startCol: number, startRow: number, endCol: number, endRow: number, id: string = 'default', [style](https://visactor.io/vtable/option/ListTable-columns-text#style)?: Record | Custom rendering | +| cancelCustomRender | startCol: number, startRow: number, endCol: number, endRow: number | Cancel custom rendering | +| scrollToCol | colIndex: number | Scroll to specified column | +| scrollToRow | rowIndex: number | Scroll to specified row (with position and additional parameters) | +| setRowHeight | rowIndex: number, height: number | Change height of specified row (optional force setting) | +| setColWidth | colIndex: number, width: number | Change width of specified column | +| setSplitLineColor | color: string[] | Set divider line color | +| updateOption | [option](https://visactor.io/vtable/option/ListTable): Record> | Update table configuration | +| renderWithRecreateCells | None | Re-render table | +| setZoom | isMagnify: boolean | Zoom (true for zoom in, false for zoom out) | +| release | None | Release resources | + +## Constraints and Limitations + +Verified on the following versions: +- DevEco Studio: DevEco Studio 6.0.1 Release(6.0.1.251), SDK: API12(5.0.0.71) + +## Contributing + +If you encounter any issues during use, feel free to submit an [Issue](https://gitcode.com/openharmony-tpc/openharmony_tpc_samples/issues). Of course, we also welcome [PR](https://gitcode.com/openharmony-tpc/openharmony_tpc_samples/pulls) submissions. + +## Open Source License + +This project follows the [BSD-2-Clause]() license. Feel free to enjoy and participate in open source. \ No newline at end of file diff --git a/README_zh.md b/README_zh.md index 09138e1c65eae34907bb1f4befe13219c63d9e07..cb1d944c572e28af877e201658851b26dcc5ef8f 100644 --- a/README_zh.md +++ b/README_zh.md @@ -68,6 +68,7 @@ this.vTableController.frozenRow(1) ``` #### mergeCell +合并单元格 ```typescript import { VTableController,mergeCell } from '@ohos/vtable'; diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 79719127a525bf33093ab2c9718625f4c9a17d63..7ce3bd8eebd36039111ececb19fc237230a8721a 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -380,6 +380,9 @@ struct Index { } onChangeCellValue(event: CellChangeEvent) { + + + if (this.floatingWindowType !== 5) { return; } diff --git a/library/src/main/resources/rawfile/vtable_util.js b/library/src/main/resources/rawfile/vtable_util.js index e1611ac9652c7c6ab04606ea0906ee44577f38f0..31af049821d880167572d44790a186d66b767519 100644 --- a/library/src/main/resources/rawfile/vtable_util.js +++ b/library/src/main/resources/rawfile/vtable_util.js @@ -122,7 +122,7 @@ var eventCallback = (type, data) => { break; case "CHANGE_CELL_VALUE": - filteredData = extractCellChangeData(data); + filteredData = data; break; case "UPDATED": @@ -171,7 +171,7 @@ function frozenToCol(index) { return; } window.tableInstance.setFrozenColCount(index); - console.log("=====> frozenToCol",JSON.stringify(window.tableInstance.options.frozenRowCount)) + console.log("=====> frozenToCol", JSON.stringify(window.tableInstance.options.frozenRowCount)) } // 冻结指定行数，使上方指定数量的行固定不动 @@ -189,11 +189,11 @@ function mergeCell(startCol, startRow, endCol, endRow) { console.error('表格实例未找到'); return; } - console.log("=====> unmergeCells",JSON.stringify(window.tableInstance.editorManager.editingEditor)) + console.log("=====> unmergeCells", JSON.stringify(window.tableInstance.editorManager.editingEditor)) const cellrecord = window.tableInstance.getRecordByCell(startCol, startRow); - const cellnumber = window.tableInstance.getCellValue(startCol, startRow,true); - console.log("=====> mergeCell",JSON.stringify(cellrecord)) - console.log("=====> mergeCell",JSON.stringify(cellnumber)) + const cellnumber = window.tableInstance.getCellValue(startCol, startRow, true); + console.log("=====> mergeCell", JSON.stringify(cellrecord)) + console.log("=====> mergeCell", JSON.stringify(cellnumber)) for (let i = startCol; i <= endCol; i++) { for (let j = startRow; j <= endRow; j++) { window.tableInstance.changeCellValue(i, j, cellnumber); @@ -208,13 +208,13 @@ function unmergeCells(startCol, startRow, endCol, endRow) { console.error('表格实例未找到'); return; } - console.log("=====> unmergeCells",JSON.stringify(window.tableInstance.editorManager.editingEditor)) - const cellnumber = window.tableInstance.getCellValue(startCol, startRow,true); + console.log("=====> unmergeCells", JSON.stringify(window.tableInstance.editorManager.editingEditor)) + const cellnumber = window.tableInstance.getCellValue(startCol, startRow, true); for (let i = startCol; i <= endCol; i++) { for (let j = startRow; j <= endRow; j++) { if (i === startCol && j === startRow) { - window.tableInstance.changeCellValue(i, j, cellnumber); - }else{ + window.tableInstance.changeCellValue(i, j, cellnumber); + } else { window.tableInstance.changeCellValue(i, j, ''); } } @@ -226,7 +226,7 @@ function unmergeCells(startCol, startRow, endCol, endRow) { function customRender(startCol, startRow, endCol, endRow, id, style) { const newcolumn = { ...optionTemp.columns[2], - + } // const aa = window.tableInstance.getCustomCellStyle(startCol, startRow) console.log("=====> customRender", JSON.stringify(optionTemp.columns[2])) @@ -256,20 +256,20 @@ function customRender(startCol, startRow, endCol, endRow, id, style) { function customRenderRestore(startCol, startRow, endCol, endRow) { const style = window.tableInstance.theme.style - window.tableInstance.registerCustomCellStyle('none',style) + window.tableInstance.registerCustomCellStyle('none', style) const pos = { - range:{ - start:{ + range: { + start: { col: startCol, row: startRow }, - end:{ + end: { col: endCol, row: endRow } } } - window.tableInstance.arrangeCustomCellStyle(pos,'none') + window.tableInstance.arrangeCustomCellStyle(pos, 'none') } var optionTemp function customIcon() { @@ -302,7 +302,7 @@ function initializeTable(option) { const input_editor = new VTable.editors.InputEditor(); VTable.register.editor('input-editor', input_editor); - console.log("=====> initializeTable",JSON.stringify(option.theme.frozenColumnLine)) + console.log("=====> initializeTable", JSON.stringify(option.theme.frozenColumnLine)) const tableInstance = new VTable.ListTable(document.getElementById('tableContainer'), option); eventList.forEach(eventName => { tableInstance.on(VTable.ListTable.EVENT_TYPE[eventName], (event) => { @@ -345,11 +345,11 @@ function updateColumns(newColumns) { // 设置分割线颜色 function setSplitLineColor(colors) { const currentTheme = window.tableInstance.theme.extends({ - headerStyle:{ - borderColor:colors + headerStyle: { + borderColor: colors }, - bodyStyle:{ - borderColor:colors + bodyStyle: { + borderColor: colors } }); window.tableInstance.updateTheme(currentTheme); @@ -403,36 +403,60 @@ function updateOption(options) { window.tableInstance.updateOption(options); } -function renderWithRecreateCells(){ +function renderWithRecreateCells() { window.tableInstance.renderWithRecreateCells(); window.tableInstance.resize(); } // 缩放 -function zoomIn(){ - console.log("=====> setPixelRatio",JSON.stringify(window.tableInstance.theme.bodyStyle.fontSize)) - const oldHeaderFontSize = window.tableInstance.theme.headerStyle.fontSize<40?window.tableInstance.theme.headerStyle.fontSize:40 - const oldBodyFontSize = window.tableInstance.theme.bodyStyle.fontSize<40?window.tableInstance.theme.bodyStyle.fontSize:40 +function zoomIn() { + // console.log("=====> setPixelRatio",JSON.stringify(window.tableInstance.columns[0].icon.width)) + const oldHeaderFontSize = window.tableInstance.theme.headerStyle.fontSize + const oldBodyFontSize = window.tableInstance.theme.bodyStyle.fontSize const newTheme = window.tableInstance.theme.extends({ - headerStyle:{ - fontSize:oldHeaderFontSize * 1.2, + headerStyle: { + fontSize: oldHeaderFontSize * 1.2 < 32 ? oldHeaderFontSize * 1.2 : 32, }, - bodyStyle:{ - fontSize:oldBodyFontSize * 1.2, + bodyStyle: { + fontSize: oldBodyFontSize * 1.2 < 32 ? oldBodyFontSize * 1.2 : 32, } }) window.tableInstance.updateTheme(newTheme); + + const newColums = window.tableInstance.columns + for (let i = 0; i < window.tableInstance.columns.length; i++) { + if (window.tableInstance.columns[i].icon) { + newColums[i].icon.width = window.tableInstance.columns[i].icon.width * 1.2 < 32 ? window.tableInstance.columns[i].icon.width * 1.2 : 32 + newColums[i].icon.height = window.tableInstance.columns[i].icon.height * 1.2 < 32 ? window.tableInstance.columns[i].icon.height * 1.2 : 32 + console.log("=====> setPixelRatio", JSON.stringify(newColums[i].icon.width)) + } else { + continue + } + } + window.tableInstance.updateColumns(newColums); } -function zoomOut(){ - const oldHeaderFontSize = window.tableInstance.theme.headerStyle.fontSize>10?window.tableInstance.theme.headerStyle.fontSize:10 - const oldBodyFontSize = window.tableInstance.theme.bodyStyle.fontSize>10?window.tableInstance.theme.bodyStyle.fontSize:10 +function zoomOut() { + const oldHeaderFontSize = window.tableInstance.theme.headerStyle.fontSize + const oldBodyFontSize = window.tableInstance.theme.bodyStyle.fontSize const newTheme = window.tableInstance.theme.extends({ - headerStyle:{ - fontSize:oldHeaderFontSize / 1.2, + headerStyle: { + fontSize: oldHeaderFontSize / 1.2 > 12 ? oldHeaderFontSize / 1.2 : 12, }, - bodyStyle:{ - fontSize:oldBodyFontSize / 1.2, + bodyStyle: { + fontSize: oldBodyFontSize / 1.2 > 12 ? oldBodyFontSize / 1.2 : 12, } }) window.tableInstance.updateTheme(newTheme); + + const newColums = window.tableInstance.columns + for (let i = 0; i < window.tableInstance.columns.length; i++) { + if (window.tableInstance.columns[i].icon) { + newColums[i].icon.width = window.tableInstance.columns[i].icon.width / 1.2 > 12 ? window.tableInstance.columns[i].icon.width / 1.2 : 12 + newColums[i].icon.height = window.tableInstance.columns[i].icon.height / 1.2 > 12 ? window.tableInstance.columns[i].icon.height / 1.2 : 12 + console.log("=====> setPixelRatio", JSON.stringify(newColums[i].icon.width)) + } else { + continue + } + } + window.tableInstance.updateColumns(newColums); } \ No newline at end of file