Experience in application ivx multi-level drop-down menu interaction effect

There is often such a scenario, some of the information we need to choose the actual cases, as well as a clear hierarchical relationship between these data, such as selecting provinces or organizational units, a drop-down menu options for the current fixed after the next level the pull-down menu of options to change accordingly. Today to talk about how to implement this multi-level drop-down menu interaction effect.

1. The drop-down menu
drop-down menu is an extension of the component, select the drop-down menu and then click on the drop-down menu components can be added to expand the options and drop-down menu to select two sub-components group, you can also add drop-down menu options in the drop-down menu to select the group, which is mainly used options for a long time in comparison to option a group show.


We can close the Customize option, enter some options for himself and separated by a comma, then the drop-down menu and select we added in the drop-down menu you will not take effect. Open the option to customize the display options for the drop-down menu is the option we add a.


In the event drop-down menu select the option, we can receive a parameter value is selected, the current selection is the drop-down menu item. Other components can also get the current value of selected pull-down menus.


2. The common variable
common variable of type Object data variables, the initial value is null object "{}." Common variable is a structured variable data, for storing data having a multi-stage structure. When using a common variable, the variable may be structured, the data may be imported by JSON format by way of adding a node, the node levels generated automatically.

We can look at the structure of the common variables demo, the common variable itself is an object that contains two elements within an object, Province and city, where the Province's property is a string, city property is an array, and an array of city each element is further an object, and this object contains two sub-elements and area name, where the name attribute is a string, an attribute area is an array, the array area attribute of each element is a character string.


3. Case component architecture and data binding

Province here is relatively simple, direct text content data binding component elements for the Province to the common variables.

Then part of the city, where we create a for loop option in the drop-down menu with drop-down menu. Data sources are generic city variable array (note that for the container must be a common source of data for the elements of the array variable attribute common variable itself, or an array). Then we said before each element in the array of city property is an object and contains two sub-elements name and area array, we will pull-down menu of options for the contents of bindings for which the name on it.


The last part of the region, for the outermost loop to create an array of data sources are city, in order to create the city [0], city [1 ], city [2] three objects. if the container is singled out name and the name of the city has been chosen unanimously from three of the city [n] objects inside. The second layer is the real circulation loop to create create a drop-down menu. Data source is filtered out before the city [n] object area elements, data binding, it is the current data 2, that is the name of the element in the array zone area.

4. cascade selector
fact, there is a component can achieve similar functionality, but rather than using the drop-down selector style. We can find this cascade selector in expanding assembly selector.

It's a list of data is an array of objects, a number of levels there are that many columns there are, in addition to the final option last one, in front of the column represents the level to which it belongs, is clearly seen that the lowest level of the selected item total number of objects how many lines there are an array of elements.

In selector cascade of events, we can get a feedback parameter - the value selected, the current selection is the result of a cascade selector, this is a result of an array of the row of data. We can also add in brackets after the selected value to select only a portion of the selected value.


Of course, in other components, we can also get to select the value of the cascade selector, or data binding.

to sum up
To achieve the effect of multi-level pull-down menu in conjunction with common variables, the main difficulty lies on the understanding of the structure of the common variables. For me, then, with the ranks of the structure of an array of objects compared to the common variable is more like a tree, instead of relying on an element specific to the ranks, but according to parent layers selected. That we can find a few common variables look at the structure, and then more practice in the case.