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

时间：2015-07-09 11:17:28 阅读：164 评论：0 收藏：0 [点我收藏+]

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

记录下来，希望给新手们提供帮助。要记得导入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"}]

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

标签：android

原文地址：http://blog.csdn.net/u013948191/article/details/46813619

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行