2012-06-02 75 views
0

更新本: 我可以提醒複選框的選中狀態,但我有一個很難得到工作,如剪切,粘貼操作的結合,複製和重命名jstree pre1.0修復+複選框插件 - 如何綁定操作?

我有一個包含菜單一個div項目,在我的情況下,他們是創建,重命名,剪切等圖像,而不是使用上下文菜單。

 <li id="Events" class="label"> 
       <a href='#Events'><span> Events </span></a> 
     <div class="sub-menu" style="height:auto; min-height:120px; background-color:#E5E5E5"> 
      <div class="menu" id="menu_a" style="position:relative; margin-left:56%"> 
      <img src="./js/jsTree/create.png" alt="" style="cursor:pointer" id="create" title="Create" > 
      <img src="./js/jsTree/rename.png" alt="" style="cursor:pointer" id="rename" title="Rename" > 
      <img src="./js/jsTree/remove.png" alt="" style="cursor:pointer" id="remove" title="Delete"> 
      <img src="./js/jsTree/cut.png" alt="" style="cursor:pointer" id="cut" title="Cut" > 
      <img src="./js/jsTree/copy.png" alt="" style="cursor:pointer" id="copy" title="Copy"> 
      <img src="./js/jsTree/paste.png" alt="" style="cursor:pointer" id="paste" title="Paste"> 
      </div> 

       <div id="a" class="jstree_container"></div> 
     </div> 

     </li> 

     <!-- JavaScript neccessary for the tree --> 
     <script type="text/javascript" > 
      jQuery.noConflict(); 

     jQuery(function ($) { 

     $("#a").jstree({ 
       // List of active plugins 
       "plugins" : [ 
        "themes","json_data","ui","crrm","dnd","types","hotkeys","checkbox" 
       ], 

     /*"ui":{select_limit:-1},  */ 
     "checkbox": { 
      override_ui:true, 
         real_checkboxes: true, 
         real_checkboxes_names: function (n) { 
         var nid = 1; 
         $(n).each(function (data) { 
          nid = $(this).attr("nodeid"); 
         }); 
         return (["check_" + nid, nid]); 
         }, 
         two_state: true 
        }, 

       themes: {"theme": "classic"}, 
       // This example uses JSON as it is most common 
       "json_data" : { 
        // This tree is ajax enabled - as this is most common, and maybe a bit more complex 
        // All the options are almost the same as jQuery's AJAX (read the docs) 
        "ajax" : { 
         // the URL to fetch the data 
         "url" : "./js/jsTree/server.php?user_id=jeanpaul&cat=a", 
         // the `data` function is executed in the instance's scope 
         // the parameter is the node being loaded 
         // (may be -1, 0, or undefined when loading the root nodes) 
         "data" : function (n) { 
          // the result is fed to the AJAX request `data` option 
          return { 
           "operation" : "get_children", 
           "id" : n.attr ? n.attr("id").replace("node_","") : 1 
          }; 
         } 
        } 
       }, 

      }) 


      .bind("create.jstree", function (e, data) { 
       $.post(
        "./js/jsTree/server.php?user_id=jeanpaul&cat=a", 
        { 
         "operation" : "create_node", 
         "id" : data.rslt.parent.attr("id").replace("node_",""), 
         "position" : data.rslt.position, 
         "label" : data.rslt.name, 
         "type" : data.rslt.obj.attr("rel") 
        }, 
        function (r) { 
         if(r.status) { 
          $(data.rslt.obj).attr("id", "node_" + r.id); 
         } 
         else { 
          $.jstree.rollback(data.rlbk); 
         } 
        } 
       ); 

      } 
      ) 


      .bind("remove.jstree", function (e, data) { 
       data.rslt.obj.each(function() { 
        $.ajax({ 
         async : false, 
         type: 'POST', 
         url: "./js/jsTree/server.php?user_id=jeanpaul&cat=a", 
         data : { 
          "operation" : "remove_node", 
          "id" : this.id.replace("node_","") 
         }, 
         success : function (r) { 
          if(!r.status) { 
           data.inst.refresh(); 
           $.jstree._reference($("#a")).refresh(-1); 
          } 
         } 
        }); 
       }); 
      }) 


      .bind("rename.jstree", function (e, data) { 

       $.post(
        "./js/jsTree/server.php?user_id=jeanpaul&cat=a", 
        { 
         "operation" : "rename_node", 
         "id" : data.rslt.obj.attr("id").replace("node_",""), /*data.rslt.obj.attr("id").replace("node_",""),*/ 
         "label" : data.rslt.new_name 
        }, 
        function (r) { 
         if(!r.status) { 
          $.jstree.rollback(data.rlbk); 
         } 
        } 
       ); 

      }) 


      .bind("move_node.jstree", function (e, data) { 
       data.rslt.o.each(function (i) { 
        $.ajax({ 
         async : false, 
         type: 'POST', 
         url: "./js/jsTree/server.php?user_id=jeanpaul&cat=a", 
         data : { 
          "operation" : "move_node", 
          "id" : $(this).attr("id").replace("node_",""), 
          "ref" : data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_",""), 
          "position" : data.rslt.cp + i, 
          "label" : data.rslt.name, 
          "copy" : data.rslt.cy ? 1 : 0 
         }, 
         success : function (r) { 
          if(!r.status) { 
           $.jstree.rollback(data.rlbk); 
          } 
          else { 
           $(data.rslt.oc).attr("id", "node_" + r.id); 
           if(data.rslt.cy && $(data.rslt.oc).children("UL").length) { 
            data.inst.refresh(data.inst._get_parent(data.rslt.oc)); 
           } 
          } 
         } 
        }); 
       }); 
      }); 

     }); 
     </script> 
     <script type="text/javascript" > 
     // Code for the menu buttons of Events 
      jQuery.noConflict(); 
      jQuery(function ($) { 

      $("#menu_a img").click(function() { 

      //makes the images to behave as links, can't use a within the li because it thinks that is an accordion menu  



       switch(this.id) { 



     case "create": 
        $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){ 
         $("#a").jstree("create",'#'+$(element).attr("id"),"last",null);  
         }); 
     break; 

     case "remove": 
        $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){ 
         $("#a").jstree("remove",'#'+$(element).attr("id"));  
         }); 
     $.jstree._reference($("#a")).refresh(-1);    
     break; 




     case "rename": 

        $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){   


        $("#a").jstree("rename", '#'+$(element).attr("id"), true ); 


         }); 

     break; 



     case "cut": 
        $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){ 

          $("#a").jstree("cut", '#'+$(element).attr("id")); 
         }); 
     break; 



     case "copy": 

        $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){ 

          $("#a").jstree("copy", '#'+$(element).attr("id")); 
         }); 
     break; 



     case "paste": 

        $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){ 

          $("#a").jstree("paste", '#'+$(element).attr("id")); 
         }); 
     break; 



        default: 
     /*for tests only */ 
        $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){ 

         //alert($(element).attr("id")); 
          $("#a").jstree(this.id, '#'+$(element).attr("id")); 
         }); 

         break; 
       } 
      }); 
     }); 

     </script> 

我需要在這些函數中更改哪些函數才能正確綁定到checked元素以允許使用節點進行操作?

非常感謝您的任何建議。

JP-

回答

0
<li id="Tasks" class="label"> 
    <a href='#Tasks'><span> Tasks </span></a> 
    <div class="sub-menu" style="height:auto; min-height:120px; background-color:#E5E5E5"> 
     <div class="menu" id="menu_t" style="position:relative; margin-left:56%"> 
      <img src="./js/jsTree/create.png" alt="" id="create" title="Create"> 
      <img src="./js/jsTree/rename.png" alt="" id="rename" title="Rename"> 
      <img src="./js/jsTree/remove.png" alt="" id="remove" title="Delete"> 
      <img src="./js/jsTree/cut.png" alt="" id="cut" title="Cut"> 
      <img src="./js/jsTree/copy.png" alt="" id="copy" title="Copy"> 
      <img src="./js/jsTree/paste.png" alt="" id="paste" title="Paste"> 
     </div> 
     <div id="t" class="jstree_container"></div> 
    </div> 
</li> 

<!-- JavaScript neccessary for this tree : Tasks --> 
<script type="text/javascript"> 
    jQuery.noConflict(); 

    jQuery(function ($) { 

     $("#t").jstree({ 
      // List of active plugins used 
      "plugins": ["themes", "json_data", "ui", "crrm", "dnd", "hotkeys", "checkbox", "contextmenu", "cookie"], 

      "ui": { 
       select_limit: -1, 
       select_prev_on_delete: true, 
      }, 
      "checkbox": { 
       override_ui: true, 
       real_checkboxes: true, 
       real_checkboxes_names: function (n) { 
        var nid = 1; 
        $(n).each(function (data) { 
         nid = $(this).attr("nodeid"); 
        }); 
        return (["check_" + nid, nid]); 
       }, 
       two_state: true 
      }, 

      themes: { 
       "theme": "classic" 
      }, 
      // This example uses JSON as it is most common 
      "json_data": { 
       // This tree is ajax enabled - as this is most common, and maybe a bit more complex 
       // All the options are almost the same as jQuery's AJAX (read the docs) 
       "ajax": { 
        // the URL to fetch the data 
        "url": "./js/jsTree/server.php?user_id=jeanpaul&cat=t", 
        // the `data` function is executed in the instance's scope 
        // the parameter is the node being loaded 
        // (may be -1, 0, or undefined when loading the root nodes) 
        "data": function (n) { 
         // the result is fed to the AJAX request `data` option 
         return { 
          "operation": "get_children", 
          "id": n.attr ? n.attr("id").replace("node_", "") : 1 
         }; 
        } 
       } 
      } 

     }) 


     .bind("create.jstree", function (e, data) { 
      $.post(
       "./js/jsTree/server.php?user_id=jeanpaul&cat=t", { 
        "operation": "create_node", 
        "id": data.rslt.parent.attr("id").replace("node_", ""), 
        "position": data.rslt.position, 
        "label": data.rslt.name, 
        "type": data.rslt.obj.attr("rel") 
       }, 
       function (r) { 
        if (r.status) { 
         $(data.rslt.obj).attr("id", "node_" + r.id); 
        } else { 
         $.jstree.rollback(data.rlbk); 
        } 
       } 
      ); 

     }) 


     .bind("remove.jstree", function (e, data) { 
      data.rslt.obj.each(function() { 
       $.ajax({ 
        async: /*true*/ false, 
        type: 'POST', 
        url: "./js/jsTree/server.php?user_id=jeanpaul&cat=t", 
        data: { 
         "operation": "remove_node", 
         "id": this.id.replace("node_", "") 
        }, 
        success: function (r) { 
         if (!r.status) { 
          data.inst.refresh(); 
         } 
        } 
       }); 
      }); 
     }) 


     .bind("rename.jstree", function (e, data) { 

      data.rslt.obj.each(function() { 
       $.ajax({ 
        async: false, 
        type: 'POST', 
        url: "./js/jsTree/server.php?user_id=jeanpaul&cat=t", 
        data: { 
         "operation": "rename_node", 
         "id": this.id.replace("node_", ""), 
         "label": data.rslt.new_name 
        }, 
        success: function (r) { 
         if (!r.status) { 
          data.inst.refresh(); 
         } 
        } 
       }); 
      }); 
     }) 


     .bind("move_node.jstree", function (e, data) { 
      data.rslt.o.each(function (i) { 
       $.ajax({ 
        async: false, 
        type: 'POST', 
        url: "./js/jsTree/server.php?user_id=jeanpaul&cat=t", 
        data: { 
         "operation": "move_node", 
         "id": $(this).attr("id").replace("node_", ""), 
         "ref": data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_", ""), 
         "position": data.rslt.cp + i, 
         "label": data.rslt.name, 
         "copy": data.rslt.cy ? 1 : 0 
        }, 
        success: function (r) { 
         if (!r.status) { 
          $.jstree.rollback(data.rlbk); 
         } else { 
          $(data.rslt.oc).attr("id", "node_" + r.id); 
          if (data.rslt.cy && $(data.rslt.oc).children("UL").length) { 
           data.inst.refresh(data.inst._get_parent(data.rslt.oc)); 
          } 
         } 
        } 
       }); 
      }); 
     }); 

    }); 
</script> 
<script type="text/javascript"> 
    // Code for the menu buttons of Tasks 
    jQuery.noConflict(); 
    jQuery(function ($) { 

     $("#menu_t img").css('cursor', 'pointer').click(function() { 

      switch (this.id) { 

      case "create": 
       $.jstree._reference("#t").get_checked(-1, true).each(function (index, element) { 
        $("#t").jstree("create", '#' + $(element).attr("id"), "last", null, false); 
       }); 
       break; 

      case "remove": 
       $.jstree._reference("#t").get_checked(-1, true).each(function (index, element) { 
        $("#t").jstree("remove", '#' + $(element).attr("id")); 

        // only refresh if we are taking the first node displayed... it's going to recreate it in the backend. 
        if ($(element).attr("id") == $("div.jstree > ul > li").first().attr("id")) { 
         $.jstree._reference($("#t")).refresh(-1); 
        } 

       }); 
       break; 

      case "rename": 

       $.jstree._reference("#t").get_checked(-1, true).each(function (index, element) { 
        $("#t").jstree("rename", '#' + $(element).attr("id"), true); 
       }); 

       break; 

      case "cut": 
       $.jstree._reference("#t").get_checked(-1, true).each(function (index, element) { 

        $("#t").jstree("cut", '#' + $(element).attr("id")); 
       }); 
       break; 

      case "copy": 

       $.jstree._reference("#t").get_checked(-1, true).each(function (index, element) { 

        $("#t").jstree("copy", '#' + $(element).attr("id")); 
       }); 
       break; 

      case "paste": 

       $.jstree._reference("#t").get_checked(-1, true).each(function (index, element) { 

        $("#t").jstree("paste", '#' + $(element).attr("id")); 
       }); 
       break; 

      } 
     }); 
    }); 
</script> 
+0

顯然,我正在爲許多樹做這個工作,這就是爲什麼我需要參考:) –

+0

@Hybride:更新了上面的代碼以反映最新的變化 –

+0

在這種情況下,您正嘗試重命名多個節點? (我很抱歉提出這麼多問題,試圖理解你在做什麼,並且我相信我在這兩個帖子之間混淆了我自己。:) – Hybride

2

變化

.bind("change_state create.jstree") 

只是

.bind("create.jstree") 
+0

data.rslt.obj是不確定的 [打破這個錯誤] \t data.rslt。 obj.each(function(){當試圖刪除 –

+0

Hybride,你的回答是部分正確的......我的意思是它僅適用於使用複選框插件刪除許多節點,但是如果我使用帶有單個選擇的內容菜單重命名,它確實有效,否則如果我選擇多個我只得到最後一個重命名..但是,如果我使用自定義事件我得到的圖標:obj.children不是一個函數w1 = obj.children(「ins」)。寬度(),在jquery.jstree。 js(1267行)..我非常希望接受你的答案,但不想混淆別人,但如何繞過這個問題的任何想法?我希望上下文菜單作爲圖標工作。 –

+0

你可以幫我一個忙嗎?從那以後你做了什麼更新你的代碼?正當我閱讀時,我不會嘗試解決你已經做過的事情。 – Hybride