JStree学习详解编程语言

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

在代码初始化中设置

 $("#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 这个节点一样。

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

.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  + 

  a hljs-string">/)" /a  + 

  a /a  + 

  a hljs-string">/)" /a  + 

  /div ; 

 })

看代码：
HTML

 div 

 div id="user-tree" /div 

 /div 

 div 

 div 

 button type="button" 

 /button 

 button type="button" 

 重命名 

 /button 

 button type="button" 

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

 }

源代码下载

13835.html