然后引用JSTREE 
html
html = "<div style='overflow:auto;height:250px'><div id='myTree'></div></div>"
js
var addId = "";
    var path= $('#path').val();
    $.ajaxSetup({cache:false});
     //这个是为了树的准确性做的一个缓存区清理的工作
  最好加上,否则IE会出现问题
    $("#myTree").tree({
        data:{
            async : false,
      // 设为true后会自动请求原来的树。添加到此节点下
            type : "json",
            opts : {
                method:"GET",
                url: path+"/pub/cacheHierarchyList.do"
            }
        },
        ui : {
            theme_name : "classic",
            context : []
        },
        lang : {
                new_node
    : "新栏目",
                loading
        : "加载中 ..."
        },
        rules:
  
        {
  
             draggable
   : "all"
   //这个设置可以使得节点进行拖动操作
  
        },
  
        
        plugins: {
                           contextmenu:{}
        },
        callback : {
            onselect : function(NODE){
                var id = $(NODE).attr("id");
                var name = $(NODE).find("a:first").text().replace(/(^\s*)|(\s*$)/g, "");
                $("#hierarchyId").val(id);
                $("#hierarchyName").val(name);
                $("#mask").css("display","none");
                $("#tree").css("display","none");
            },
            beforerename: function(NODE,LANG,TREE_OBJ) {
                var tmpId = $(NODE).attr("id");
   // 当前ID()
                var parentId = $(NODE).parent().parent().attr("id");
  // 父节点ID
                if(parentId=="myTree"){
                    alert("此栏目不允许重命名!");
                    return false;
                }
                return true ;
            },
            onrename : function(NODE,TREE_OBJ,RB){
                var newName=$.trim($(NODE).find("a:first").text());
   // 新名称
                var tmpId = $(NODE).attr("id");
   // 当前ID()
                var myUrl = path+"/pub/ajaxTreeMethod.do";
                if (tmpId == "") {
                    var params={
                        method:3,
                        hierarchyId:addId,
                        hierarchyName:$.trim(newName)
                    };
                    $.post(myUrl,params,function(data){
                        if(data==1){
                            alert("添加节点"+newName+"成功");
                        }else {
                            alert("添加失败");
                        }
                    });
                    return;
                }
                if(confirm("你确定要重命名吗?")){
                    var params={
                        method:3,
                        hierarchyId:tmpId,
                        hierarchyName:$.trim(newName)
                    };
                    $.post(myUrl,params,function(data){
                        if(data==1){
                            alert("修改名称"+newName+"成功");
                        }else {
                            alert("修改栏目名称失败");
                        }
                        return true;
                    });
                }
            },
            beforedelete : function(NODE,TREE_OBJ){
                if(confirm("你确定删除吗?")){
                    return true;
                }
            },
            ondelete : function(NODE,TREE_OBJ){
                    var tmpId = $(NODE).attr("id");
   // 当前ID()
                    var myUrl = path+"/pub/ajaxTreeMethod.do";
                    var params={
                        method:2,
                        hierarchyId:tmpId
                    };
                    $.post(myUrl,params,function(data){
                        if(data==1){
                            alert("删除成功");
                        }else {
                            alert("删除失败");
                        }
                        return true;
                    });
            },
            oncreate:function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) {
                var newName=$(NODE).find("a:first").text();
   // 新名称
                var tmpId = $(NODE).attr("id");
   // 当前ID()
                var parentId = $(NODE).parent().parent().attr("id");
  // 父节点ID
                var level=$(NODE).parent().parent().attr("level");
                if(parseInt(level)==2){
                    alert("不能再新建子节点");
                    $.tree.focused().refresh(TREE_OBJ.parent(NODE));
                    return false;
                }
                if(parentId=="" || parentId==null){
                    parentId=0;
                    level=1;
                }else{
                    level=parseInt(level)+1;
                }
                var myUrl = path+"/pub/ajaxTreeMethod.do";
                var params={
                    method: 1,
                    hierarchyName:$.trim(newName),
                    parentId:parentId,
                    num:level
                };
              $.ajax({
                  type:"post",
                  dataType:"json",
                  data:params,
                  url:myUrl,
                  success:function(data){
                      addId = data;
                  }
              });
            }
        }
        
    });
    $('#newMenu').live('click',function(){
        if($(current_node).find("a:first").text()==""){
            alert("你还未选中要处理的栏目");
            return false;
        }else{
            $.tree.focused().create();
        }
    });
    $('#renameMenu').live('click',function(){
        if($(current_node).find("a:first").text()==""){
            alert("你还未选中要处理的栏目");
            return false;
        }else{
            $.tree.focused().rename();
        }
    });
    $('#deleteMenu').live('click',function(){
        if($(current_node).find("a:first").text()==""){
            alert("你还未选中要处理的栏目");
            return false;
        }else{
            $.tree.focused().remove();
        }
    });