更新：我可以提醒选中的复选框，但我很难开始绑定操作，如剪切、粘贴、复制和重命名
我有一个包含菜单项的 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>
我需要在这些函数中进行哪些更改才能正确绑定到选中的元素以允许对节点进行操作？
提前感谢您的任何建议。
J.P-