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"}]
分享到:
相关推荐
s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单
jquery实现无限级树形菜单特效源码.zip
jQuery Simple Tree Ajax无限级树形菜单插件php版 兼容性非常好,可异步加载,支持拖拽。插件本身只支持HTML节点加载的,网上有人进行扩展了,用了JSON,不过个人感觉这对速度影响实在微乎其微,还是直接封装出HTML...
jquery实现的小巧简洁的无限级树形菜单,可用于后台或前台侧栏菜单!兼容性也比较好。
jquery实现的小巧简洁的无限级树形菜单,可用于后台或前台侧栏菜单!兼容性也比较好。
jQuery无限级ajax加载树形菜单代码,通过ajax调用方法异步获取json数据内容生成无限级树形菜单,可自定义编辑添加菜单项。
本文实例为大家分享了基于jquery实现无限级树形菜单效果,具有一定的参考价值,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb...
主要介绍了json+jQuery实现的无限级树形菜单效果代码,涉及jquery针对json数据的遍历、读取及动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
兼容性非常好,可异步加载,支持拖拽。插件本身只支持HTML节点加载的,网上有人进行扩展了,用了JSON,不过个人感觉这对速度影响实在微乎其微,还是直接封装出HTML代码的。压缩包内有原版Json过的
jQuery多级无限级导航下拉菜单
代码来源于我近期的一个项目,点击树形菜单右侧iframe链接的pdf出现变换
jQuery多级无限级导航下拉菜单代码, jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。 js代码 [removed] $(document).ready(function() { $("ul.nav li").hover...
一个基于jQuery的简单树形菜单
好久没用S2SH做东西了,闲来没事做了一个jQuery Tree 的Demo 支持无限级分类,异步加载数据,通过这个小程序可以了解一下jQuery动态加载数据的技巧,顺便复习了一下S2SH(struts2+spring+hiber)。
全网jquery.tree树形菜单打包下载(zTree&jquery-ui&treeview共四种)
jQuery无限级树菜单网页特效
快速上手Jquery树形菜单 jquery树形菜单例子 树形菜单 jquery jquery插件