Easy to learn jquery plugin Easyui easyui Create a tree menu _jquery

Easyui use tags to create a tree menu
A tree menu can be created from a tag. The Easyui Tree menu can also be defined in the <ul> element. An unordered list of <ul> elements provides a basic tree structure. Each <li> element will produce a tree node, and the child <ul> element will produce a parent tree node.

Create a tree menu

 <ul class= "Easyui-tree" >
  <li>
   <span>Folder</span>
   <ul>
    <li>
     <span>sub Folder 1</span>
     <ul>
      <li><span>file 11</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>

Ii. Easyui Create an Asynchronous tree menu
in order to create an asynchronous tree menu, each tree node must have an ' id ' attribute, which will be submitted back to the server to retrieve the child node data.

Create a tree menu

 <ul id= "tt" class= "Easyui-tree"
 url= "tree2_getdata.php" >
 </ul>

Server-side code

 $id = Isset ($_post[' id ')? Intval ($_post[' id '): 0;
 
 Include ' conn.php ';
 
 $result = Array ();
 $rs = mysql_query ("SELECT * from nodes where parentid= $id");
 while ($row = Mysql_fetch_array ($rs)) {
 $node = array ();
 $node [' id '] = $row [' id '];
 $node [' text '] = $row [' name '];
 $node [' state '] = Has_child ($row [' id '])? ' Closed ': ' Open ';
 Array_push ($result, $node);
 }
 
 echo Json_encode ($result);
 
 function Has_child ($id) {
 $rs = mysql_query ("SELECT count (*) from nodes where parentid= $id");
 $row = Mysql_fetch_array ($rs);
 return $row [0] > 0? True:false;
 }

Three, Easyui tree menu Add node
This section shows you how to attach nodes to the tree menu. We will create a food tree containing fruit and vegetable nodes, then add some other fruit to the existing fruit node.

Create a food tree
First, we create the food tree, and the code looks like this:

 <div style= "width:200px;height:auto;border:1px solid #ccc;" >
 <ul id= "tt" class= "Easyui-tree" url= "Tree_data.json" ></ul>
 </div>

Note that the tree component is defined in the <ul> tag, and the tree node data is loaded from the URL "Tree_data.json".
Get parent node

Then we select the Fruit node by clicking on the node and we will add some other fruit data. Perform the getselected method to get the processing node:
var node = $ (' #tt '). Tree (' getselected ');
The return result of the GetSelected method is a JavaScript object that has an ID, text, and Target attribute. The target property is a DOM object that references the selected node and its Append method is used to attach child nodes.
Additional Nodes

var node = $ (' #tt '). Tree (' getselected ');
 if (node) {
 var nodes = [{
 "id":], "
 text": "Raspberry"
 },{
 "id": "
 Text": "Cantaloupe "
 }];
 $ (' #tt '). Tree (' append ', {
 parent:node.target,
 data:nodes
 });
 

When adding some fruit, you will see:

As you can see, using the Easyui tree plugin to attach nodes is not so difficult.
iv. Easyui Create a tree menu with check boxes
The Easyui Tree plug-in allows you to create a check box tree. If you click on a node's checkbox, the clicked node information will inherit up and down. For example: Click on the ' Tomato ' node checkbox and you will see that the ' Vegetables ' node is now only selected.

Create a check box tree

<ul id= "tt" class= "Easyui-tree"
 url= "Data/tree_data.json"
 checkbox= "true" >
</ul>

Five, Easyui tree-shaped menu drag-and-drop control
when using tree Plug-ins in an application, drag-and-drop (drag) and drop (drop) features require that the user be allowed to change the node location. Enable drag-and-drop (drag) and drop (drop) operations, all you need to do is set the ' DnD ' property of the tree plug-in to true.

Create a tree menu

$ (' #tt '). Tree ({
 dnd:true,
 url: ' Tree_data.json '
});

When a drop operation occurs on a tree node, the ' OnDrop ' event is triggered, and you should do some or more things, such as saving the node state to the remote server side, and so on.

Ondrop:function (TargetNode, source, point) {
 var Targetid = $ (target). Tree (' GetNode ', targetnode). ID;
 $.ajax ({
 URL: ' ... ',
 type: ' Post ',
 dataType: ' JSON ',
 data: {
 id:source.id,
 Targetid: Targetid,
 point:point
 }}
 );

VI. Easyui Tree Menu load Parent/child node
the usual way to represent a tree node is to store a parentid at each node. This is also known as the adjacency list model. Loading the data directly into the tree menu is not allowed. But before we load the tree menu, we can convert it to a standard tree-menu-type data format. The tree plug-in provides a ' loadfilter ' option function that can implement this function. It provides an opportunity to change any one entry data. This tutorial shows you how to use the ' loadfilter ' function to load parent/child nodes into the tree menu.

Parent/child node data

[
{"id": 1, "Parendid": 0, "name": "Foods"},
{"id": 2, "ParentID": 1, "name": "Fruits"},
{"id": 3, "ParentID" : 1, "name": "Vegetables"},
{"id": 4, "ParentID": 2, "name": "Apple"},
{"id": 5, "ParentID": 2, "name": "Orange"},
{"id": 6, "ParentID": 3, "name": "Tomato"},
{"id": 7, "ParentID": 3, "name": "Carrot"},
{"id": 8, "ParentID": 3, "name": "Cabbage"},
{"id": 9, "ParentID": 3, " Name ': ' Potato '},
{' id ': ' parentid ': 3, ' name ': ' Lettuce '}
]
use ' loadfilter ' to create a tree
$ (' # tt '). Tree ({
 URL: ' Data/tree6_data.json ',
 loadfilter:function (rows) {return
 convert (rows);
 }
});

Implementation of transformations

function convert (rows) {
 function exists (rows, ParentID) {for
 (var i=0; i<rows.length; i++) {
 if (rows[i) . id = = ParentID) return true;
 }
 return false;
 }
 
 var nodes = [];
 Get the top level nodes for
 (var i=0; i<rows.length; i++) {
 var row = rows[i];
 if (!exists (rows, Row.parentid)) {
 Nodes.push ({
 id:row.id,
 text:row.name
 });
 }
 
 var toDo = [];
 for (var i=0; i<nodes.length; i++) {
 todo.push (nodes[i]);
 while (todo.length) {
 var node = todo.shift ();//The parent node
 //Get the Children nodes for
 (var i=0; i< ; rows.length; i++) {
 var row = rows[i];
 if (Row.parentid = = node.id) {
 var child = {Id:row.id,text:row.name};
 if (node.children) {
  node.children.push (child);
 } else {
  node.children = [child];
 }
 Todo.push (child);
 }} return nodes;
}

The above is about Easyui to create a tree-shaped menu of the basic methods of operation, I hope you can apply their knowledge, the real grasp of the skills.