<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Standard Data </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="css/demo.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.4.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.4.js"></script>
<SCRIPT type="text/javascript">
var setting = {
check:{
enable:true
},
data: {
simpleData:{
enable:true
}
},
callback:{
onCheck:onCheck
}
};
var zNodes =[
{ id:1, pId:0, name:"随意勾选 1", open:false},
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"随意勾选 1-1-1"},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"随意勾选 1-2", open:true},
{ id:121, pId:12, name:"随意勾选 1-2-1"},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2", open:false},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1"},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-13"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
nodes=treeObj.getCheckedNodes(true),
v="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";
alert(nodes[i].id); //获取选中节点的值
}
}
</SCRIPT>
</HEAD>
<BODY>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>
相关推荐
本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下： 由于刚接触Tree方面的东西。在网上看到了zTree，是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用...
例如，如果我们想要获取当前选中节点的所有子节点（包括自身），可以这样使用： ```javascript var childNodes = ztree.transformToArray(selectedNodes[0]); ``` 这里，`selectedNodes[0]`表示获取选中的第一个...
当用户点击某个节点时，ZTree会触发这个事件，并将当前选中的节点对象作为参数传递，我们可以利用这个节点对象获取或更新节点数据。 3. 弹出层的实现 弹出层通常通过模态对话框、浮层或者Bootstrap的Modal组件来...
### 获取zTree节点数据 #### 知识点概述 本文主要介绍如何在JavaScript环境中通过zTree插件获取选中的树节点数据。zTree是一款基于jQuery的树形控件，广泛应用于展示具有层次结构的数据集。在很多场景下，我们需要...
在本文中，我们将深入探讨如何使用jQuery插件zTree实现单独选中根节点中的第一个节点。zTree是一款功能丰富的jQuery树形控件，它能够帮助开发者轻松创建交互式的树状结构，广泛应用于网站导航、组织架构展示等领域。...
【jQuery插件zTree】是用于构建交互式树形...总的来说，jQuery插件zTree提供了一种高效且灵活的方式来构建和操作树形结构，并且通过自定义函数，我们可以轻松地实现清空选中节点子节点等特定需求，从而提高用户体验。
本文实例讲述了jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法。分享给大家供大家参考，具体如下： 1、实现代码： <!DOCTYPE html> <html> <head> <title>zTree实现基本树</...
在使用 zTree 这个基于 jQuery 的多功能树插件时，可能会遇到一些问题，比如“ztree获取选中节点时不能进入可视区域出现BUG”。这个问题通常发生在试图获取选中的节点时，由于滚动条或者节点的位置原因，使得节点...
在JavaScript前端开发中，ZTREE是...了解以上知识点后，你应该能够有效地在后台获取ZTREE选中节点的信息，结合实际业务需求，进行更复杂的数据处理和交互。记住，良好的前端与后端通信是提高用户体验和系统效率的关键。
总结来说，要在父页面中获取`<iframe>`内zTree的已选中节点，关键在于正确地跨窗口引用并调用zTree对象的方法。这要求对JavaScript的DOM操作、`<iframe>`的使用以及zTree的API有深入理解。理解并掌握这个过程，对于...
4. **事件监听与数据更新**：ZTree提供了丰富的事件监听机制，如`onClick`、`onCheck`等，允许我们在节点被点击或被选中时触发相应的后台操作。同时，当后台数据发生改变时，可以通过重新加载数据或局部刷新节点来...
总的来说，zTree提供了强大的节点操作功能，通过其API和数据结构，我们可以轻松获取节点的子节点数量。在上述代码中，`findNodes`函数是一个很好的实践，它简洁且高效地解决了获取当前节点下一级子节点数的问题。在...
如果数据缺少`pId`，ZTree可能会默认所有节点都是根节点。检查你的数据结构，确保每个节点都有正确的父节点引用。 3. **添加节点方法**：使用ZTree的API如`addNode` 添加新节点时，需要正确指定父节点。例如，如果...
- `getSelectedTreeId()`：获取选中节点的ID数组。 - `getNodeByParam()`：通过指定参数查找节点。 4. **数据操作**： - `asyncNode()`：异步加载子节点数据。 - `addNodes()`：添加新的子节点。 - `...
通过配置数据参数，我们可以定制树的展示方式，包括节点的展开、收起、选中等行为。在实现模糊查询功能时，我们需要关注的是ZTree的`filter`方法。这个方法允许我们在用户输入关键词后，实时过滤树中的节点，只显示...
除了上述基本操作，ZTree还提供了许多其他功能，如节点的展开/折叠、全选/全取消选择、获取选中节点、获取父节点等。这些操作都通过对应的API接口完成，例如： - `treeObj.expandNode(node, isExpand, isSilent, ...