jsTree使用记录，节点操作及选中等

         在开发过程中有一个场景，树是一个项目迭代树，每一个节点都是一个项目，树上面也可以创建文件夹节点将同一类型或者同一个项目的迭代版本放置到一起集中管理，这时候在页面新增了一个迭代版本，创建的时候逻辑并不是在树上面走，但是创建完了之后希望能在树上面体现出来，刷新树节点数据并且选中新建的这个节点，将新建迭代版本的内容呈现出来。

      好了业务场景描述完了，这时候实现按理是很简单的  $('#tree_1').jstree(true).select_node(data);这个方法按照给出的api是可以实现需求，但是实际应用的时候这个方法选中时可以，但是底色样式并没有变化，最后我是这样解决的问题

    //alert($("#"+data).attr("id")); 
                $('.jstree-wholerow-clicked').each(function(){
                    $(this).removeClass('jstree-wholerow-clicked');
                    //alert($(this).attr('class'));
                    //$(this).attr('class','jstree-wholerow');
                })
                //('.jstree-wholerow-clicked').removeClass('jstree-wholerow-clicked');
                $("#"+data).children("div:first").addClass('jstree-wholerow-clicked');
                //$('#tree_1').jstree(true).select_node(data);

当然了，可能会有更好的方式，然而select_node这个方法确实有很多问题，个人使用后觉得样式不会随着选择同步，需要自己改

下面贴一些代码大体都是写树的操作

var kanbanId ;
var onloadTrue = false;
var colnameDiv = '<div class="form-group"><label class="col-md-2 control-label">{kanbanColName}</label><div class="col-md-4">'+
                '<input type="text" name="editColName" id="editColName{length}" class="form-control" value="{name}" alt="{id}" maxlength="6" placeholder="最大长度为6"></div></div>';
var UITree = function () {
    /*$('#tree_1').bind("contextmenu",
            function(){
                return false;
            }
        );*/
    var handleSample = function (treeData) {
        var hostUrl = $("#hostUrl").val();
        $('#tree_1')
            
            .jstree({
            "core" : {
                "themes" : {
                    "responsive": false
                }, 
                // so that create works
               "check_callback" : true,
                'data' : treeData
            },
            "types":false,
           /* "types" : {
                "#" : {
                    "icon" : "fa fa-folder icon-state-warning icon-lg"
                },
                "file" : {
                    "icon" : "fa fa-file icon-state-warning icon-lg"
                }
            },*/
            "themes" : { "stripes" : true },
            "plugins" : [
                "contextmenu", "dnd", "search",
                "state", "types", "wholerow"
              ],
              "types": {
                      "1": {
                         
                          "icon": "jstree-node-online"
                      },
                      "2": {
                          "icon": "jstree-folder",
                         
                      }
                    
                  },
              "contextmenu":{
                "items":{
                    "create":null,
                    "rename":null,
                    "remove":null,
                    "ccp":null,
                    "新建文件夹":{
                        "label":"新建文件夹",
                        "action":function(data){
                            var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            if(obj.parent=="#"){
                                inst.create_node(obj, {}, "last", function (my_node) {
                                    setTimeout(function () { inst.edit(my_node); },500);
                                });
                            }else{
                                alert("该节点下不允许创建文件夹!!!");
                            }
                            
                        
                        //alert(ss)
                            /*var inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            dialog.show({"title":"新建“"+obj.text+"”的子菜单",url:"/accountmanage/createMenu?id="+obj.id,height:280,width:400});*/
                        }
                    },
                    "删除文件夹":{
                        "label":"删除文件夹",
                        "action":function(data){
                            var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            if(obj.parent!="#"&&obj.id>=1530843355688){
                                if(obj.children!=null&&obj.children.length!=0){
                                    alert("有子节点存在无法删除");
                                }else{
                                    if(inst.is_selected(obj)) {
                                        inst.delete_node(inst.get_selected());
                                    }
                                    else {
                                        inst.delete_node(obj);
                                    }
                                }
                                
                            }else{
                                alert("该节点不允许删除!!!");
                            }
                        
                           /* var inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            if(confirm("确定要删除此菜单？删除后不可恢复。")){
                                jQuery.get("/accountmanage/deleteMenu?id="+obj.id,function(dat){
                                    if(dat == 1){
                                        alert("删除菜单成功！");
                                        jQuery("#"+treeid).jstree("refresh");
                                    }else{
                                        alert("删除菜单失败！");
                                    }
                                });
                            }*/
                        }
                    },
                    "编辑文件夹":{
                        "label":"编辑文件夹",
                        "action":function(data){
                            var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            if(obj.parent!="#"&&obj.id>=1530843355688){
                                //alert(JSON.stringify(obj))
                                inst.edit(obj);
                            }else{
                                alert("该节点不允许编辑!!!");
                            }
                        
                            
                           /* var inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);editMyNode
                            dialog.show({"title":"编辑“"+obj.text+"”菜单",url:"/accountmanage/editMenu?id="+obj.id,height:280,width:400});*/
                        }
                    }
                }
              }
           /* "contextmenu":{  
                "items":{  
                    "create":null,  
                    "rename":null,  
                    "remove":null,  
                    "ccp":null,  
                    "新建菜单":{  
                        "label":"新建菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0])
                            var pid = node.parent;
                            _menu.operation.addMenu(pid,node);
                        }  
                    },
                    "删除菜单":{  
                        "label":"删除菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]);
                            _menu.operation.delMenu(node);
                        }  
                    },
                    "修改菜单":{  
                        "label":"修改菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]).original;
                            _menu.operation.editMenu(node);
                        }  
                    },
                    "上移菜单":{  
                        "label":"上移菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]);
                            var prev_dom = $(data.reference[0]).closest("li").prev();
                            _menu.operation.sortMenu(node,prev_dom);
                        }  
                    },
                    "下移菜单":{  
                        "label":"下移菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]);
                            var next_dom = $(data.reference[0]).closest("li").next();
                            _menu.operation.sortMenu(node,next_dom);
                        }  
                    },
                    "新建子菜单":{  
                        "label":"新建子菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]);
                            var pid = node.id;
                            _menu.operation.addMenu(pid,node);
                        }  
                    }
                }
            } */
            
        }).bind("load_node.jstree", function (event,data) {
            
          
        }).bind("create_node.jstree",function(event,data){
           // createCategory(event,data);
            //alert(data);
        }).bind("rename_node.jstree",function(event,data){
            rename(event,data);
            //alert(data);
        }).bind("delete_node.jstree",function(event,data){
            reMove(event,data);
            //alert(data);
        }).bind('move_node.jstree', function(event,data){
            //alert(JSON.stringify(data))
            if(data.node.id <=3){
                 freshTree();
                alert("该节点不允许移动")
            }else if(data.parent>3&&data.parent<1530843355688){
                 freshTree();
                 alert("不允许移动至当前节点下")
            }else if(data.node.id >=1530843355688&&data.parent>3){
                 freshTree();
                 alert("该节点不能移动至当前节点下");    
            }else if(data.parent=="#"){
                freshTree();
                alert("已经移出根节点范围了！！！");    
            }else{
                if(data.node.id >=1530843355688){
                    var parentId = data.node.parent;
                    var id = data.node.id;
                    var name = data.node.text;
                    var params = {"id":id,"name":name,"parentId":parentId};
                    //alert(parentId)
                   // alert(JSON.stringify(params) )
                    $.ajax({
                        'url':$("#hostUrl").val() + '/version/updateNode.do',
                        'type':'post',
                        'dataType':'json',
                        'async':false,
                        'data':params,
                        'cache':false,
                        'timeout':1000*10
                    }).fail(function(){
                       // Metronic.unblockUI();
                        alert("亲出错了，请稍后再试~");
                        freshTree();
                        return false;
                    }).done(function(json){
                        if(json.status=="success") {
                            //alert(json.info);
                        }
                    })
                }else{
                    var parentId = data.node.parent;
                    var id = data.node.id;
                    var name = data.node.text;
                    var params = {"id":id,"parentId":parentId};
                    //alert(parentId)
                   // alert(JSON.stringify(params) )
                    $.ajax({
                        'url':$("#hostUrl").val() + '/version/updateParentNodeId.do',
                        'type':'post',
                        'dataType':'json',
                        'async':false,
                        'data':params,
                        'cache':false,
                        'timeout':1000*10
                    }).fail(function(){
                       // Metronic.unblockUI();
                        alert("亲出错了，请稍后再试~");
                        freshTree();
                        return false;
                    }).done(function(json){
                        if(json.status=="success") {
                            //alert(json.info);
                        }
                    })
                }
                     
            }
            /*var inst = $.jstree.reference(data.reference),
            obj = inst.get_node(data.reference);
            if(obj.parent=="#"){
                inst.create_node(obj, {}, "last", function (my_node) {
                    //setTimeout(function () { inst.edit(my_node); },500);
                });
            }else{
                alert("该节点下不允许创建文件夹!!!");
            }*/
            //alert(JSON.stringify(event));
          //alert(data.old_parent);
          //return false;
            
       });
        $(document).bind("dnd_start.vakata", function(e, data) {
          // alert(data)
            var node = $('#tree_1').jstree("get_node", data.data.nodes[0]);
            //alert(mark)
           //alert(JSON.stringify(node));
        })
    }
    return {
        init: function (type) {
            $('#tree_1').data('jstree', false).empty();
            $.ajax({
                url: $("#hostUrl").val() + '/version/SelectVersionByUser.do',
                type: 'POST',
                async: false,
                success: function (treeData) {
                    handleSample(treeData);
                    if(type == 1){
                    
                            selectByPrimaryKey(treeData[1].id);
                        
                    }else if(type == 2){
                        selectByPrimaryKey($("#versionDataId").val());
                    }
                }
            });
        }
    };
}();

function createCategory(event,data){
    if(isNaN(data.node.id)){
          var parentId = data.node.parent;
            var newNodeName = data.node.text;
            var params = {"parentId":parentId,"name":newNodeName};
            $.ajax({
                'url':$("#hostUrl").val() + "/version/addNode.do",
                'type':"post",
                'dataType':'json',
                'async':false, 
                'cache':false,
                'data':params,
                'timeout':1000*10
            }).done(function(json){
                if(json.status=="success") {
                    var id = data.node.id;
                    var categoryId = json.info;
                    $("#"+id).attr("id",categoryId);//此处修改成后台返回的id
                    freshTree();
                   // $("#tree_1").jstree("rename_node",data.node);
                   /* setTimeout(function () { 
                        var inst = data.instance,
                         obj = data.node;
                        inst.edit(obj); },5000);*/
                    
                    //$jstree = $.jstree._focused();
                    //$('#tree_1').refresh("#" + parentId); 
                    //$('#tree_1').data('jstree', false).empty();
                    //UITree.init(1);
                   // $('#tree_1').jstree(true).refresh(); 
                    
                }else{
                     alert(json.info);
                     return false;
                }
               
            }).fail(function(e){
               // Metronic.unblockUI();
                alert("亲出错了，请稍后再试");
            })
    }
  
}

function rename(event,data) {
      var id = data.node.id;
      if(!isNaN(id)){
          var parentId = data.node.parent;
            var name = data.text;
            var params = {"id":id,"name":name,"parentId":parentId};
            //alert(parentId)
           // alert(JSON.stringify(params) )
            $.ajax({
                'url':$("#hostUrl").val() + '/version/updateNode.do',
                'type':'post',
                'dataType':'json',
                'async':false,
                'data':params,
                'cache':false,
                'timeout':1000*10
            }).fail(function(){
               // Metronic.unblockUI();
                alert("亲出错了，请稍后再试~");
                return false;
            }).done(function(json){
                if(json.status=="success") {
                    //alert(json.info);
                }
            })
      }else{
          createCategory(event,data);
      }
    
}

function reMove(event,data) {
     var parentId = data.node.parent;
        var id = data.node.id;
        var name = data.text;
    var str = data.node.id;
    if(parentId.match("#")) {
        alert("亲，不能删除根节点");
        return ;
    }
    //var id = str.substring(1);
    var params = {"id":id};
    $.ajax({
        'url':$("#hostUrl").val() + "/version/deleteNode.do",
        'type':"post",
        'dataType':"json",
        'async':false,
        'data':params,
        'cache':false,
        'timeout':1000*10
    }).done(function(json){
        if(json.ret==false) {
            alert(json.info);
        }
    }).fail(function(json){
       // Metronic.unblockUI();
        alert("亲出错了，请稍后再试~");
        return false;
    })

}
function freshTree(){
    $.ajax({
        url: $("#hostUrl").val() + '/version/SelectVersionByUser.do',
        type: 'POST',
        async: false,
        success: function (treeData) {
            var tree = $('#tree_1');
            tree.jstree(true).settings.core.data = treeData; // 新数据
            tree.jstree(true).refresh(); //刷新树
            //if(type == 1){
                    selectByPrimaryKey(treeData[1].id);
                
            //}else if(type == 2){
            //    selectByPrimaryKey($("#versionDataId").val());
            //}
        }
    });
    
}
//树搜索
function selectTreeProject(obj) {
    // 获取项目当前输入内容
    var searchTxt = obj.val().replace(/(^\s*)|(\s*$)/g, "");
    if (searchTxt != ""&&searchTxt.length>1) {
        $.ajax({
            url : hostUrl + '/defect/selectProject.do',
            type : 'post',
            async : false,
            // dataType: 'json',
            data : {
                "param" : searchTxt
            },
            success : function(data) {
                var jsonData = data.projectList;
                var htmlresp = '';
                for (var i = 0; i < jsonData.length; i++) {
                    if(jsonData[i]['productName']!=null){
                        htmlresp += '<li onclick="selectedTreeRelatedProject($(this),\'' + jsonData[i]['id'] + '\')" style="cursor:pointer;">' + jsonData[i]['productName'] + '-' + jsonData[i]['versionnumber'] + '</li>';
                    }else{
                        htmlresp += '<li onclick="selectedTreeRelatedProject($(this),\'' + jsonData[i]['id'] + '\')" style="cursor:pointer;">' + jsonData[i]['versionnumber'] + '</li>';
                    }
                    
                }
                obj.next().children("ul:last").html(htmlresp);
            }
        });
        obj.next().attr('style', 'display: block;margin-top: 34px;width:146.33px');
    } else {
        obj.next().attr('style', 'display: none;margin-top: 34px;width:146.33px');
        obj.attr('data-id', "");
    }
}
//选中后触发的事件,把内容写到是input中
function selectedTreeRelatedProject(obj, id) {
    var selectedTxt = obj.text();
    obj.parent().parent().prev().val(selectedTxt);
    obj.parent().parent().prev().attr('data-id', id);
    obj.parent().parent().attr('style', 'display: none;margin-top: 34px;width:146.33px');
    $.ajax({
        url : hostUrl + '/version/selectByPrimaryKey.do',
        type : 'post',
        // dataType: 'json',
        data : {
            "Id" : id
        },
        success : function(data) {
            var tree = $('#tree_1').jstree(true);;
                //tree.jstree(true).settings.core.data = treeData; // 新数据
                //tree.jstree(true).refresh(); //刷新树
            //alert($('#tree_1').jstree("get_node", data.id))
            if($('#tree_1').jstree("get_node", data.id)){
                //alert("sss")
                tree.deselect_all();
                tree.select_node(data.id);
            }else{
                //alert("www")
                 $("#tree_1").jstree("create_node", data.parentNodeId,  {id:data.id,a_attr:{style: "color:#C1C1C1"},icon:"glyphicon  glyphicon-tree-conifer myicon",parent:data.parentNodeId,text:data.versionnumber}, "last", false, true);
                 //createNode($('#tree_1').jstree("get_node", data.parentNodeId), data.id, data.versionnumber, "first"); 
                tree.deselect_all();
                tree.select_node(data.id);
            }    
        }
    });
}