JStree学习详解编程语言

把我在项目中用到的一些jstree技术拿出来分享一下 

先放一张效果图：

1.节点前加减号的更换

把css文件下32px.png这张图改一下就行

2. 父子节点前的图标不一样

在代码初始化中设置

 $("#user-tree").jstree({ 
            "core" : { 
                "themes": { 
                    "responsive": false 
                }, 
                // so that create works 
                "check_callback": true, 
                'data': data 
            }, 
            "types" : { 
                "default" : { 
                    "icon" : "glyphicon glyphicon-folder-close", 
                    draggable : false 
                }, 
                "file" : { 
                    "icon" : "glyphicon glyphicon-folder-close" 
                }, 
                "online" : { 
                    "icon" : "glyphicon glyphicon-user text-primary " 
                }, 
                "offline" : { 
                    "icon" : "glyphicon glyphicon-user text-default" 
                } 
            }, 
            "plugins" : ["types","wholerow",'dnd'] 
        });

如代码中显示，一共4个不同的types，也就是4个不同的图标，想让节点图标是其中一个就设置节点的type属性为其中一个就行。就像id:”user1″,text:”系统管理员”,parent:”dep1″,type:”online”这个节点一样。

3. 当鼠标移到用户节点的时候显示下面3个图标

这个是客户要求的，当时也是想了好久。来，直接看代码

.on('hover_node.jstree', function (e, data) { 
            //监听鼠标移上事件 
            var node=data.node; 
            var a_attr=node.a_attr; 
            var id=node.id; 
            //判断是否是用户节点 
            if(id.indexOf("user")>=0) 
            { 
                var doc=document.getElementById(id); 
                $("#"+id+" .jstree-wholerow").css("height","48px"); 
                if(lastNodeId=="") 
                { 
                    lastNodeHtml=doc.innerHTML.replace("jstree-wholerow-hovered",""); 
                    lastNodeId=id; 
 
                } 
                else 
                { 
                    var last=document.getElementById(lastNodeId); 
                    if(last!=null) 
                        last.innerHTML=lastNodeHtml; 
                    lastNodeHtml=doc.innerHTML.replace("jstree-wholerow-hovered",""); 
                    lastNodeId=id; 
 
                } 
                id=id.replace("user",""); 
                //添加图标 
                doc.innerHTML+='<div style="padding-left: 50px;">' + 
                    '<a class="glyphicon glyphicon-pencil" onclick="show(/''+id+'/')"></a>' + 
                    '<a class="glyphicon glyphicon-signal" ></a>' + 
                    '<a class="glyphicon glyphicon-flag"  onclick="show(/''+id+'/')"></a>' + 
                    '</div>'; 
            } 
        })

4. 对节点的添加，更新，删除操作

看代码：
HTML

  <div class="row"> 
            <div id="user-tree" class="tree-demo"></div> 
        </div> 
        <div class="row"> 
            <div class="clearfix"> 
                <button type="button" class="btn btn-success add"> 
                   添加 
                </button> 
                <button type="button" class="btn btn-warning rename"> 
                    重命名 
                </button> 
                <button type="button" class="btn btn-danger delete"> 
                    删除 
                </button> 
            </div> 
        </div>

JS

//监听重命名时间 
.on("rename_node.jstree",function(event,data) { 
            renameDepartment(event, data); 
        }); 
 
 /** 
         * 添加 
         */ 
        $(".clearfix .add").on('click', function (e) { 
            var ref = $('#user-tree').jstree(true); 
            var sel = ref.get_selected(); 
                if(!sel.length) { return false; } 
                sel = sel[0]; 
                sel = ref.create_node(sel, {"type":"file"}); 
                if(sel) { 
                    ref.edit(sel); 
                } 
        }); 
        /** 
         * 更新 
         */ 
        $(".clearfix .rename").on('click', function (e) { 
            var ref = $('#user-tree').jstree(true); 
            var sel = ref.get_selected(); 
            if(!sel.length) { return false; } 
            sel = sel[0]; 
            ref.edit(sel); 
        }); 
        /** 
         * 删除 
         */ 
        $(".clearfix .delete").on('click', function (e) { 
            var ref = $('#user-tree').jstree(true); 
            var sel = ref.get_selected(); 
            if(!sel.length) { return false; } 
            var r=confirm("确定删除该部门?") 
            if (r==true) 
            { 
                ref.delete_node(sel); 
            } 
 
        }); 
        /** 
         * 更新 
         */ 
        function renameDepartment(event,data) 
        { 
            //添加逻辑，存入数据库 
            //注:1.添加节点之后还会触发更新事件 
            //   2.添加之后需要刷新jstree 
            // $('#user-tree').jstree("refresh"); 
        }

源代码下载