更新： 我可以提醒选中的复选框，但我很难完成剪切，粘贴，复制和重命名等操作的绑定
我有一个包含菜单项的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 :(得分：2)
更改
.bind("change_state create.jstree")
到
.bind("create.jstree")
答案 1 :(得分：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>