大家常常看到一些树形菜单,那么它是怎么编写的呢?这篇文章带你快速认识如何编写一个树形菜单。
下面这幅图是
详细步骤:
1、下载ztree 插件包 ,解压 。
下载地址:http://www.treejs.cn/v3/main.php#_zTreeInfo
解压后目录构造图:
js文件打开有个jquery.ztree.all-3.5.min.js(会有版本号,详细看你下载的哪个版本的ztree)。一样平常情形下引入它一个就足够了。all 所有功能 == core 核心功能 + excheck 勾选功能 + exedit 编辑功能 + exhide 隐蔽功能
2、在页面中引入 ztree
<script src=\"大众../js/ztree/jquery.ztree.all-3.5.js\公众type=\公众text/javascript\"大众 charset=\"大众utf-8\公众></script>
<link rel=\"大众stylesheet\公众 type=\公众text/css\"大众 href=\"大众../js/ztree/zTreeStyle.css\"大众/>
(
3、 通过 ztree 制作树形菜单
两种数据格式
1) 标准 json 数据
2)大略 json 数据
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 。
由于标准json数据格式对付父子节点多的情形下,嵌套过于麻烦。利用的大多是大略json数据,由于只有一层嵌套,方便编写。下面是利用大略json格式天生树的步骤。
第一步:在页面显示菜单位置,添加 <ul>设置 class=”ztree” 。
第二步:开启大略数据格式支持。
第三步:编写树形菜单数据。
第四步:天生树形菜单
全部代码如图:
结果:
关注小编,每天学习一点点。不积跬步,无以至千里;不积小流,无以成江海。