jQuery プラグイン EasyUI EasyUI を簡単に学習してツリーを作成する menu_jquery

1. EasyUI はタグを使用してツリー メニューを作成します
マーカーからツリーを作成できます。 easyui ツリー メニュー (Tree) も ff6d136ddc5fdfeffaf53ff6ee95f185 要素で定義できます。順序なしリストの

要素は、基本的なツリー構造を提供します。各
• 要素はツリー ノードを生成し、子
  要素は親ツリー ノードを生成します。

  

  ツリーメニューの作成 (Tree)

   <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. EasyUI で非同期ツリー メニューを作成します
  非同期ツリー メニュー (ツリー) を作成するには、各ツリー ノードに「id」属性が必要です。この属性は、子ノード データを取得するためにサーバーに送信されます。

  

  ツリーメニューの作成 (Tree)
  

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

  サーバー側コード
  

   $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. EasyUI ツリー メニューにノードを追加します
  このセクションでは、ツリー メニュー (ツリー) にノードをアタッチする方法を示します。果物と野菜のノードを含む食品ツリーを作成し、既存の果物ノードに他の果物を追加します。

  

  食用ツリーを作成する
  まず、食品ツリーを作成します。コードは次のようになります:
  

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

  ツリーコンポーネントはff6d136ddc5fdfeffaf53ff6ee95f185タグで定義されており、ツリーノードデータはURL「tree_data.json」からロードされることに注意してください。
  親ノードの取得

  次に、ノードをクリックしてフルーツ ノードを選択し、他のフルーツ データを追加します。 getSelected メソッドを実行して処理ノードを取得します:
  var ノード = $('#tt').tree('getSelected');
  getSelected メソッドの戻り結果は、id、text、および target 属性を持つ JavaScript オブジェクトです。ターゲット属性は、選択したノードを参照する DOM オブジェクトであり、その append メソッドは子ノードを追加するために使用されます。
  追加ノード

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

  フルーツを追加すると、次のように表示されます:

  

  ご覧のとおり、easyui の Tree プラグインを使用してノードを接続するのはそれほど難しくありません。
  4. EasyUI はチェック ボックスのあるツリー メニューを作成します
  easyui の Tree プラグインを使用すると、チェックボックス ツリーを作成できます。ノードのチェックボックスをクリックすると、クリックしたノードの情報が上下に引き継がれます。たとえば、「トマト」ノードのチェックボックスをクリックすると、「野菜」ノードが部分的にのみ選択されていることがわかります。

  

  チェックボックスツリーの作成

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

  5. EasyUI ツリー メニューのドラッグ アンド ドロップ コントロール
  アプリケーションで Tree プラグインを使用する場合、ユーザーがノードの位置を変更できるようにするためにドラッグ アンド ドロップ機能が必要です。ドラッグ アンド ドロップ操作を有効にするには、Tree プラグインの「dnd」プロパティを true に設定するだけです。

  

  ツリーメニュー(Tree)の作成
  

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

  ツリー ノードでドロップ操作が発生すると、「onDrop」イベントがトリガーされ、ノードの状態をリモート サーバーに保存するなど、いくつかの操作を実行する必要があります。
  

  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创建树形菜单的基本操作方法，希望大家可以学以致用，真正的掌握其中的技巧。