更新本: 我可以提醒複選框的選中狀態,但我有一個很難得到工作,如剪切,粘貼操作的結合,複製和重命名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-
顯然,我正在爲許多樹做這個工作,這就是爲什麼我需要參考:) –
@Hybride:更新了上面的代碼以反映最新的變化 –
在這種情況下,您正嘗試重命名多個節點? (我很抱歉提出這麼多問題,試圖理解你在做什麼,並且我相信我在這兩個帖子之間混淆了我自己。:) – Hybride