Jqueryeasyui Study Notes (14) Tree

You are welcome to repost it. Please indicate the source for reprinting! I hope this note will be useful to myself and everyone, but I have a limited level. If something goes wrong, I hope you can point out more criticism. Thank you! Today is the tree framework of easyui:

I personally think the tree framework of easyui is relatively difficult to implement, especially when splicing JSON data of the tree, it will not be displayed if there is a slight difference, so you can just take a closer look when using it;

Then we recommend a tree plug-in written by Chinese people: ztree, which is very useful. You can learn how to write the demo above comprehensively;

Don't talk nonsense.Code:

View code

 <  Head  >      <  Link  ID  = "Easyuitheme"  Href  = "Jquery-easyui-1.3.2/themes/default/easyui.css" REL  = "Stylesheet"   />      <  Link  Href  = "Jquery-easyui-1.3.2/themes/icon.css"  REL  = "Stylesheet"   />      <  Script  SRC  = "Jquery-easyui-1.3.2/jquery-1.8.0.min.js"  > </  Script >      <  Script  SRC  = "Javascript. js"  > </  Script  >      <! --  This is the jquery extension method.  -->      <  Script  SRC  = "Jquery-easyui-1.3.2/jquery. easyui. Min. js"  > </ Script  >      <  Script  SRC  = "Jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"  > </  Script  >      <  Script  Type  = "Text/JavaScript"  >  $ ( Function  (){  VaR  Tree  =  $ (  "  # TT2  "  ). Tree ({URL:  ' Jsontree. ashx  '  });});  </  Script  >  </  Head  >  <  Body  >      <! --  In this way, the easyui tree framework is implemented directly in HTML mode, and the line at the front of the tree framework is directly implemented by the lines attribute.  -->     <  Ul  ID  = "TT"  Class  = "Easyui-tree"  Lines  = "True"  >          <  Li  >              <  Span  > Folder </  Span >              <  Ul  >                  <  Li  >                      <  Span  > Sub folder 1 </  Span  >                      <  Ul  >                          < Li  >                              <  Span  > <  A  Href  = "#"  > File 11 </  A  > </  Span  >                          </  Li  >                         <  Li  >                              <  Span  > File 12 </  Span  >                          </  Li  >                          <  Li  >                              <  Span > File 13 </  Span  >                          </  Li  >                      </  Ul  >                  </  Li  >                  <  Li  >                      < Span  > File 2 </  Span  >                  </  Li  >                  <  Li  >                      <  Span  > File 3 </  Span  >                 </  Li  >              </  Ul  >          </  Li  >          <  Li  >              <  Span  > File21 </  Span >          </  Li  >      </  Ul  >      <  Ul  ID  = "TT2"  > </  Ul  >  </  Body  >  </ Html  > 

 

Here I only wrote about the basic use of the tree framework. I will not elaborate on the splicing of JSON format data. In fact, it is nothing more than the selection and addition of some nodes:

• ID: node ID. It is very important to load data from remote servers.
• Text: The displayed node text.
• State: node status, 'open' or 'closed '. The default value is 'open'. When it is set to 'closed', all the child nodes of the node will be loaded from the remote server site.
• Checked: Indicates whether to check whether the node is selected.
• Attributes: custom attributes that can be added to a node
• Children: A node array that defines some subnodes.

When HTML code implements the tree framework, we can see that UL tags are ul tags. In fact, I personally think the JSON format data is the same. I can understand it by analyzing it slowly;

Tree JSON sample code, where we can also control some tree attributes, dotted lines, folds, icons, and so on:

View code

[{"ID": 1, "text": "folder1", "iconcls": "icon-save", "children": [{"text": "file1 ", "checked": true}, {"text": "books", "State": "Open", "attributes": {"url ": "/demo/book/ABC", "price": 100}, "children": [{"text": "Photoshop", "checked": true }, {"ID": 8, "text": "sub bookds", "State": "closed"}]}, {"text": "Ages ", "State": "closed", "children": [{"text": "Java" },{ "text": "C #"}]
 

 

In addition, the Code is asynchronously loaded when the tree is used as the menu:

 
VaRTree = $ ("# TT2"). Tree ({URL:'Jsontree. ashx'});
 

 

In this way, the URL directs to an ashx or action to send a request. Then, when you click Expand Tree, you can request the child node from the database based on the parent node, the requested address must be the node level of the request;

Database field design: ID, PID (node level), text (display name), URL (pointing to address), seq (sorting)

In this way, the asynchronous request can be basically solved;

Source code download

Easyui1.3 help documentation (Chinese), but I suggest reading the API on the official website

That's all today. Go to bed...