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"}]