Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI EasyUI, um einen Baum menu_jquery zu erstellen

1. EasyUI verwendet Tags, um ein Baummenü zu erstellen
Aus Markierungen kann ein Baum erstellt werden. Das easyui-Baummenü (Tree) kann auch im

-Element definiert werden. Das
-Element einer ungeordneten Liste stellt eine grundlegende Baumstruktur bereit. Jedes
• -Element generiert einen Baumknoten und das untergeordnete
  -Element generiert einen übergeordneten Baumknoten.

  

  Erstellen Sie ein Baummenü (Baum)

   <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>

  2. Erstellen Sie ein asynchrones Baummenü mit EasyUI
  Um ein asynchrones Baummenü (Baum) zu erstellen, muss jeder Baumknoten über ein „id“-Attribut verfügen, das an den Server zurückgesendet wird, um Daten des untergeordneten Knotens abzurufen.

  

  Erstellen Sie ein Baummenü (Baum)
  

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

  Serverseitiger 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;
   }
  

  3. Knoten zum EasyUI-Baummenü hinzufügen
  In diesem Abschnitt erfahren Sie, wie Sie Knoten zum Baummenü (Baum) hinzufügen. Wir werden einen Nahrungsbaum erstellen, der Obst- und Gemüseknoten enthält, und dann einige andere Früchte zu den vorhandenen Fruchtknoten hinzufügen.

  

  Erstelle einen Nahrungsbaum
  Zuerst erstellen wir den Lebensmittelbaum, der Code sieht so aus:
  

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

  Bitte beachten Sie, dass die Baumkomponente im

  -Tag definiert ist und die Baumknotendaten von der URL „tree_data.json“ geladen werden.
  Übergeordneten Knoten abrufen

  Dann wählen wir den Fruchtknoten aus, indem wir auf den Knoten klicken, und fügen einige weitere Fruchtdaten hinzu. Führen Sie die getSelected-Methode aus, um den Verarbeitungsknoten abzurufen:
  var node = $('#tt').tree('getSelected');
  Das Rückgabeergebnis der getSelected-Methode ist ein Javascript-Objekt mit den Attributen id, text und target. Das Zielattribut ist ein DOM-Objekt, das auf den ausgewählten Knoten verweist, und seine Append-Methode wird zum Anhängen untergeordneter Knoten verwendet.
  Zusätzlicher Knoten

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

  Wenn Sie einige Früchte hinzufügen, sehen Sie:

  

  Wie Sie sehen, ist es gar nicht so schwierig, Knoten mit dem Tree-Plug-in von easyui anzuhängen.
  4. EasyUI erstellt ein Baummenü mit Kontrollkästchen
  Mit dem Tree-Plugin von easyui können Sie einen Kontrollkästchenbaum erstellen. Wenn Sie auf das Kontrollkästchen eines Knotens klicken, werden die angeklickten Knoteninformationen nach oben und unten vererbt. Klicken Sie beispielsweise auf das Kontrollkästchen des Knotens „Tomate“ und Sie werden sehen, dass der Knoten „Gemüse“ jetzt nur teilweise ausgewählt ist.

  

  Kontrollkästchenbaum erstellen

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

  5. Drag-and-Drop-Steuerung des EasyUI-Baummenüs
  Bei Verwendung des Tree-Plug-Ins in einer Anwendung sind die Drag-and-Drop-Funktionen erforderlich, damit der Benutzer die Position von Knoten ändern kann. Um Drag-and-Drop-Vorgänge zu ermöglichen, müssen Sie lediglich die Eigenschaft „dnd“ des Tree-Plugins auf „true“ setzen.

  

  Erstellen Sie ein Baummenü (Baum)
  

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

  Wenn ein Drop-Vorgang auf einem Baumknoten auftritt, wird das Ereignis „onDrop“ ausgelöst und Sie sollten einige oder mehrere Vorgänge ausführen, z. B. das Speichern des Knotenstatus auf dem Remote-Server usw.
  

  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
   }
   });
  }
  

  六、EasyUI树形菜单加载父/子节点
  通常表示一个树节点的方式就是在每一个节点存储一个 parentid。 这个也被称为邻接列表模型。 直接加载这些数据到树形菜单（Tree）是不允许的。 但是我们可以在加载树形菜单之前，把它转换为标准标准的树形菜单（Tree）数据格式。 树（Tree）插件提供一个 'loadFilter' 选项函数，它可以实现这个功能。 它提供一个机会来改变任何一个进入数据。 本教程向您展示如何使用 'loadFilter' 函数加载父/子节点到树形菜单（Tree）。

  

  父/子节点数据
  

  [
  {"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":10,"parentId":3,"name":"lettuce"}
  ]
  使用 'loadFilter' 创建树形菜单（Tree）
  $('#tt').tree({
   url: 'data/tree6_data.json',
   loadFilter: function(rows){
   return convert(rows);
   }
  });
  

  转换的实现
  

  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;
  }

  以上就是关于EasyUI创建树形菜单的基本操作方法，希望大家可以学以致用，真正的掌握其中的技巧。