Dojo advanced Web2.0 UI Component Library-tree component

The tree component can display hierarchical data in a tree structure, just like a Windows resource browser. The tree has two templates: one is the tree template and the other is the treenode template. It should be said that the tree template is a container and there are many treenode in it. the initialization tree provides the data required to open the tree section. Provides encapsulated standard data access APIs, which exist as a unified data access layer. All data is the attribute of item or item. A basic itemfilereadstore class is provided to read data in JSON format. dojox provides more extensions, such as xmlstore, csvstore, and opmlstore. You can also customize your own store types.

Terms

Data Source	Data Source
Datastore	Table
Item	Row record
Attribute	Column
Reference	Some are similar to foreign key dependencies, but the foreign key points to the parent record, and the reference points to the list of child records
Identity	Primary Key
Query	The query condition is an object type, such as {Name :'? Hite * ', aisle: 'condition'}, "," indicates the and relationship of the condition, wildcard "?"," * "Indicates one or more characters (including 0 characters)
JSON (JavaScript Object Notation)	Is a lightweight data exchange format. It is a subset based on JavaScript standards. The representation of javascriptd data structures (such as strings, arrays, and objects) is exactly the same as that of JSON, so JSON can be recognized lossless by JavaScript. It is a simple text format, which is easier to read and less redundant than XML. The following is a typical JSON format data, for example: {Identifier: 'name', Items: [{Name:'Adobo', aisle: 'Mexican'}, {Name:'Balsamic vinegar ', aisle: 'condition'}, {Name:'Worcestershire sauce ', aisle: 'conditions'}]}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
{Identifier: 'name', Items: [{Name:'Adobo', aisle: 'Mexican'}, {Name:'Balsamic vinegar ', aisle: 'condition'}, {Name:'Worcestershire sauce ', aisle: 'conditions'}]}
 

Assume that the data segment is stored in the file. The declaration and usage of the corresponding dojo datastore are as follows:

<! -Indicates that the datastore type is; the Data URL. Note that this can be a file path or a request stream; and the datastore's jsid --> <Div dojotype = "" jsid = "pantrystore" URL = ""> </Div> <Div name = "pantry_item" dojotype = "" Store = "Pantrystore" Searchattr = "Name" value = "vinegar" AutoComplete = "true"> </div> <! -- A component that declares dojotype. This component is displayed on an HTML page as a drop-down box and requires data filling. The store attribute points to a datastore whose jsid is pantrystore, this associates the data of the datastore just defined earlier. --> You can also read datastore data by programming, for example:  /*  A datastore is defined by programming. Here, it can be another datastore type, such as xmlstore and csvstore, or even a custom datastore type.  */  VaR Pantrystore = New ({URL: "pantry _" });  //  A custom function that prepares for the fetch function for data processing.  VaR Gotlist = Function  (Items, request ){  VaR Itemslist = "" ;  For ( VaR I = 0; I <; I ++ ){  // The getvalue function is an encapsulated API used to obtain the value of an attribute name of an item. Itemslist + = pantrystore. getvalue (items [I], "name") + "" ;} Alert ( "All items are:" + Itemslist );}  //  A custom function that prepares for the fetch function for exception handling.  VaR Goterror = Function  (Error, request) {alert ( "The request to the store failed." + Error);} ({oncomplete: gotlist, onerror: goterror, query: {Name :" * "}});  /* To execute a data query statement, you need to input some query options, such as oncomplete in the example: The processing function after obtaining all the qualified data, the parameter is the list of items; onerror: exception Handling function; query: Query condition, which is an object type, such as {Name :'? Hite * ', aisle: 'condition'}, "," indicates the and relationship of the condition, wildcard "?"," * "Indicates one or more characters (including 0)  */ 

To create a tree instance by using the tree component, follow these steps:

1. Create an itemfilereadstore data source used to store tree data. The creation method is as follows:

 
FunctionCreatetreestore (){VaRTreestore =New({URL:''});ReturnTreestore ;}
 

2. the foreststoremodel is used to encapsulate the store. A model layer is introduced to the tree component for special processing. For example, a parent node is automatically added when there is no root node. The creation method is as follows:

VaRTreestore =Createtreestore ();VaRTreemodel =New({Query: {type:'Province'//Query data of Type: 'province 'from the data source}, Store: treestore, root:True,//Define the root nodeRootid: "China", Rootlabel:"China City list", Childrenattrs :['Children']});
 

3. Then, use foreststoremodel to create a treemodel. This treemodel can be used to parse the subnode of the node. It is a recursiveProgramStructure. The creation method is as follows:

FunctionCreatetreemodel (item, treestore, typevalue ){VaRNewmodel =New({Query: {type: typevalue}, store: treestore, root:True, Rooid: item, rootlabel: item|Getlabel (item), childrenattrs :['Children']});ReturnNewmodel ;}
 

4. Define a tree in the page file as follows:

 
<Div dojotype = "" id = "Tree" jsid = "Tree" model = "treemodel" openonclick = "true">
 

Openonclick = "true" indicates that the child node of the node is expanded when the node is clicked.
Through the above analysis, the following is an example of creating a dynamic spanning tree. In this example, the data source is dynamically obtained from the server and displayed on the foreground. First, create a data file used to generate a tree structure. In this example, the data source is in JSON format. The data content defines the names of some provinces and cities in China. The file content is defined as follows:

{Identifier: 'name' , Label: 'Name' , Items: [{Name: 'Shaanxi province ', type: 'province' , Children: [{_ reference: 'Xi'an '}, {_ reference: 'yan'an' }]}, {Name: 'Shanghai', type: 'city' }, {Name: 'Yan'an ', type: 'city' , Children: [{_ reference: 'Changxian '}, {_ reference: 'wuqi County' }]}, {Name: 'Chang', type: 'county'}, {Name: 'Wuqi County ', type: 'county' }, {Name: 'Beijing', type: 'vince ', populiation: '20140901' , Children: {_ reference: 'Jiading region' }}, {Name: 'Jiading region', type: 'city', www: '', populiation: '123' }, {Name: 'Jiangsu province ', type: 'vince' , Children: [{_ reference: 'Suzhou City '}, {_ reference: 'nanjing City' }]}, {Name: 'Suzhou City ', type: 'city', populiation: '000000', Area: '000000' sq km' , Children: [{_ reference: 'Kunshan '}, {_ reference: 'zhangjiagang'}]}, {Name: 'Kunshan ', type: 'county' }, {Name: 'Zhangjiagang ', type: 'county' }, {Name: 'Nanjing City ', type: 'city' }]} 

Then the above content is stored as the file name, and stored in the same directory as the HTML page that calls the file, in order to display Chinese content, the file should be saved as UTF-8 format.
The following is an example of using tree.CodeAs follows:

<HTML>  @ Import "Dojoapp/dojo/resources /" ; @ Import "Dojoapp/dijit/themes/Tundra /" ; </Style> <SCRIPT type = "text/JavaScript" Djconfig = "Parseonload: True, isdebug: true" SRC = "Dojoapp/dojo/"> </SCRIPT> <SCRIPT> ( "" );( "" );( "" );(  Function  (){( "Tree ", Null , Function  (Message ){( "Selected node:" + );( "Selected node:" + );( "Cc"). ATTR ('href ',); //  Open the webpage connection of the Tree node ("Cc" ). Refresh ();  //  You can call xhr to modify the JSON data in the background so that the node of the tree can be added or modified.  });});  Function  Createtreestore (){  VaR Treestore = New  ({URL: '' });  Return Treestore ;}  VaR Treestore = Createtreestore ();  VaR Treemodel = New  ({Query: {type: 'Province' }, Store: treestore, root:  True  , Rootid: "China" , Rootlabel: "China City list" , Childrenattrs :[ 'Children' ]});  Function Createtreemodel (item, treestore, typevalue ){  VaR Newmodel = New  ({Query: {type: typevalue}, store: treestore, root:  True  , Rooid: item, rootlabel: item | Getlabel (item), childrenattrs :[ 'Children' ]});  Return  Newmodel ;} </SCRIPT>  Openonclick = "True"> </div> <Div dojotype = "" region = "bottom" id = "cc" Style = "Background-color: # acbfd0; Height: 200px;" splitter = "true"> </div> </body>