Question

（JQuery）如何给JsTree生成的树的每个节点添加上自定义的右键菜单？

请写一个简短的DEMO。
JsTree版本0.9.9a。

Answer 1

一个带有右键操作的树形菜单

$(document).ready(function(){
    $.ajaxSetup({cache:false});
    $("#browser").tree({
    data  : {
        type  : "json",
        url   : src,
        async : true,
        async_data : function (NODE) {
                                        return { parent_Id : $(NODE).attr("id") || 0}
                                     }
      },
      lang:{
           loading:"目录加载中……"
            },
      rules:
      {
      draggable   : "all"   //这个设置可以使得节点进行拖动操作
      },
      ui:{
           context     : [ //自定义右键操作的可操作内容
            {
                id      : "create",
                label   : "添加下级目录", //右键弹出菜单的此项操作屏显字样
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, //允许节点被右击时出现操作菜单
                icon    : "<%=request.getContextPath() %>/css/themes/default/create.png",//右键弹出菜单的此项操作图标
                action  : function (NODE, TREE_OBJ) {
                                                //进行此项操作，将有这个函数事件被响应
                                                     }
            },
            "separator"//这个是在两个操作之间画一条分隔线
           ,
            {
                id      : "edit",
                label   : "编辑目录信息",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/image/reg2.gif",
                action  : function (NODE, TREE_OBJ) {
                                                    openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
                                                    }
            },
            "separator"
            ,
            {
                id      : "privilege",
                label   : "设置目录权限",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/css/themes/default/rename.png",
                action  : function (NODE, TREE_OBJ) {
                                                    openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
                                                    }
            },
            "separator",
            {
                id      : "delete",
                label   : "删除",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/css/themes/default/remove.png",
                action  : function (NODE, TREE_OBJ) {
                                                    var tree=$.tree_reference("browser");
                                                    openWindow('myurl','','',function(){
                                               //下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。
                                                    NODE=$(tree.parent(NODE));
                                                    if($(NODE).attr("id")==undefined){
                                                        tree.refresh();
                                                    }else{
                                                        TreeRefresh();
                                                    }
                                                    });
                                                    }
            },
            "separator",
            {
                id      : "others",
                label   : "其他操作",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/css/images/cut.png",
                action  : function (NODE, TREE_OBJ) {
                                                    alert("暂无可提供操作。");
                                                    }
            }
            ]
      },
   callback : {
         onselect: function(node) {
            //(a);
           
        }
    }
 
});
function treeRefresh(nodeid){
                     var rid=nodeid;
                    var tree=$.tree_reference("browser");
                    var par_node=tree.parent($("#"+rid));
                    tree.refresh(par_node);
}
});

Answer 2

把xml写成一个字节流 然后获取之后读取这个流就可以获取数据了