Simple analysis of using Bootstrap TreeView plug-in to implement flexible configuration Express template _javascript skills

Bootstrap-treeview is a very cool effect based on the bootstrap jquery multilevel list tree plug-ins. The jquery plugin is based on Twitter Bootstrap, showing some inherited tree structures in simple and elegant ways, such as view trees, list trees, and so on.

Development conditions:

Install Bootstrap-treeview plug-in, the specific operation see:

Bootstrap-treeview

Implementation features:

1. A template can specify a child template (including multiple regions, prices, etc.)

2. When editing a child template area, dynamically changing the area of the tree (the region selected by the other child templates disabled, the area selected before this template is selected by default)

3.tree selection, parent and subset linkage (such as parent selected subset All selected, cancel a subset of the time, the parent is also canceled)

4. Maintain the child template data (display selected region format such as (Anhui, Beijing (changping Huilongguan)) store selected node)

Other Notes

Data source Format: [{text: ' Display name 1 ', Nodes:[{text: ' Child '}]},{text: ' Show Name 2 '}]

Bootstrap-trview dynamically adds Nodeid,parentid to the data source (a very important property) and can be customized to add additional properties to mark the current node

Data maintained during the editing process

The Array object templates contains:

1. Name of the template

2. Order of price items per child template

3. Region ID, Node ID, display name of the child template

Arrays and objects to be maintained for the above data

var templates = []; Save the final stored data
var selectednodeid = [];//Nodeid for storing a single template selection for displaying
var editingtemplate = null; C4/>var selectedareaid = []; Save the currently selected region
var selectedareaname = [];///Save the currently selected region name for display
var defaultdata = [];//data source

Realize the function of a

A template specifies multiple child templates

Mainly maintenance templates[] array push into multiple template can explain how to maintain template in detail below

Implement function two (dynamically modify tree)

Principle: Through the maintenance of templates and editingtemplate to get the currently edited child template data and other child template data, the current template node default selected, the other data is set to Disabled

Edit a child template

Uncheckall method: $ (' #tree '). TreeView (' Uncheckall ', {silent:true});

Disabled method: $ (' #tree '). TreeView (' Disablenode ', [NodeId, {silent:true}]);

The default selected method $ (' #tree '). TreeView (' Checknode ', [Template.nodeids[i], {silent:true}]);

implementation of three functions: Parent and child linkage (the main operation in the click to select and uncheck the above to analyze two cases)

The first type of check

1. Select parent node to select all child nodes

Gets all child nodes based on the nodes returned by the parent node and selects all child nodes

The selected method $ (' #tree '). TreeView (' Checknode ', [NodeId, {silent:true}]);

Can be encapsulated as a method Selectallchildren ()

2. If selected as a child node

To determine whether the child nodes in the parent node are all selected select the parent node if all is selected

The second kind of cancellation

1. Select as the parent node, uncheck all child nodes

Uncheck the method $ (' #tree '). TreeView (' Unchecknode ', [NodeId, {silent:true}]);

2 Selected as a child node, determine if the child node in the parent node is selected if selected uncheck

To determine whether the selected method

$ (' #tree '). TreeView (' Selectnode ', [NodeId, {silent:true}]);

Gets whether the element is selected based on the obtained

Implement function IV (maintain template data)

1. The editingtemplate being edited

2. All Selectednodeid selected at the current level

3. Display the Required string array selectednodename

3. Storing the string array selectedareaid the Areaid in the corresponding database

4. Deposit the above three arrays in template and push template into templates

Logic

1. Get all the selected elements

2. Traverse all the elements to determine whether the current node has nodes (that is, child elements), if there is a direct operation, and change the index, all of its child elements skipped, the name of the node saved into the areanames, such as "Anhui"

3. Iterate through all the elements if there are no child elements, remove the parent element such as "Beijing (", add the node element to the back, such as "Beijing (Changping District") to determine whether the next element's parent node has changed, and if so, end the maintenance string as "Beijing (Changping District)", and add it to areanames to continue traversing the next node

4. The other three arrays are maintained while traversing
Implementation results show:

1. Home Page display:

2.tree Display:

Summary

This article provides a simple idea of implementation, the specific code according to the business implementation, the lack of dynamic processing of data sources, the advantages of Bootstrap open API interface more, can be customized to achieve.

The above mentioned is a small set to introduce the use of Bootstrap TreeView plug-in flexible configuration Express template, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!