これに関する更新：選択したチェックボックスにアラートを出すことはできますが、切り取り、貼り付け、コピー、名前の変更などの操作のバインドを機能させるのに苦労しています
メニュー項目を含む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>
チェックされた要素に正しくバインドしてノードでの操作を可能にするために、これらの関数で何を変更する必要がありますか？
よろしくお願いします。
JP-