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");
        }

---

源代码下载