开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery,tree无限级树形菜单+简单实用案例

简介:
+关注继续查看

jquery,tree无限级树形菜单+简单实用案例

我在项目中用到产品类别的树形。各种地方都要用。 我就封装起来,方便以后调用。

记录下来,希望给新手们提供帮助。要记得导入jquery.js  tree.js 哦


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <link rel="stylesheet" type="text/css" href="page/plugin/zTree/zTreeStyle/zTreeStyle.css"/> <script type="text/javascript" src="page/js/jquery.ztree-2.6.min.js"></script>  <div id="goodsCategoryTree" class="tree"></div> <input type="hidden" id="goodsCategoryTreeSelect" name="goodsCategoryTreeSelect"/> <input type="hidden" id="goodsCategoryTreeSelectName" name="goodsCategoryTreeSelectName"/> <script> var goodsCategoryTree; var treeNodes = eval('(${web.goodsCategoryJson})');//为节点进行json赋值  function getCheckTreeNode(event, treeId, treeNode){//获取选中节点id,name 	var tId = treeNode.cateID; 	var name = treeNode.cateName; 	$("#goodsCategoryTreeSelect").val(tId); 	$("#goodsCategoryTreeSelectName").val(name); 	$("#goodsCategoryTreeSelect").focus(); } var setting = {//参数设置 	isSimpleData : true,              //数据是否采用简单 Array 格式,默认false 	treeNodeKey : "cateID",               //在isSimpleData格式下,当前节点id属性 	nameCol : "cateName", 	treeNodeParentKey : "parentCateID",        //在isSimpleData格式下,当前节点的父节点id属性 	showLine : true,                  //是否显示节点间的连线 	checkable : false,                  //每个节点上是否显示 CheckBox 	callback : { 		click: getCheckTreeNode 	} }; goodsCategoryTree = $("#goodsCategoryTree").zTree(setting, treeNodes);//初始化树形  </script> 

Json 数据字符串
web.goodsCategoryJson =  [{"cateID":"05E19A7462A148709CE295CA2295BD7E","cateName":"计算机","parentCateID":"43242"},{"cateID":"43242","cateName":"电器","parentCateID":"1"},{"cateID":"43243","cateName":"服装1","parentCateID":"1"},{"cateID":"43244","cateName":"女装","parentCateID":"43243"},{"cateID":"43245","cateName":"根目录","parentCateID":"43243"},{"cateID":"43246","cateName":"根目录6","parentCateID":"43244"},{"cateID":"43247","cateName":"根目录7","parentCateID":"43245"},{"cateID":"43248","cateName":"根目录8","parentCateID":"43246"},{"cateID":"43249","cateName":"根目录9","parentCateID":"43247"},{"cateID":"43250","cateName":"根目录0","parentCateID":"43248"},{"cateID":"43251","cateName":"根目录1","parentCateID":"43249"},{"cateID":"43252","cateName":"根目录2","parentCateID":"43250"},{"cateID":"43253","cateName":"根目录3","parentCateID":"2"},{"cateID":"1","cateName":"通用分类","parentCateID":"-1"},{"cateID":"2","cateName":"频道分类","parentCateID":"-1"}]




      本文转自yjflinchong 51CTO博客,原文链接:http://blog.51cto.com/yjflinchong/1165072,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细。 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课。开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多。这里我把我
2703 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1018 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
940 0
jquery ztree的案例,附源代码
播客:http://itindex.net/detail/46094-jquery-ztree-%E7%A8%8B%E5%BA%8F   源代码: http://download.csdn.net/download/nuptboyzhb/6347025   如果你没有csdn账号,请在百度网盘下载,版权归原作者,这里只是学习传播。
619 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载