Z-tree实例（六）——连接线、图标、字体样式
程序员文章站
2022-06-12 09:14:40
...
主要琢磨ztree的基本属性，如连接线的显示、title的显示、以及icon和font等的设置。
页面结构如下：
<BODY> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <a href="javascript:void(0);" id="changeName">换名字</a><br /><br /> <a href="javascript:void(0);" id="changeColor">换颜色</a><br /><br /> <a href="javascript:void(0);" id="changeIcon">换图标</a><br /><br /> <a href="javascript:void(0);" id="changeFont">倾斜</a><br /><br /> </div> </div> </BODY>
CSS样式为：
<style type="text/css">
.ztree li span.button.pIcon01_ico_open{margin-right:2px; background: url(css/zTreeStyle/img/diy/1_open.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.pIcon01_ico_close{margin-right:2px; background: url(css/zTreeStyle/img/diy/1_close.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.pIcon02_ico_open, .ztree li span.button.pIcon02_ico_close{margin-right:2px; background: url(css/zTreeStyle/img/diy/2.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon01_ico_docu{margin-right:2px; background: url(css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon02_ico_docu{margin-right:2px; background: url(css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon03_ico_docu{margin-right:2px; background: url(css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon04_ico_docu{margin-right:2px; background: url(css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon05_ico_docu{margin-right:2px; background: url(css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon06_ico_docu{margin-right:2px; background: url(css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon07_ico_docu{margin-right:2px; background: url(css/zTreeStyle/img/diy/9.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon08_ico_docu{margin-right:2px; background: url(css/zTreeStyle/img/diy/9.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>
JS代码：
var setting = {
view: {
showLine: true,//不显示连接线，默认值true
showIcon:true,//是否显示节点的图标(包括父级的文件夹图标子级的文件图标都不显示)，默认值true
showTitle:true,//是否显示节点的title提示信息,默认为true（如果 setting.view.showTitle = true & setting.data.key.title = ''，zTree 会自动使用 setting.data.key.name 指定的节点名称当做 title）
//fontCss:个性化文字样式,JSON格式的数据
//fontCss: {'font-weight':'bold','color':'#058'}//统一设置样式
fontCss:getFontCss,//设置自定义的样式
nameIsHTML:true//设置name属性是否支持HTML脚本，默认值为false
},
data: {
simpleData: {
enable: true,//是否使用简单数据模式，默认为false,如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
idKey:"id",//节点数据中保存唯一标识的属性名称，默认值id，开启简单数据模式时有效
pIdKey:"pId",//节点数据中保存其父节点唯一标识的属性名称。默认值pId，开启简单数据模式时有效
rootPId:0//用于修正根节点父节点数据，即 pIdKey 指定的属性值,默认值为null，开启简单数据模式时有效
}
}
};
var zNodes=[
{"id":1,"pId":0,"name":"河北(使用icon自定义图标不同)",open:true,isParent:true,
iconOpen:"css/zTreeStyle/img/diy/1_open.png",
iconClose:"css/zTreeStyle/img/diy/1_close.png",
url:"http://www.baidu.com",target:"_blank"
},
{"id":2,"pId":1,"name":"石家庄(使用icon自定义图标相同)",open:true,icon:"css/zTreeStyle/img/diy/4.png"},
{"id":21,"pId":2,"name":"化皮镇",icon:"css/zTreeStyle/img/diy/2.png"},
{"id":22,"pId":2,"name":"承安镇",icon:"css/zTreeStyle/img/diy/3.png"},
{"id":23,"pId":2,"name":"正莫镇",icon:"css/zTreeStyle/img/diy/5.png"},
{"id":3,"pId":1,"name":"邯郸",url:"http://www.baidu.com",target:"_self",icon:"css/zTreeStyle/img/diy/6.png"},
{"id":4,"pId":1,"name":"保定",icon:"css/zTreeStyle/img/diy/7.png"},
{"id":5,"pId":1,"name":"沧州",icon:"css/zTreeStyle/img/diy/8.png"},
{"id":6,"pId":0,"name":"河南(使用iconSkin自定义图标不同)",open:true,isParent:true,iconSkin:"pIcon01"},
{"id":7,"pId":6,"name":"郑州",iconSkin:"icon01"},
{"id":8,"pId":6,"name":"开封",iconSkin:"icon02"},
{"id":9,"pId":6,"name":"洛阳",iconSkin:"icon03"},
{"id":10,"pId":6,"name":"南阳",iconSkin:"icon04"},
{"id":11,"pId":0,"name":"山东(使用iconSkin自定义图标相同)",open:true,isParent:true,iconSkin:"pIcon02"},
{"id":12,"pId":11,"name":"济南",iconSkin:"icon05"},
{"id":13,"pId":11,"name":"济宁",iconSkin:"icon06"},
{"id":14,"pId":11,"name":"淄博",iconSkin:"icon07"},
{"id":15,"pId":11,"name":"德州",iconSkin:"icon08"},
{"id":16,"pId":0,"name":"山西（使用默认图标）",open:true,isParent:true,font:{'font-weight':'bold','color':'#058'}},
{"id":17,"pId":16,"name":"太原",font:{'font-style':'italic'}},
{"id":18,"pId":16,"name":"大同", font:{'background-color':'black', 'color':'white'}},
{"id":19,"pId":16,"name":"朔州", font:{'color':'#058'}},
{"id":20,"pId":16,"name":"<span style='color:blue;margin-right:0px;'>阳</span><span style='color:red;margin-right:0px;'>泉</span>"},
{"id":21,"pId":16,"name":"吕梁（默认字体）"}
];
//该方法用来设置节点的样式
function getFontCss(treeId, node) {
return node.font ? node.font : {};
}
//该方法用来修改选中节点的信息
var nameCount = 0,iconCount = 1,color = [0, 0, 0];
function updateNode(e){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");//获取ztree对象
var type = e.data.type;
var nodes = zTree.getSelectedNodes();//获取选中的节点
if(nodes.length<=0){
alert("请先选择一个节点");
return false;
}
for (var i=0, l=nodes.length; i<l; i++) {
zTree.setting.view.fontCss = {};
switch(type){
case "name":{
nodes[i].name = nodes[i].name.replace(/_[\d]*$/g, "") + "_" + (nameCount++);
break;
}
case "icon":{
if (iconCount > 7) {
iconCount = 1;
nodes[i].iconSkin = "icon01";
} else if (nodes[i].isParent) {
nodes[i].iconSkin = nodes[i].iconSkin ? null : "pIcon01";
} else {
nodes[i].iconSkin = "icon0" + (iconCount++)+"";
}
break;
}
case "color":{
color = [0, 0, 0];
var r1 = Math.round(Math.random()*3 - 0.5);
color[r1] = 15;
var r2 = Math.round(Math.random()*3 - 0.5);
while (r2 === r1) {
r2 = Math.round(Math.random()*3 - 0.5);
}
color[r2] = Math.round(Math.random()*16-0.5);
zTree.setting.view.fontCss["color"] = "#"+color[0].toString(16)+color[1].toString(16)+color[2].toString(16);
break;
}
case "font":{
var style = $("#" + nodes[i].tId + "_a").css("font-style") ;
style = (style=="italic" ? "normal" : "italic");
zTree.setting.view.fontCss["font-style"] = style;
break;
}
}
zTree.updateNode(nodes[i]);
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
//为四个按钮绑定事件
$("#changeName").bind("click", {type:"name"}, updateNode);//重命名
$("#changeColor").bind("click", {type:"color"}, updateNode);//换颜色
$("#changeIcon").bind("click", {type:"icon"}, updateNode);//换图标
$("#changeFont").bind("click", {type:"font"}, updateNode);//倾斜
});
上一篇： 源田实生平事迹 源田不为人所知的另一面
下一篇： 进步的原因