zTree：JQuery树形插件使用示例

来源：互联网发布：如何p图淘宝评价管理编辑：程序博客网时间：2024/06/06 08:44

最近在做一个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() {//配置zTreevar 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: "宏碁"}]}];//初始化zTreevar 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技术，我们只需要修改我们想要改变的样式，其它的可以不用去管。

0 0