feat(grid): [grid] expose getTreeExpandeds function #2996
Conversation
WalkthroughThis pull request introduces a new API method Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant G as Grid Component
participant M as TinyModal
U->>G: Toggle tree node expansion
G->>G: Call getTreeExpandeds()
G->>M: Display count of expanded rows
M-->>U: Show updated modal message
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/grid/webdoc/grid-tree-table.jsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
WalkthroughThis pull request introduces a new feature to the grid component by exposing the Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand-composition-api.vue
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand.spec.js (1)
7-8: Consider adding more test cases for more complex tree structures.The current test verifies a single expansion scenario. For more thorough testing, consider adding test cases that:
- Expand multiple nodes
- Collapse nodes
- Test nested tree structures with multiple levels
examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand.vue (3)
7-7: Consider improving the method naming.The event handler name
handTreeExpandshould behandleTreeExpandto follow common naming conventions in JavaScript/Vue.- @toggle-tree-change="handTreeExpand" + @toggle-tree-change="handleTreeExpand"
148-155: Good implementation of the getTreeExpandeds function.This handler demonstrates the newly exposed
getTreeExpandeds()function, which is the primary purpose of this PR. The function retrieves an array of expanded rows and displays their count using a modal.Two suggestions for improvement:
- Consider adding error handling in case the grid reference is not available.
- Method naming should match the event handler binding in the template.
- handTreeExpand() { + handleTreeExpand() { let treeExpandeds = this.$refs.treeGrid.getTreeExpandeds() TinyModal.message({ message: `展开行数：${treeExpandeds.length}`, status: 'info' }) }
1-158: Consider adding i18n for UI strings.The demo currently uses Chinese text for column titles and the modal message. For international users, consider adding support for internationalization or providing English translations in comments.
Also, adding some comments at the top of the file explaining the purpose of this demo (showcasing the getTreeExpandeds function) would improve documentation.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
examples/sites/demos/apis/grid.js(1 hunks)examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand-composition-api.vue(1 hunks)examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand.spec.js(1 hunks)examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand.vue(1 hunks)examples/sites/demos/pc/app/grid/webdoc/grid-tree-table.js(1 hunks)packages/vue/src/grid/src/tree/src/methods.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (12)
packages/vue/src/grid/src/tree/src/methods.ts (1)
125-127: New API method to retrieve expanded tree nodes added successfully.This implementation looks good as it provides a simple accessor method to retrieve all expanded tree nodes from the current grid state. This aligns with the PR objective to expose this functionality to users.
examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand.spec.js (1)
1-9: Test for tree expansion functionality looks good.The test effectively validates that:
- The tree node can be expanded by clicking the expansion icon
- The correct number of expanded rows is displayed after expansion
This provides good coverage for the new
getTreeExpandedsfunctionality.examples/sites/demos/pc/app/grid/webdoc/grid-tree-table.js (1)
99-109: Demo entry for the new functionality added correctly.The demo entry is properly structured with appropriate ID, name, and description in both Chinese and English.
examples/sites/demos/apis/grid.js (1)
1695-1708: **Well-structured API addition for retrieving expanded tree data. **The new
getTreeExpandedsmethod is properly documented with correct type signature, stability version, descriptions in both Chinese and English, and appropriate mode support. This is a useful addition that allows users to programmatically access the expanded rows in a tree grid, which is essential for scenarios where you need to track or manipulate the expanded state.examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand-composition-api.vue (4)
1-15: **Well-structured grid component implementation. **The template is cleanly organized with appropriate props. The tree structure is correctly configured with the
tree-configproperty and thetree-nodeattribute on the index column, which follows best practices for TinyVue grid tree tables.
17-20: **Proper imports with appropriate component granularity. **The imports are correctly structured, importing only the necessary components from the
@opentiny/vuepackage. Using the composition API setup script is a modern approach that aligns with Vue 3 best practices.
21-138: **Well-structured hierarchical data for tree grid demonstration. **The data structure correctly models a hierarchical organization with companies and their subsidiaries, using the
childrenproperty for nesting. Using areffor the table data allows for reactivity if needed.
139-148: **Good demonstration of the newgetTreeExpandedsAPI. **This event handler effectively showcases the usage of the new
getTreeExpandedsmethod. The feedback via a modal message provides clear visual confirmation of the method's functionality. This makes the example both practical and instructional.One suggestion for enhancement would be to add basic error handling around the method call, though it's reasonable to omit it in a demo context.
examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand.vue (4)
1-15: Well-structured template implementing tree grid functionality.The template effectively sets up a TinyGrid component with tree functionality. The reference (
ref="treeGrid") is properly defined to access the grid instance in methods, and the tree-config is correctly configured to use the "children" property for hierarchical data. The tree-node attribute is appropriately applied to the index column.
18-18: Import statement looks good.Proper imports from the @opentiny/vue package for the required components.
25-145: Well-structured hierarchical test data.The test data effectively demonstrates a complex tree structure with multiple levels of nesting, which is ideal for showcasing the tree expansion functionality. The structure with id/pid relationships and nested children arrays provides a realistic demonstration case.
149-149: Effectively demonstrates the new getTreeExpandeds API.The line properly showcases the new API being exposed by this PR, allowing retrieval of all expanded records in the tree grid. This implementation aligns perfectly with the PR objective to expose this functionality.
2 participants
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #1601
What is the new behavior?
support using
getTreeExpandedsto get all expanded records.Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Tests