UPDATE ON THIS:
I can get to alert the checkboxes selected but I’m having a hard time to get working the binding of operations such as cut, paste, copy and rename
I have a div containing the menu items, in my case they are images for create, rename, cut, etc…rather than using the context-menu.
<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>
What would I need to change in those functions for them to bind correctly to the checked elements to allow operations with the nodes?
Thank you in advance for any suggestions.
JP-
1 Answer