jQuery递归实现菜单无限级

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

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

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


  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  3. <link rel="stylesheet" type="text/css" href="page/plugin/zTree/zTreeStyle/zTreeStyle.css"/>  
  4. <script type="text/javascript" src="page/js/jquery.ztree-2.6.min.js"></script>  
  5.   
  6. <div id="goodsCategoryTree" class="tree"></div>  
  7. <input type="hidden" id="goodsCategoryTreeSelect" name="goodsCategoryTreeSelect"/>  
  8. <input type="hidden" id="goodsCategoryTreeSelectName" name="goodsCategoryTreeSelectName"/>  
  9. <script>  
  10. var goodsCategoryTree;  
  11. var treeNodes = eval('(${web.goodsCategoryJson})');//为节点进行json赋值   
  12. function getCheckTreeNode(event, treeId, treeNode){//获取选中节点id,name  
  13.     var tId = treeNode.cateID;  
  14.     var name = treeNode.cateName;  
  15.     $("#goodsCategoryTreeSelect").val(tId);  
  16.     $("#goodsCategoryTreeSelectName").val(name);  
  17.     $("#goodsCategoryTreeSelect").focus();  
  18. }  
  19. var setting = {//参数设置  
  20.     isSimpleData : true,              //数据是否采用简单 Array 格式,默认false  
  21.     treeNodeKey : "cateID",               //在isSimpleData格式下,当前节点id属性  
  22.     nameCol : "cateName",  
  23.     treeNodeParentKey : "parentCateID",        //在isSimpleData格式下,当前节点的父节点id属性  
  24.     showLine : true,                  //是否显示节点间的连线  
  25.     checkable : false,                  //每个节点上是否显示 CheckBox  
  26.     callback : {  
  27.         click: getCheckTreeNode  
  28.     }  
  29. };  
  30. goodsCategoryTree = $("#goodsCategoryTree").zTree(setting, treeNodes);//初始化树形  
  31.   
  32. </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"}]
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值