zTree:JQuery树形插件使用示例

news/2024/11/6 14:31:11/

最近在做一个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技术,我们只需要修改我们想要改变的样式,其它的可以不用去管。


http://www.ppmy.cn/news/254371.html

相关文章

Linux日志

rsyslog系统日志管理 哪类程序产生的什么日志放到什么地方 处理日志的进程 第一类&#xff1a; rsyslogd&#xff1a;系统专职日志程序&#xff0c;处理绝大部分日志记录&#xff0c;系统操作相关的信息&#xff0c;如登录信息&#xff0c;程序启动关闭相关信息&#xff0c…

java设计模式(十四)模板方法

目录 定义模式结构角色职责代码实现适用场景优缺点 定义 模板方法模式(Template Method Pattern)&#xff0c;又叫模板模式(Template Pattern)&#xff0c; 指在一个抽象类公开定义了执行它的方法的模板。它的子类可以按需要重写方法实现&#xff0c;但调用将以抽象类中定义的…

【android】反编译工具以及使用方式分步骤描述

以下是对常见 Android 反编译工具的使用方式分步骤描述&#xff1a; Apktool 的使用方式&#xff1a; 步骤一&#xff1a;下载并安装 Apktool&#xff0c;可以从官方网站&#xff08;https://ibotpeaches.github.io/Apktool/&#xff09;下载最新版本的 Apktool。 步骤二&am…

$2$驱动模块

目录 1.驱动模块&#xff08;驱动程序的框架&#xff09; 2.内核中的打印函数&#xff08;编写第一个驱动程序&#xff09; Source Insight 使用&#xff1a; 打印函数编写 分析 3.驱动的多文件编译 4.模块传递参数 安装好驱动之后如何传参&#xff1f; 多驱动之间调用…

用anaconda3安装tensorflow的gpu版(显卡是gtx770,操作系统是window7,cuda9.0,cudnn9.0-v7.2)

虽然快毕业了&#xff0c;但是还是想玩玩深度学习&#xff0c;搞了块gtx770随便玩一下。 1.官网下载最新版的anaconda3 2.下载cuda9.0 (之前一直在纠结是否需要vs&#xff0c;问过朋友之后&#xff0c;表示其实不需要。可能需要一些特殊功能的时候需要&#xff0c;这个以后碰…

最新CPU、显卡性能天梯图

最新最全版&#xff1a; 台式CPU性能天梯图 台式显卡性能天梯图 笔记本CPU性能天梯图 笔记本显卡性能天梯图

计算机桌面性能3.3,显卡天梯图2018年3月最新版 三月桌面显卡性能排行 (全文)

伴随着AMD八代APU、NVIDIA网吧特供GTX1060 5G吃鸡显卡上市&#xff0c;新一期的显卡天梯图2018年3月版又与大家见面了。由于近段时间NVIDIA和AMD并没有上市新显卡&#xff0c;因此三月桌面显卡天梯图相比一月版变化也不大&#xff0c;仅供参考吧。 显卡天梯图2018年3月最新版 显…

【分享】2010最新笔记本显卡性能排名总表

以下排名整理自国外网站&#xff0c;以性能排名&#xff0c;越往前性能越好 第一梯队&#xff1a;高端显卡 GeForce GTX 280M SLI Mobility Radeon HD 4870 X2 GeForce GTX 260M SLI GeForce 9800M GTX SLI GeForce GTX 280M GeForce 9800M GT SLI GeForce 9800M GTS SLI Mobil…