Jqueryeasyui Study Notes (15th) asynchronous tree (with source code)

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 asynchronous loading and all direct loading of the easyui tree framework when you click to expand:

     <  Script  Type  = "Text/JavaScript"  >  $ (  Function  () {$ (  "  # TT2  "  ). Tree ({ //  Expand Tree Asynchronously  URL:  '  Gettreemenu. ashx  '  }); $ (  "  # TT  "  ). Tree ({ //  Tree Expansion  URL:  '  Gettreemenu. ashx  '  , Onloadsuccess:  Function  (Node, data ){  //  Call events after successful Loading                     VaR  Tree  =  $ (  This  );  If  (Data) {$ (data). Each (  Function  (Index, d ){  If (  This  . State  =  '  Closed  '  ) {Tree. Tree (  '  Expandall  ' );}});}}});});  </  Script  >  <  Body  >      <  Ul  ID  = "TT2"  > </  Ul  >      < Ul  ID  = "TT"  > </  Ul  >  </  Body  > 

Each time you click to expand a tree node, the tree ID is passed to the background, so that we can investigate its sub-Nodes Based on the ID. The ID is null when it is loaded for the first time, so let's make a judgment, Just load the root node directly.

During asynchronous loading, as long as the database design is clear and the JSON data is correct, the implementation is very simple.

Database Design legend:

 

In this way, asynchronous tree and direct tree expansion methods can be implemented. When I write a demo, the design is not very good, so whether it is a child node or a parent node, there are expansion arrows, just do it.

In extraordinary times, you pay more attention to your health

Source code download