A useful tree-shaped menu

Previous post address: http://www.iteye.com/topic/851317

To celebrate the qui framework V2.1.5 version of the official release, this time to introduce a very useful tree-shaped drop-down box components: qui tree drop-down box.

feature 1: Landscaping and customizable appearance

The dropdown box is rendered using JS. The dropdown box is styled as follows:

The appearance is controlled by CSS and pictures. Changing the appearance can be easily achieved by modifying the CSS.

The Qui tree dropdown box does not exist in the IE6 can not be obscured by the floating layer and so on.

feature 2: Simple to use

After introducing the script and the corresponding CSS, write the following HTML code on the page:

<divclass= "Selecttree" treetype= " ztree" id= "sel01" ><ul "id=" Treedemo "class=" ></ul></div>

You can then specify JSON data for it. Data format:

var zNodes1 =[	{id:1, pid:0, Name: "Parent Node 1", open:true},	{id:11, pid:1, Name: "Leaf Node"},	{id:12, pid:1, Name: "Leaf Child Nodes "},	{id:13, pid:1, Name:" Leaf Node "},	{id:2, pid:0, Name:" Parent 2 ", open:true},	{id:211, pid:2, Name:" Leaf Node "},	{id:212, pid:2, Name:" Leaf Node "},	{id:213, pid:2, Name:" Leaf Node "},	{id:214, pid:2, Name:" Leaf node 24 "} ];

Feature 3: Control some nodes are not selectable

If you want certain child nodes (such as the parent node) to be clickexpand:true, set the JSON data for that item, so that the child nodes are expanded instead of when clicked.

 

 

 

 

feature 4: Trigger Close event

You can add a close event for a selecttree Div, which is invoked whenever the content layer is closed. In this way, you can pass the selected item to the hidden form element for submitting the form.

 

 

 

feature 5: Custom icon

The Drop-down box tree structure allows you to customize icons for each node. The effect is as follows:

 

 

 

feature 6: Width handling

The Qui tree drop-down box handles the width by default, and when the tree is too wide, the content layer grows wider to accommodate the contents.

You can also force a width to be specified for the Drop-down box and the content layer. The effect is as follows:

feature 7: Tree-shaped dropdown box editable

Add a editable= "true" attribute to the dropdown code and turn it into an editable Drop-down box with the following effect:

feature 8: Data can be loaded in AJAX mode

The tree structure of the Drop-down box can be loaded in AJAX mode. For more information, see online related examples.

feature 9: Turn into a tree multi-select dropdown box

Add the Multimode= "true" property to the Drop-down box to turn it into a tree-selectable drop-down box. The effect is as follows:

When the selection is complete, the mouse moves in to display all selected option prompts. The effect is as follows:

feature 10: The non-grouping mode of the tree-type multi-selection dropdown box

Change the JSON data in the tree-selectable drop-down box so that it is not grouped. Then it becomes a select multiple-selection drop-down box. The effect is as follows:

 

feature 11: Validation of a tree-shaped drop-down box

Combined with the validation mechanism of the qui framework, you can easily add validation to the tree Drop-down box. The effect is as follows:

feature 12: Tree dropdown box Dynamic additions and deletions

The Tree dropdown box supports dynamic additions and deletions. The following effects can be easily achieved by combining Ajax mechanisms:

Effect after adding a node:

feature 13: Perfect browser compatibility

Whether it's IE6, IE7, IE8, IE9 or Firefox, Chrome, Safira, or even Linux, it keeps functionality and appearance consistent.

Disclaimer: The tree structure within this component is based on the Ztree component, thanks to the support and authorization of the Ztree component author.

Online Sample Access Address: Click to view

Like the previous post, this tree Drop-down box is part of the "qui framework", and you can download the entire frame to use more components.

Click the download frame

Add: The previous post: http://www.iteye.com/topic/851317