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

源代码下载