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>