Z-tree实例（六）——连接线、图标、字体样式

wjiaoling136

浏览: 957430 次
性别:
来自: 北京

最近访客更多访客>>

747017186

chajinglong

1017401036

温开水

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

z-tree

ztree 连接线图标字体设置 iconSkin

主要琢磨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);//倾斜
});

分享到：

使用Navicat for Oracle工具连接oracle | 二维码学习（四）：使用jquery生成二维码

2016-08-16 15:11
浏览 6512
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Z-tree实例（六）——连接线、图标、字体样式

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Z-tree实例（六）——连接线、图标、字体样式

评论

发表评论

相关推荐

Z-tree实例（五）——复选框

Z-tree实例（四）——父节点展开、折叠

Z-tree实例（三）——callback与重新加载、追加

z-tree实例（二）——异步加载

Z-tree实例（一）——简单实例

最近访客更多访客>>