Implementation method for total selection of all nodes of casader cascade selector

Abstract

The invention provides an implementation method for total selection of all nodes of a casader cascade selector. The implementation method comprises the following steps: acquiring a currently selected data node; judging whether the current node clicks full selection or not according to the data node, executing a preset selection strategy based on a judgment result, and modifying full selection, non-selection and semi-selection states according to the selection strategy; wherein the selection strategy comprises the following steps: in response to currently clicked full selection, judging whether the current node is checked as a full selection node, and modifying the full selection state and the non-selection state according to a judgment result; directly carrying out assignment operation in response to the situation that all selection is not clicked currently, and modifying all selection and half selection states according to whether all nodes are selected or not; and executing corresponding selection operation according to the modification state. According to the method and the device, in the casader cascade selector component, the full-selection state, the non-selection state and the half-selection state are obtained according to the currently selected data, so that the user experience effect is better.

Description

Technical Field

[0001] The present application belongs to the field of Internet front-end technology, and in particular to a method for implementing full selection of all nodes of a cascader selector. Background Art

[0002] In Vue.js, the cascading selector is a UI component for handling hierarchical data selection, allowing users to select related options through a series of drop-down menus. This selector is usually used in scenarios such as address selection and category selection, where the options have a clear hierarchical relationship.

[0003] In existing Cascader selector implementations, there is usually a lack of direct select-all functionality, which requires users to manually select all child nodes one by one, which is inefficient and cumbersome when there are a large number of nodes. Summary of the invention

[0004] In view of this, the present application aims to propose an implementation method for selecting all nodes of a cascader selector, so as to solve the problem that users need to manually select all child nodes one by one, which is inefficient and cumbersome to operate when there are a large number of nodes.

[0005] To achieve the above purpose, the technical solution of this application is implemented as follows:

[0006] In a first aspect, the present application provides a method for implementing the full selection of all nodes of a cascader selector, including:

[0007] Get the currently selected data node;

[0008] According to the data node, judging whether the current node has been clicked to select all, executing a preset selection strategy based on the judgment result, and modifying the state of all selection, no selection, and half selection according to the selection strategy; wherein the selection strategy includes judging whether the current node is checked as a fully selected node in response to the current click to select all, and modifying the state of all selection and no selection according to the judgment result; in response to the current not clicking to select all, directly performing an assignment operation, and modifying the state of all selection and half selection according to whether all nodes are selected;

[0009] Perform the appropriate selection operation based on the modification status.

[0010] In the second aspect, based on the same inventive concept, the present application also provides a device for implementing full selection of all nodes of a cascader selector, including:

[0011] An acquisition module, configured to acquire a currently selected data node;

[0012] The selection module is configured to determine whether the current node has been clicked to select all according to the data node, execute a preset selection strategy based on the determination result, and modify the state of all selection, no selection, and half selection according to the selection strategy; wherein the selection strategy includes, in response to the current click to select all, determining whether the current node is checked as a fully selected node, and modifying the state of all selection and no selection according to the determination result; in response to the current not clicking to select all, directly performing an assignment operation, and modifying the state of all selection and half selection according to whether all nodes are selected;

[0013] Execution module, performs corresponding selection operations according to the modification status.

[0014] In a third aspect, based on the same inventive concept, the present application also provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in the first aspect is implemented.

[0015] In a fourth aspect, based on the same inventive concept, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in the first aspect.

[0016] Compared with the prior art, the implementation method for selecting all nodes of the cascader selector described in this application has the following beneficial effects:

[0017] The implementation method for selecting all nodes of the cascader cascade selector described in the present application adopts a cascader cascade selector component that implements the "select all", "unselect" and "half-select" operations. Regardless of whether it is a single-layer data structure or a multi-layer data structure, if you click on "select all", all child nodes will be selected; if any node is cancelled in the "select all" state, the node and all nodes will be removed; if you click on "select all" again in the "select all" state, the "unselect all" operation will be completed; and in the cascader cascade selector component, the "select all", "unselect" and "half-select" states are also given according to the currently selected data, so that the user experience is better. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] The drawings constituting a part of the present application are used to provide a further understanding of the present application. The illustrative embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0019] Figure 1 A flow chart of a method for selecting all nodes of a cascader selector according to an embodiment of the present application;

[0020] Figure 2A flowchart of a method for implementing cascader cascading to select all nodes in the front end according to an embodiment of the present application;

[0021] Figure 3 It is a basic data diagram of the multi-layer data structure described in the embodiment of the present application;

[0022] Figure 4 This is a schematic diagram of the structure of a device for implementing the full selection of all nodes of a cascader selector according to an embodiment of the present application;

[0023] Figure 5 This is a schematic diagram of the hardware structure of the electronic device described in the embodiment of the present application. DETAILED DESCRIPTION

[0024] In order to make the objectives, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in combination with specific embodiments and with reference to the accompanying drawings.

[0025] It should be noted that, unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present application should be the usual meanings understood by people with ordinary skills in the field to which the present application belongs. The "first", "second" and similar words used in the embodiments of the present application do not represent any order, quantity or importance, but are only used to distinguish different components. "Including" or "comprising" and similar words mean that the elements or objects appearing in front of the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0026] The embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0027] See also Figure 1 and Figure 2 As shown, this embodiment provides a method for implementing the selection of all nodes of a cascader selector.

[0028] There are two types of data structures, one is a single-layer data structure and the other is a multi-layer data structure. When it is a single-layer data structure, the full selection is achieved by changing the bound data source and adding all nodes; when it is a multi-layer data structure, such as Figure 3 As shown, if the "1211" node and the "122" node are obtained, the values ​​that should be saved are [[1, 12, 121, 1211], [1, 12, 122]].

[0029] To achieve the above purpose, this embodiment takes the Vue project as an example and proposes a method for selecting all nodes of the cascader selector, which specifically includes the following steps:

[0030] Step S101: Get the currently selected data node.

[0031] Specifically, in this embodiment, in order to obtain the currently selected data node, this embodiment performs the following operations:

[0032] Import and pull element-UI globally in the Vue project, create a cascader global component, introduce it in the parent component, and pass in variables through prop communication; in this step, create a cascader global component, pass in variables through component communication, so that it can be called globally.

[0033] When the cascader component is checked, the currently selected data node current is obtained; in this step, when the component is checked, the currently selected data node is obtained by comparing the currently selected node data set with the previously selected node data set.

[0034] Step S102, judging whether the current node has been clicked on to select all according to the data node, executing a preset selection strategy based on the judgment result, and modifying the fully selected, unselected, and half-selected states according to the selection strategy; wherein the selection strategy includes judging whether the current node is checked as a fully selected node in response to the current click on select all, and modifying the fully selected and unselected states according to the judgment result; in response to not clicking on select all at present, directly performing an assignment operation, and modifying the fully selected and half-selected states according to whether all nodes are selected.

[0035] Specifically, in this embodiment, it is determined whether the current selection is clicked. After the selection is clicked, it is determined whether the selection is checked. If "select all" is checked, all nodes are obtained through a recursive algorithm and all are assigned values. If all selections are canceled, the value is directly assigned to null. It should be noted that the recursive algorithm has a clear code structure and strong readability in obtaining all data nodes and the currently selected data nodes, regardless of whether it is a multi-layer data structure or a single-layer data structure.

[0036] If "Select All" is not clicked, assign values ​​directly first, and then determine whether all nodes are selected. If all nodes are selected, assign values ​​to the "Select All" node. If all nodes are not selected, determine whether the previous "Select All" node is checked. If it is checked, remove the "Select All" node.

[0037] Furthermore, based on whether the "Select All" node is clicked, a value is assigned directly first, and then it is determined whether all nodes are selected. If all nodes are selected, it is necessary to assign a value to the Select All node. If not all nodes are selected, it is necessary to first determine whether the "Select All" node was previously checked. If it is checked, the "Select All" node is removed.

[0038] Furthermore, if Select All is clicked, the function of selecting all child nodes is performed; if any node is cancelled in the Select All state, the node and all nodes are removed; if Select All is clicked again in the Select All state, the operation of unselecting all is completed.

[0039] It should be noted that the assignment operation described in this embodiment uses a deep copy assignment method, which is used to solve the problem that when an object is assigned to another variable, only the object address is copied, and no new stack is opened. That is, the result of the assignment is that two objects point to the same address. If the properties of one object are modified, the properties of the other object will also change.

[0040] Step S103: Execute corresponding selection operation according to the modification status.

[0041] The implementation method for selecting all nodes of the cascader cascade selector described in this embodiment adopts a cascader cascade selector component that implements the "select all", "unselect", and "half-select" operations. Whether it is a single-layer data structure or a multi-layer data structure, if you click on "select all", all child nodes will be selected; if any node is cancelled in the "select all" state, the node and all nodes will be removed; if you click on "select all" again in the "select all" state, the "unselect all" operation will be completed. In addition, in the cascader cascade selector component, the "select all", "unselect", and "half-select" states are also given according to the currently selected data, so that the user experience is better.

[0042] Combination Figure 1 The method shown, combined with Figure 1 As shown, the following implementation method is given, which specifically includes:

[0043] 1). Create the selectHandle method to indicate the trigger of selecting the cascader component. The node array variable is passed in, which is the data set selected this time. Because there is no method to obtain the currently selected option in the element document, the currently selected data is obtained by comparing the last selected data with the local data, and represented by the current field. Set preSelected in the data attribute in the vue instance to store the result of the last selection.

[0044] 2). First, compare the data lengths of the last selected data preSelected and the data node selected this time. When the data selected this time is larger than the last selected data, it means that an option has been added. By filtering the data set node selected this time and comparing it with the data set preSelected selected last time, the currently selected data is obtained and assigned to current. Otherwise, the selected data is cancelled. It is worth noting that for more complex data objects, the JSON.stringify method is used to convert the traversed objects into JSON strings to determine whether the converted strings of the two objects are the same, making it more convenient and simple.

[0045] 3). The currently selected data current is obtained, and whether the "Select All" node is currently checked is determined by whether it contains special attributes. If "Select All" is not checked this time, the data node selected this time is directly assigned to the data bound to the control. If "Select All" is checked this time, the next step will be performed.

[0046] 4). According to the data node selected this time, we know whether it contains the "Select All" identification object. We can use the "Select All" identification object to determine whether to "Select All" or cancel "Select All". When canceling "Select All", the data bound to the space will be assigned to an empty array. If it is "Select All", all data will be selected recursively.

[0047] 5). In order to facilitate the description of recursively selecting all data, this embodiment defines the loopSelectData method to represent it, and passes in two parameters, list and parentNode. Wherein, list refers to all selectable nodes or their child node list data, parentNode represents the parent node set, and the pNode variable is defined in the "list" traversal, which is to make a deep copy of the parentNode parent node set and assign it to pNode. It is worth noting here that it must be a deep copy, otherwise the reference type will be assigned to the address (pointer), causing parentNode to be updated at the same time when pNode is updated. The deep copy method used here is the Object.assign() method, which determines whether each child object in the list contains the children subset. If it contains the children subset, pNode adds the current node, and calls the loopSelectData method again, and passes in the current element and pNode parent node set. If the list child object does not contain the children subset, according to whether the length of the parentNode parent node set is greater than 0, the data is merged and assigned to the data bound to the control.

[0048] 6). Finally, when checking or unchecking options other than "Select All", the logical processing for selecting all is to check "Select All" when all nodes are selected, and to uncheck "Select All" when any node is unchecked.

[0049] The overall idea is: first get the parent and child nodes for tiling, that is, get the number of parent and child selectivities. Similar to the loopSelectData method, through recursive methods, get all the parent and child nodes that are finally tiled, defined as originData. A deep copy is also required to prevent the data from being updated when referenced. At this time, compare the length of the tiled originData all-selected node and the currently selected node node. When not all selected, if the data in the vue instance contains the "all selected" identification object, filter out the "all selected". Otherwise, add the "all selected" identification object to the data in the vue instance, and finally assign the selected data to the last selected data set preSelected again. It is worth noting that when assigning objects, a deep copy is also required to avoid the problem of two objects being modified at the same time.

[0050] 7). When the basic functions are completed, it is also worth noting the states of "select all", "unselect" and "half-select". First, get the "select all" element through DOM, and then compare the currently selected data with all the data when all are selected to determine whether it is "select all", "unselect" or "half-select". Finally, assign the corresponding CSS state style to the "select all" element.

[0051] It should be noted that the above describes some embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the above embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0052] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, an embodiment of the present application further provides an implementation device for selecting all nodes of a cascader selector.

[0053] like Figure 4 As shown, the implementation device for selecting all nodes of the cascader selector includes:

[0054] The acquisition module 11 is configured to acquire the currently selected data node;

[0055] The selection module 12 is configured to determine whether the current node has been clicked to select all according to the data node, execute a preset selection strategy based on the determination result, and modify the state of all selection, no selection, and half selection according to the selection strategy; wherein the selection strategy includes, in response to the current click to select all, determining whether the current node is checked as a fully selected node, and modifying the state of all selection and no selection according to the determination result; in response to the current not clicking to select all, directly performing an assignment operation, and modifying the state of all selection and half selection according to whether all nodes are selected;

[0056] The execution module 13 executes the corresponding selection operation according to the modification state.

[0057] For the convenience of description, the above devices are described in terms of functions and are divided into various modules. Of course, when implementing the embodiments of the present application, the functions of each module can be implemented in the same or multiple software and / or hardware.

[0058] The device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.

[0059] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, an embodiment of the present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in any of the above embodiments is implemented.

[0060] Figure 5 A more specific schematic diagram of the hardware structure of an electronic device provided in this embodiment is shown, and the device may include: a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040 are connected to each other through the bus 1050 in the device.

[0061] The processor 1010 can be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.

[0062] The memory 1020 may be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1020 may store an operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program codes are stored in the memory 1020 and are called and executed by the processor 1010.

[0063] The input / output interface 1030 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.

[0064] The communication interface 1040 is used to connect a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (such as USB, network cable, etc.) or a wireless mode (such as mobile network, WIFI, Bluetooth, etc.).

[0065] The bus 1050 includes a path that transmits information between the various components of the device (eg, the processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040).

[0066] It should be noted that, although the above device only shows the processor 1010, the memory 1020, the input / output interface 1030, the communication interface 1040 and the bus 1050, in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include the components necessary for implementing the embodiments of the present specification, and does not necessarily include all the components shown in the figure.

[0067] The electronic device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.

[0068] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in any of the above embodiments.

[0069] The computer-readable medium of this embodiment includes permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.

[0070] The computer instructions stored in the storage medium of the above embodiments are used to enable the computer to execute the method described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0071] Those skilled in the art should understand that the discussion of any of the above embodiments is merely illustrative and is not intended to imply that the scope of the present application (including the claims) is limited to these examples. In line with the concept of the present application, the technical features in the above embodiments or different embodiments may be combined, the steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present application as described above, which are not provided in detail for the sake of simplicity.

[0072] In addition, to simplify the description and discussion, and in order not to make the embodiments of the present application difficult to understand, the known power supply / ground connection with the integrated circuit (IC) chip and other components may or may not be shown in the provided drawings. In addition, the device can be shown in the form of a block diagram to avoid making the embodiments of the present application difficult to understand, and this also takes into account the fact that the details of the implementation of these block diagram devices are highly dependent on the platform to be implemented in the embodiments of the present application (that is, these details should be fully within the scope of understanding of those skilled in the art). In the case of elaborating specific details (e.g., circuits) to describe exemplary embodiments of the present application, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details or when these specific details are changed. Therefore, these descriptions should be considered to be illustrative rather than restrictive.

[0073] Although the present application has been described in conjunction with specific embodiments of the present application, many replacements, modifications and variations of these embodiments will be apparent to those skilled in the art from the foregoing description. For example, other memory architectures (e.g., dynamic RAM (DRAM)) may use the embodiments discussed.

[0074] The embodiments of the present application are intended to cover all such substitutions, modifications and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present application should be included in the scope of protection of the present application.

Claims

1. A method for selecting all nodes of a cascader selector, characterized in that: include: Get the currently selected data node; According to the data node, judging whether the current node has been clicked to select all, executing a preset selection strategy based on the judgment result, and modifying the state of all selection, no selection, and half selection according to the selection strategy; wherein the selection strategy includes judging whether the current node is checked as a fully selected node in response to the current click to select all, and modifying the state of all selection and no selection according to the judgment result; in response to the current not clicking to select all, directly performing an assignment operation, and modifying the state of all selection and half selection according to whether all nodes are selected; Perform the appropriate selection operation based on the modification status.

2. The method according to claim 1, characterized in that Before obtaining the currently selected data node, the method further includes: Import and pull element-UI globally in the Vue project; Create and reference the cascader global component, and pass the node array variable to the cascader global component through prop communication.

3. The method according to claim 1, characterized in that In response to the current click on Select All, determining whether the current node is checked as a Select All node, and modifying the Select All and Unselect All states according to the determination result, includes: In response to the current click of Select All, it is determined whether the current node is checked as a Select All node. In response to checking as a Select All node, all nodes are obtained according to a recursive algorithm, and assignment operations are performed on all nodes, thereby modifying the state to the Select All state.

4. The method according to claim 3, characterized in that Also includes: In response to canceling all selections, the value is directly assigned to empty, and then modified to the unselected state.

5. The method according to claim 3, characterized in that: It is determined whether the currently selected data node contains a select all identification object according to the currently selected data node, and whether the select all is currently checked according to the select all identification object.

6. The method according to claim 1, characterized in that In response to the current failure to click on the "Select All" button, the assignment operation is directly performed, and the "Select All" and "Select Half" states are modified according to whether all nodes are selected, including: In response to the current state that the "Select All" is not clicked, the assignment operation is directly performed, and it is determined whether all nodes are selected. In response to the state that all nodes are selected, the assignment of the selected nodes is added, and then the state is changed to the selected state; In response to all nodes being unselected, the assignment of all selected nodes is cancelled, thereby modifying the unselected state.

7. A device for implementing the full selection of all nodes of a cascader selector, characterized in that: include: An acquisition module, configured to acquire a currently selected data node; The selection module is configured to determine whether the current node has been clicked to select all according to the data node, execute a preset selection strategy based on the determination result, and modify the state of all selection, no selection, and half selection according to the selection strategy; wherein the selection strategy includes, in response to the current click to select all, determining whether the current node is checked as a fully selected node, and modifying the state of all selection and no selection according to the determination result; in response to the current not clicking to select all, directly performing an assignment operation, and modifying the state of all selection and half selection according to whether all nodes are selected; Execution module, performs corresponding selection operations according to the modification status.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to any one of claims 1 to 6 is implemented.

9. A non-transitory computer-readable storage medium, characterized in that: in, The non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to cause a computer to execute the method according to any one of claims 1 to 6.

Images