Maison > interface Web > js tutoriel > le corps du texte

Apprenez facilement le plug-in jQuery EasyUI EasyUI pour créer une arborescence menu_jquery

WBOY
Libérer: 2016-05-16 15:28:38
original
1248 Les gens l'ont consulté

1. EasyUI utilise des balises pour créer un menu arborescent
Un arbre peut être créé à partir de marqueurs. Le menu arborescent easyui (Tree) peut également être défini dans l'élément

    L'élément
      d'une liste non ordonnée fournit une structure arborescente de base. Chaque élément
    • générera un nœud d'arborescence et l'élément enfant
        générera un nœud d'arborescence parent.

        Créer un menu arborescent (Arbre)

         <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>
        Copier après la connexion

        2. Créez un menu arborescent asynchrone avec EasyUI
        Afin de créer un menu arborescent asynchrone (Tree), chaque nœud d'arbre doit avoir un attribut 'id', qui sera renvoyé au serveur pour récupérer les données du nœud enfant.

        Créer un menu arborescent (Arbre)

         <ul id="tt" class="easyui-tree"
         url="tree2_getdata.php">
         </ul>
        
        Copier après la connexion

        Code côté serveur

         $id = isset($_POST['id']) &#63; 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']) &#63; '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 &#63; true : false;
         }
        
        Copier après la connexion

        3. Ajouter des nœuds au menu de l'arborescence EasyUI
        Cette section vous montre comment attacher des nœuds au menu arborescent (Tree). Nous allons créer un arbre alimentaire contenant des nœuds de fruits et légumes, puis ajouter d'autres fruits aux nœuds de fruits existants.

        Créer un arbre alimentaire
        Tout d'abord, nous créons l'arbre alimentaire, le code ressemble à ceci :

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

        Veuillez noter que le composant d'arborescence est défini dans la balise

          et que les données du nœud d'arborescence sont chargées à partir de l'URL "tree_data.json".
          Obtenir le nœud parent

          Ensuite, nous sélectionnons le nœud du fruit en cliquant sur le nœud et nous ajouterons d'autres données sur le fruit. Exécutez la méthode getSelected pour obtenir le nœud de traitement :
          var node = $('#tt').tree('getSelected');
          Le résultat de retour de la méthode getSelected est un objet javascript, qui possède des attributs id, text et target. L'attribut target est un objet DOM qui fait référence au nœud sélectionné et sa méthode append sera utilisée pour ajouter des nœuds enfants.
          Nœud supplémentaire

          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
           });
           }
          
          Copier après la connexion

          Lorsque vous ajoutez quelques fruits, vous verrez :

          Comme vous pouvez le constater, il n'est pas si difficile d'attacher des nœuds à l'aide du plug-in Tree d'easyui.
          4. EasyUI crée un menu arborescent avec des cases à cocher
          Le plugin Tree d'easyui vous permet de créer une arborescence de cases à cocher. Si vous cochez la case d'un nœud, les informations du nœud cliqué seront héritées de haut en bas. Par exemple : cliquez sur la case à cocher du nœud 'tomate' et vous verrez que le nœud 'Légumes' n'est désormais que partiellement sélectionné.

          Créer une arborescence de cases à cocher

          <ul id="tt" class="easyui-tree"
           url="data/tree_data.json"
           checkbox="true">
          </ul>
          Copier après la connexion

          5. Contrôle glisser-déposer du menu de l'arborescence EasyUI
          Lors de l'utilisation du plug-in Tree dans une application, les fonctions glisser-déposer sont nécessaires pour permettre à l'utilisateur de modifier la position des nœuds. Pour activer les opérations de glisser-déposer, il vous suffit de définir la propriété 'dnd' du plugin Tree sur true.

          Créer un menu arborescent (Arbre)

          $('#tt').tree({
           dnd: true,
           url: 'tree_data.json'
          });
          
          Copier après la connexion

          Lorsqu'une opération de suppression se produit sur un nœud d'arborescence, l'événement 'onDrop' sera déclenché et vous devrez effectuer une ou plusieurs opérations, telles que sauvegarder l'état du nœud sur le serveur distant, etc.

          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
           }
           });
          }
          
          Copier après la connexion

          六、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);
           }
          });
          
          Copier après la connexion

          转换的实现

          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;
          }
          Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal