天天看點

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" target="_blank" rel="external nofollow" />  
<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>