$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
//获取含有.tab的所有table对象
var tt = $(".tab");
tt.each(function(i,n){
var aId = $("#"+n.id).parent().attr("id");
var liId = aId.split("_span")[0];
//table的高度,用于计算该table紧跟的下个节点的位置。
var tabHeight = $("#"+liId).find("table").height();
/**
var offset = tabHeight - 18 + 6;
此偏移量为table的下个节点的位置相对于table的偏移像素
*/
var offset = tabHeight - 12 ;
var nextNodeId = $("#"+liId).next().attr("id");
//存在同级的节点情况
if(nextNodeId){
$("#" + nextNodeId).attr("style","padding-top: " + offset + "px");
return;
}else{
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getNodeByTId("treeDemo_8");
var fatherNode = treeObj.getNodeByTId(node.getParentNode().tId);
var nextFatherNodeId = fatherNode.getNextNode().tId;
$("#" + nextFatherNodeId).attr("style","padding-top: " + offset + "px");
}
});
});
分享到:
相关推荐
2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox...
8. **API接口**:zTree提供了一系列的JavaScript API接口,开发者可以通过调用这些接口来实现与zTree的交互,如获取选中节点、获取父节点等。 总的来说,zTree_v3是一个强大而全面的jQuery树插件,无论是对于新手...
jquery-ztree-2.5.js
zTree_v3是一款专为创建高效、美观、可定制的树形菜单而设计的JavaScript库,相较于传统的dtree,它在功能、性能和用户体验上都有显著提升。本文将详细介绍zTree_v3的核心特点和优势,以及如何利用其创建出优秀的树...
《ztree-JS-CSS:后台资源展示页的核心技术解析》 在网页开发中,后台资源的展示是一项关键任务,而ztree作为一个优秀的JavaScript库,专门用于构建树形结构的界面,尤其适用于后台资源管理。"ztree-JS-CSS"这个...
在【zTree-zTree_v3-各种tree的使用大全(带搜索)】这个压缩包中,包含了zTree_v3的完整源码和相关示例,为开发者提供了全面了解和使用zTree_v3的功能。 1. **zTree_v3的核心特性** - **灵活的配置**:zTree_v3支持...
1. **引入库**:首先,你需要在HTML文件中引入Bootstrap、Select2 和 ZTree 相关的CSS和JS文件。确保正确放置这些文件,以保证正常加载。 2. **HTML结构**:创建一个基本的HTML结构,包含一个Bootstrap的`<select>`...
官网zTree -- jQuery 树插件 官网压缩包 学习起来很方便,版本 3.x 基本来说没有要求,zTree 在开发中使用 jQuery 11111.4.4;目前简单测试过 jQuery 1.3+ 应该都能正常使用
ztree是一个广泛使用的JavaScript树形插件,而ztree-select则是其在下拉选择器场景中的延伸应用,尤其适用于需要展示多级分类数据的Web应用。 ztree的基础功能包括但不限于: 1. **层级展示**:ztree可以清晰地...
无刷新地对树节点进行操作JQuery zTree v2.5\jquery-ztree-2.5.js
在本案例中,我们关注的是`ZTree`的一个特定应用场景:`ztree-select`,即基于ZTree的下拉选择框。 `ztree-select`是`ZTree`的一个扩展,它将传统的下拉框与树形结构相结合,形成一种更直观、更灵活的选择方式。...
在压缩包"zTree-zTree_v3-7b4dfb8"中,我们可以找到zTree的源码、示例、文档等相关文件。源码部分可以帮助开发者深入理解zTree的工作原理,对其进行二次开发或定制;示例文件则展示了如何在实际项目中应用zTree的...
1. 引入依赖:首先需要引入jQuery库和zTree的CSS、JS文件。 2. HTML结构:创建基本的HTML结构,通常是一个`<ul>`元素作为树的基础容器。 3. 初始化配置:设置zTree的初始化参数,包括节点数据、显示样式、行为设置等...
2. JavaScript文件:主要为`jquery.ztree.core.js`和`jquery.ztree.excheck.js`,前者是ZTree的基础核心,后者则扩展了复选框功能。 3. 图标资源:可能包含`.png`或`.svg`格式的图标文件,用于表示节点的状态(如...
1. 引入必要的库文件:Bootstrap CSS、jQuery、zTree核心JS和Bootstrap风格的zTree CSS。 2. 配置HTML结构,包含一个`ul`元素作为zTree的基础容器。 3. 初始化zTree,设置相关参数,例如: ```javascript $...
2. **多态展现**:zTree可以呈现多种形态的树形结构,如单选、多选、半选等,满足不同场景下的需求。 3. **事件监听**:zTree提供了丰富的事件监听机制,包括点击、展开、收缩、选择等,方便开发者对用户的交互行为...
今天,我们将深入探讨如何利用Select2和jQuery-ZTree这两个强大的JavaScript库,构建功能丰富的树形下拉框。这种组件在数据层次结构展示、多级选择等方面有着广泛的应用,如在系统配置、权限管理等场景中。 首先,...
《jQuery-zTree API v2.6详解:打造高效前端树形组件》 在网页开发中,数据的组织和展示方式多种多样,其中树形结构因其层次清晰、逻辑明确的特点,常用于目录管理、组织架构展示等领域。jQuery-zTree是一款基于...