zTree实现基本树

1、实现源码

<!DOCTYPE html>
<html>
<head><title>zTree实现基本树</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="../../../css/demo.css"><link rel="stylesheet" type="text/css" href="../../../css/zTreeStyle/zTreeStyle.css"><script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script><script type="text/javascript"><!--var setting = {data: {simpleData: {enable: true}}};var zNodes =[{ id:1, pId:0, name:"湖北省", open:true},{ id:11, pId:1, name:"武汉市", open:true},{ id:111, pId:11, name:"汉口"},{ id:112, pId:11, name:"汉阳"},{ id:113, pId:11, name:"武昌"},{ id:12, pId:1, name:"黄石市"},{ id:121, pId:12, name:"黄石港区"},{ id:122, pId:12, name:"西塞山区"},{ id:123, pId:12, name:"下陆区"},{ id:124, pId:12, name:"铁山区"},{ id:13, pId:1, name:"黄冈市"},{ id:2, pId:0, name:"湖南省", open:true},{ id:21, pId:2, name:"长沙市", open:true},{ id:211, pId:21, name:"芙蓉区"},{ id:212, pId:21, name:"天心区"},{ id:213, pId:21, name:"岳麓区"},{ id:214, pId:21, name:"开福区"},{ id:22, pId:2, name:"株洲市"},{ id:221, pId:22, name:"天元区"},{ id:222, pId:22, name:"荷塘区"},{ id:223, pId:22, name:"芦淞区"},{ id:224, pId:22, name:"石峰区"},{ id:23, pId:2, name:"湘潭市"},{ id:231, pId:23, name:"雨湖区"},{ id:232, pId:23, name:"岳塘区"},{ id:233, pId:23, name:"湘乡市"},{ id:234, pId:23, name:"韶山市"}];$(document).ready(function(){$.fn.zTree.init($("#baseTree"), setting, zNodes);});/*** 获取选中节点的编码和名称*/function findSelect(){var treeObj = $.fn.zTree.getZTreeObj("baseTree");var nodes = treeObj.getSelectedNodes();for(var i=0;i<nodes.length;i++){var nodeId = nodes[i].id;var nodeName = nodes[i].name;alert("树节点编码："+nodeId+"\n"+"树节点名称："+nodeName);}}//--></script></head><body>
<div class="content_wrap"><div class="zTreeDemoBackground left" style="text-align: center;"><ul id="baseTree" class="ztree" style="height: 300px; width:200px; overflow-y: auto"></ul><input type="button" id="btn" οnclick="findSelect()" value="获取选中节点"/></div>
</div>
</body>
</html>

2、设计结果

（1）初始化

（2）单击按钮

3、设计说明

获取 zTree 当前被选中的节点数据集合

var treeObj = $.fn.zTree.getZTreeObj("baseTree");
var nodes = treeObj.getSelectedNodes();

zTree实现基本树相关推荐

zTree实现删除树节点
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! zTre ...
【原创】MVC+ZTree实现权限树的功能
2.html代码权限树: 3.JS代码 var setting = { async: { enable: true, url: '/RoleToPerssion/GetPerssionTree',/ ...
ztree 实现表格树
ztree节点固定显示用户自定义控件,转载的出处:http://www.jb51.net/article/124698.htm <!DOCTYPE HTML> <html>&l ...
不一样的ZTree，权限树.js插件
每一个有趣的创新,都源于苦逼的生活. 在最近的工作中,遇到一个做权限管理筛选的需求. 简单总结需求: 1展示一个组织中的组织结构 2通过点击组织结构中的任意一个节点可以向上向下查询对应的组织结构如果 ...
ztree 自定义参数_zTree树插件使用方法及自定义控件实践_蓝戒的博客
zTree简介: zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 实践版本:zTree-verso ...
zTree实现单独选中根节点中第一个节点
zTree实现单独选中根节点中第一个节点 1.实现源代码 <!DOCTYPE html> <html> <head><title>zTree实现基本树& ...
【zTree】基于zTree动态生成树节点的一些应用
最近项目中需要用到zTree动态构建树节点,实现树节点的增删改查,以及点击树节点展示树节点对应的页面.趁着这个机会把zTree的用法大概看了一遍,代码示例见我的Github:基于zTree动态生成树节 ...
android ztree,ztree实现权限功能（横向显示）
最近在做权限功能的时候,采用的ztree实现的,但是产品要求最后一层的权限节点要横向显示.开始在网上找的解决方案是用css样式把最后一层的display设置为inline.在我本地电脑上看了下.效果不 ...
Web中树形数据(层级关系数据)的实现—以行政区树为例
在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...

zTree实现基本树

zTree实现基本树相关推荐

最新文章

热门文章