zTree：JQuery树形插件使用示例
最近在做一个Web平台，其中想用一个树形展示。上网搜了搜基于JQuery的树形插件还真不少，最后选定zTree。关于zTree这里只是简单给出一个使用的示例。
首先声明zTree的配置信息，然后声明zTree的节点信息，最后初始化zTree。
下面给出一个示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zTree Deom</title>
<link rel="stylesheet" type="text/css" href="css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//配置zTree
var setting = {
view: {
showLine: false,
expandSpeed: "slow"
}
};
//zTree节点数据
var treeNodes = [
{
name: "手机",
children: [
{
name: "诺基亚",
children: [
{name: "Lumia"},
{name: "NokiaX"},
{name: "Asha"},
]
},
{name: "三星"},
{name: "索爱"},
{name: "华为"}
]
},
{
name: "电脑",
children: [
{name: "联想"},
{name: "惠普"},
{name: "华硕"},
{name: "宏碁"}
]
}
];
//初始化zTree
var tree = $("#tree");
tree = $.fn.zTree.init(tree, setting, treeNodes);
});
</script>
</head>
<body>
<div style="margin: 0 auto">
<ul id="tree" class="ztree"></ul>
</div>
</body>
</html>结果如图：
其中对zTree图标的改变可在节点信息（上面示例中的treeNodes中通过属性进行改变）中改变，但是这样改变的是某个节点的图标。通过修改CSS样式表可以达到统一修改图标的目的。
打开zTreeStyle.css（zTree默认的的样式文件）进行自定义图标的修改。其中CSS涉及到的原图使用了CSS Sprites技术，我们只需要修改我们想要改变的样式，其它的可以不用去管。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2014年09月15日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读