CN111857490A - Vue-based pull-down selection component construction method supporting multi-tree structure - Google Patents
Vue-based pull-down selection component construction method supporting multi-tree structure Download PDFInfo
- Publication number
- CN111857490A CN111857490A CN202010694162.5A CN202010694162A CN111857490A CN 111857490 A CN111857490 A CN 111857490A CN 202010694162 A CN202010694162 A CN 202010694162A CN 111857490 A CN111857490 A CN 111857490A
- Authority
- CN
- China
- Prior art keywords
- node
- tree
- array
- nodes
- virtual
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/901—Indexing; Data structures therefor; Storage structures
- G06F16/9027—Trees
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a construction method of a pull-down selection component supporting a multi-tree structure based on vue, which comprises the following steps: defining a first array in a data layer, wherein the first array is used for storing spanning tree structure data of different object structure trees; configuring spanning tree structure data of each object in the first array to generate structure trees of different objects; generating a unique virtual id for nodes with the same real id in the same structure tree; for nodes with the same real id in the same structure tree, replacing the id of the nodes with the calculated virtual id, and storing the real id of the node in the attribute realid of the node; defining a second array; when a user selects a certain node A in a certain tree structure on a page, finding other nodes with the same real id as A in the structure tree, and recording the virtual id of the node to be selected together with A in a second array according to requirements; and displaying the selected state of the corresponding node in the page according to the virtual id recorded by the second array.
Description
Technical Field
The invention relates to the field of computers, in particular to a construction method of a pull-down selection component supporting a multi-tree structure based on vue.
Background
The existing drop-down menu only supports selection of a single tree structure, one child node is selected under the condition that the same child node exists under different branch nodes, the child nodes under other branch nodes cannot be selected, even some controls directly report errors, and the fact that all elements in the tree structure cannot have the same id is prompted.
In summary, the prior art mainly has the following defects:
1. does not support simultaneous selection of multiple trees;
2. if a plurality of leaf nodes with the same id exist under one tree, after the leaf node is selected at one branch node, the leaf node cannot be selected in other branches at the same time.
Disclosure of Invention
The purpose of the invention is as follows: in order to overcome the defects of the prior art, the invention provides a construction method of a pull-down selection component supporting a multi-tree structure based on vue.
The technical scheme is as follows: the invention provides a construction method of a pull-down selection component supporting a multi-tree structure based on vue, which comprises the following steps:
s1, defining a first array in a data layer, and storing spanning tree structure data of different object structure trees;
s2, configuring the spanning tree structure data of each object in the first array, and generating the structure trees of different objects;
S3, if a plurality of nodes with the same id exist in one structure tree, generating a unique virtual id for the nodes with the same real id in the same structure tree: the virtual id of the branch node is trunk plus the real id of the branch node, and the virtual id of the leaf node is the father node id of the leaf node plus the real id of the leaf node;
s4, replacing the ids of the nodes with the calculated virtual ids for the nodes with the same real id in the same structure tree, and storing the real id of the node in the attribute realid of the node;
s5, defining a second array in the data layer; when a user selects a certain node A in a certain tree structure on a page, finding other nodes with the same real id as A in the structure tree, and recording the virtual id of the node to be selected together with A in a second array according to requirements;
and S6, displaying the selected state of the corresponding node in the page according to the virtual id recorded by the second group.
Further, the method further comprises the steps of: a switch button is generated on the page to switch different structure trees.
Has the advantages that: compared with the prior art, the invention has the following advantages:
1. the invention can support the function of simultaneously selecting a plurality of tree structures in one control, for example, the function of supporting a plurality of tree structure options such as people under a selectable department, roles under the department, and authorities under authority groups in the same selection control is required;
2. If the same leaf node id exists under a plurality of branch nodes, the same child node under other branch nodes can be selected/deselected by a certain leaf node;
3. single selection and multiple selection are supported, and non-leaf node data can be selected through configuration during single selection.
Drawings
Fig. 1 is a flow chart of an embodiment of the present invention.
Detailed Description
The present invention will be further described with reference to the accompanying drawings.
The invention aims to realize the simultaneous selection of a plurality of trees and support the sub-nodes with the same id under different branch nodes, and in view of the above, the invention provides a construction method of a pull-down selection component supporting a multi-tree structure based on vue, the flow of which is shown in fig. 1, and the method comprises the following steps:
s1, defining a first array in a data layer, and storing spanning tree structure data of different object structure trees;
s2, configuring the spanning tree structure data of each object in the first array, and generating the structure trees of different objects;
s3, if a plurality of nodes with the same id exist in one structure tree, generating a unique virtual id for the nodes with the same real id in the same structure tree: the virtual id of the branch node is trunk plus the real id of the branch node, and the virtual id of the leaf node is the father node id of the leaf node plus the real id of the leaf node;
S4, replacing the ids of the nodes with the calculated virtual ids for the nodes with the same real id in the same structure tree, and storing the real id of the node in the attribute realid of the node;
s5, defining a second array in the data layer; when a user selects a certain node A in a certain tree structure on a page, finding other nodes with the same real id as A in the structure tree, and recording the virtual id of the node to be selected together with A in a second array according to requirements;
and S6, displaying the selected state of the corresponding node in the page according to the virtual id recorded by the second group.
Specifically, in step S1, the configuration data of the spanning tree structure is an array, where the array includes a plurality of objects, and each object corresponds to a tree structure, such as a department/personnel tree, a permission group/permission name tree, and a department/role tree; when data configuration is performed on the spanning tree structure, the configured data is stored in the data attribute of the object, for example: for department/personnel tree, authority group/authority name tree, department/role tree, the name attribute of each tree is respectively configured with the parameters: and the person, the role and the authority group are used for switching the button names displayed on the buttons. Each object may behave differently by configuring other optional attributes to make different trees behave differently, with this particular embodiment using a default configuration. The parameters and descriptions of the optional configuration are as follows:
1) onlyLeaf, whether leaf nodes can only be selected (applicable to singleton), default false;
2) in order to avoid the condition that the ids are the same, the ids of the directory and the leaf nodes are changed by default, the ids do not need to be changed, and false can be changed by the configuration and defaulted;
3) whether initleaf Id needs strong association of leaf nodes and branch nodes thereof, default false, if true, the id which needs to be spliced and transmitted into default display also needs to be spliced, the spliced id is the id of the branch node of the leaf node, and the selected value for using the control page is also spliced;
4) when the spicing Id notInitId is false, the default splicing of the id of the leaf node is mainly used for the situation that the leaf node is possibly repeated (invalid for single selection), and if the splicing of the id of the leaf node is not wanted, the spicing Id needs to be manually set to true;
in step S1, global configuration is also required, where the global configuration is defined by an array: value [ [15], [7], [45] ]. All configurable parameters are:
1) whether the isAdd needs to add a button or not and hides an input frame;
2) whether the user if uses tree false which needs to be rendered but is not displayed is yes;
3) the placeholder is a space-time place-occupying character;
4) data of a data spanning tree structure;
5) If disabled, default false;
6) whether singleSelect is selected, default false;
7) whether only leaf nodes can be selected by the only mail leaf or not is only effective for single selection;
8) defaultCheckedList, Array/Number, id Array of all default selected items, such as:
[ [1,2,3] ], the array subscript represents the subscript of tree data, and the inside is an id array;
9) the value defaults to a selected value and can be changed dynamically, and the parameter format is the same as defaultCheckerdlist;
10) whether clear shows a clear button or not, and a true is defaulted;
11) whether isneedledsetrealid has itself manually set the realId, does not require the code to splice itself.
In step S3, the method for generating unique virtual ids for nodes in different structure trees is: the id of the directory node and the leaf node are spliced by the original id of the branch node, the minus sign (-) and the original id of the current node. Namely: the virtual id of the branch node is trunk plus the real id of the branch node, and the virtual id of the leaf node is the father node id of the leaf node plus the real id of the leaf node.
In step S5, it is determined which nodes are selected with the logic: and configuring a two-dimensional array (a second array), wherein the array is provided with a plurality of sub-arrays, the sub-arrays belong to each tree structure, and elements in a certain sub-array represent that corresponding ids of leaf nodes of the corresponding tree structure are selected.
In the scheme, the switching buttons of different structure trees are generated on the page based on the bidirectional binding function through configuration of the structure properties, selection information generated by the tree structure corresponding to the corresponding button is displayed when the switching button is clicked for selection of a user, and the selected state of the node in each tree structure is recorded through the second array, so that the different trees cannot be selected or deselected before switching.
Through the mode, under the same number structure, a user selects/deselects leaf nodes under a certain branch node, whether leaf nodes with the same realId exist under other branch nodes or not is calculated, and if the leaf nodes exist, the nodes are automatically selected/deselected by a code. For example, a leaf node existing in other branch nodes is selected, at this time, the same node as the leaf node under all branch nodes is selected, and then one of the nodes is deselected, so that all the nodes selected immediately before are deselected.
To achieve the above function, we need to do the following operations based on vue:
monitoring data:
1. generating a tree structure value;
2. defaulting the selected value;
3. bidirectionally binding the selected value;
logic when spanning tree structure value changes:
1. Re-initialize the data of each tree structure according to configuration (mainly change id and attach original id to realId);
2. assigning a selected value to each tree (the spliced id array needs to be obtained according to the real id array, and at this time, the tree structure does not have a certain id but the bound value has the id of the id);
3. acquiring and storing all selected data arrays;
4. analyzing the selected data array, and displaying the name to be displayed (simultaneously, removing the duplication);
5. and analyzing the selected real id, caching the selected value, sending the cached value to a page using the control, and triggering a control change event.
Logic when default selected value changes:
1. copying the value deep into a field;
2. assigning a selected value to each tree (the spliced id array needs to be obtained according to the real id array, and at this time, the tree structure does not have a certain id but the bound value has the id of the id);
3. acquiring and storing all selected data arrays;
4. analyzing the selected data array, and displaying the name to be displayed (simultaneously, removing the duplication);
5. and analyzing the selected real id, caching the selected value, sending the cached value to a page using the control, and triggering a control change event.
Logic when the value selected by the bidirectional binding changes:
1. converting the new value and the old value into character strings and judging whether the character strings are the same, if so, returning, and not carrying out the following steps;
2. judging whether the new value is set to be null or not, if so, nulling all the options, and not performing the following steps;
3. deep copying the new value to a field;
4. assigning a selected value to each tree (the spliced id array needs to be obtained according to the real id array, and at this time, the tree structure does not have a certain id but the bound value has the id of the id);
5. acquiring and storing all selected data arrays;
6. analyzing the selected data array, and displaying the name to be displayed (simultaneously, removing the duplication);
7. and analyzing the selected real id, caching the selected value, sending the cached value to a page using the control, and triggering a control change event.
When the selection of a certain leaf node is changed during multi-selection:
1. all leaf nodes with the same real id of the node in the corresponding tree structure are analyzed
2. Selecting/deselecting the node analyzed in step 1 according to the selected/deselected state of the node
3. And assigning all the analyzed selected node id arrays to a checkedList field of the object where the corresponding tree is located, and storing the current selected information.
Tree node click event on single selection (multiple selection or forbidden no processing):
1. assigning values to corresponding positions (distinguishing between singular and majority, where singular values are strings or numbers and majority values are arrays);
2. deeply copying and storing the value;
3. sending a value to a page using the control and triggering a control change event;
4. displaying a display field corresponding to the newly selected id and closing the pop-up window;
5. the selected state on the other tree structure is cleared.
When the cancel button click event is triggered:
1. closing the pop-up window;
2. if the single selection is carried out, the following steps are not carried out;
3. and the loop is used for generating tree structure values and analyzing the id of the cached selected data to assign the id to a corresponding field so that the selected data cannot be selected again when being opened next time without point determination.
Determining that a button click event triggers:
1. acquiring and storing all selected data arrays;
2. analyzing the selected data array, and displaying the name to be displayed (simultaneously, removing the duplication);
3. analyzing the selected real id, caching the selected value and sending the cached value to a page using the control, and triggering a control change event;
4. And closing the pop-up window.
Clicking a delete icon of a selected value in all the displayed selected value boxes during multi-selection triggers an event:
1. if the corresponding data has a realId field, searching data with the same realId from all the stored selected data, and then deleting the selected id stored in the corresponding object according to the id of the data;
2. if the corresponding data does not have the realId, the data of the id corresponding to the realId is only one, and the data is directly deleted;
3. acquiring and storing all selected data arrays;
4. analyzing the selected data array, and displaying the name to be displayed (simultaneously, removing the duplication);
5. calculating the position and size of popup window pop-up according to the size of the screen, the maximum size of the popup window and the size of the position of the display area;
6. and analyzing the selected real id, caching the selected value, sending the cached value to a page using the control, and triggering a control change event.
Clear icon click event:
1. clearing the cached selected value;
2. clearing the displayed selected data;
3. sending the emptied value to a page using the control, and triggering a control change event;
4. clearing the selected value in the popup box;
5. And closing the pop-up window.
Clicking the selection area of the display option can pop up the selection box:
1. if the program is forbidden, returning directly, and not performing the following steps;
2. if the current pop-up is carried out, the flow of canceling the button click event is directly taken;
3. if the pop-up is performed, the pop-up is performed directly, and the position and the size of the pop-up window are calculated according to the screen size, the maximum size of the pop-up window and the position size of the display area.
The above description is only of the preferred embodiments of the present invention, and it should be noted that: it will be apparent to those skilled in the art that various modifications and adaptations can be made without departing from the principles of the invention and these are intended to be within the scope of the invention.
Claims (2)
1. A construction method of a pull-down selection component supporting a multi-tree structure based on vue is characterized by comprising the following steps:
s1, defining a first array in a data layer, and storing spanning tree structure data of different object structure trees;
s2, configuring the spanning tree structure data of each object in the first array, and generating the structure trees of different objects;
s3, if a plurality of nodes with the same id exist in one structure tree, generating a unique virtual id for the nodes with the same real id in the same structure tree: the virtual id of the branch node is trunk plus the real id of the branch node, and the virtual id of the leaf node is the father node id of the leaf node plus the real id of the leaf node;
S4, replacing the ids of the nodes with the calculated virtual ids for the nodes with the same real id in the same structure tree, and storing the real id of the node in the attribute realid of the node;
s5, defining a second array in the data layer; when a user selects a certain node A in a certain tree structure on a page, finding other nodes with the same real id as A in the structure tree, and recording the virtual id of the node to be selected together with A in a second array according to requirements;
and S6, displaying the selected state of the corresponding node in the page according to the virtual id recorded by the second group.
2. The method for constructing a pull-down selection component supporting multi-tree structure based on vue as claimed in claim 1, further comprising the steps of:
a switch button is generated on the page to switch different structure trees.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010694162.5A CN111857490A (en) | 2020-07-17 | 2020-07-17 | Vue-based pull-down selection component construction method supporting multi-tree structure |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010694162.5A CN111857490A (en) | 2020-07-17 | 2020-07-17 | Vue-based pull-down selection component construction method supporting multi-tree structure |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111857490A true CN111857490A (en) | 2020-10-30 |
Family
ID=73001309
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010694162.5A Pending CN111857490A (en) | 2020-07-17 | 2020-07-17 | Vue-based pull-down selection component construction method supporting multi-tree structure |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111857490A (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102402602A (en) * | 2011-11-18 | 2012-04-04 | 航天科工深圳（集团）有限公司 | B + tree indexing method and device for real-time database |
| CN102520919A (en) * | 2011-11-02 | 2012-06-27 | 南京航天银山电气有限公司 | Inquiry method and device of control node |
| CN106021560A (en) * | 2016-05-30 | 2016-10-12 | 浙江工业大学 | Data stream-oriented low-delay memory B + tree index construction method |
| CN108228188A (en) * | 2018-01-08 | 2018-06-29 | 武汉斗鱼网络科技有限公司 | A kind of view component processing method, electronic equipment and readable storage medium storing program for executing |
| CN110515683A (en) * | 2019-07-15 | 2019-11-29 | 平安普惠企业管理有限公司 | A kind of method, apparatus and storage medium of front end Vue page visual configuration |
| CN110825382A (en) * | 2019-10-14 | 2020-02-21 | 紫光云(南京)数字技术有限公司 | Front-end big data tree structure display method |
| CN111324258A (en) * | 2020-02-04 | 2020-06-23 | 北京字节跳动网络技术有限公司 | Method, device, equipment and medium for generating contents of configuration items of multilevel pull-down menu |
| US20200201905A1 (en) * | 2018-12-20 | 2020-06-25 | International Business Machines Corporation | Methods of automatically and self-consistently correcting genome databases |
-
2020
- 2020-07-17 CN CN202010694162.5A patent/CN111857490A/en active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102520919A (en) * | 2011-11-02 | 2012-06-27 | 南京航天银山电气有限公司 | Inquiry method and device of control node |
| CN102402602A (en) * | 2011-11-18 | 2012-04-04 | 航天科工深圳（集团）有限公司 | B + tree indexing method and device for real-time database |
| CN106021560A (en) * | 2016-05-30 | 2016-10-12 | 浙江工业大学 | Data stream-oriented low-delay memory B + tree index construction method |
| CN108228188A (en) * | 2018-01-08 | 2018-06-29 | 武汉斗鱼网络科技有限公司 | A kind of view component processing method, electronic equipment and readable storage medium storing program for executing |
| US20200201905A1 (en) * | 2018-12-20 | 2020-06-25 | International Business Machines Corporation | Methods of automatically and self-consistently correcting genome databases |
| CN110515683A (en) * | 2019-07-15 | 2019-11-29 | 平安普惠企业管理有限公司 | A kind of method, apparatus and storage medium of front end Vue page visual configuration |
| CN110825382A (en) * | 2019-10-14 | 2020-02-21 | 紫光云(南京)数字技术有限公司 | Front-end big data tree structure display method |
| CN111324258A (en) * | 2020-02-04 | 2020-06-23 | 北京字节跳动网络技术有限公司 | Method, device, equipment and medium for generating contents of configuration items of multilevel pull-down menu |
Non-Patent Citations (2)
| Title |
|---|
| SEGMENTFAULT 思否: "element-ui 树控件中存在id和name相同的子节点,怎么实现一个选中其他页选中", 《HTTPS://SEGMENTFAULT.COM/Q/1010000018354412》 * |
| SHUAIFLYING: "vue-Treeselect实现组织机构（员工）下拉树的功能", 《HTTPS://WWW.CNBLOGS.COM/SHUAIFING/P/9958129.HTML》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8060832B2 (en) | Managing information display | |
| US7487452B2 (en) | Method and system for making resources available | |
| CN103810233B (en) | Content management | |
| US9436347B2 (en) | Methods and systems for entering object assignments | |
| US6437812B1 (en) | Graphical user interface and method for displaying hierarchically structured information | |
| US20110055768A1 (en) | Method and system for providing graphical user interface with contextual view | |
| US7653610B2 (en) | System for facilitating problem resolution | |
| CN107844297A (en) | A kind of data visualization realizes system and method | |
| US20140223301A1 (en) | Security system and method with help and login for customization | |
| EP3142005B1 (en) | Method for creating context-aware application and user terminal | |
| CN103810232B (en) | Content management | |
| US7849412B2 (en) | System and method for generating a web control in a Windows development environment | |
| CN113110900A (en) | Function determination method, interface configuration method, interface display method, interface configuration device, interface display device, and storage medium | |
| EP1065618A2 (en) | Workflow system with business process definition | |
| US20080133502A1 (en) | System and method for utilizing multiple values of a search criteria | |
| CN111857490A (en) | Vue-based pull-down selection component construction method supporting multi-tree structure | |
| US7937430B1 (en) | System and method for collecting and transmitting data in a computer network | |
| JPH06502751A (en) | Systems and processes for specifying personalized telecommunications services | |
| TWI428772B (en) | Management system of technical literature data and the method thereof | |
| CN109040166A (en) | Information display device and information display system | |
| US20060294097A1 (en) | System, method and computer program product for locating a subset of computers on a network | |
| JP2005250788A (en) | System configuration change monitoring method, system and program | |
| US20030204567A1 (en) | System and method for creating e-mail object attributes | |
| KR20210085746A (en) | User Customized Contents Surating System Based on List-type Timeline | |
| US8176047B2 (en) | Methods and systems for locating information in a computer system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20201030 |