<!DOCTYPE html> <body> <div id="menuTrees2" class="ztree ztree-border"></div> <div id="menuTrees" class="ztree ztree-border"></div> </body> <script> //屏蔽区域树 $(function() { var url = ctx + "jcy/ssqx/roleMenuTreeData?xqdid=" + $("#xqdid").val(); var options = { id: "menuTrees", url: url, check: { enable: true,chkboxType: {"Y": "", "N": ""} }, expandLevel: 0, }; $.tree3.init(options); }); //所属区域树 $(function() { var url = ctx + "jcy/ssqx/roleMenuTreeData?xqdid=" + $("#xqdid").val(); var options = { id: "menuTrees2", url: url, check: { enable: true,chkboxType: {"Y": "", "N": ""} }, expandLevel: 0, onCheck : zOnClick }; $.tree.init(options); }); </script>如何从两个ztree中获取勾选中的节点
时间: 2023-07-08 19:47:35 浏览: 105
您可以在用户进行勾选操作后,在 zOnClick 回调函数中使用以下代码从两个ztree中获取勾选中的节点:
```
function zOnClick(event, treeId, treeNode) {
var ssqyids = $.fn.zTree.getZTreeObj("menuTrees").getCheckedNodes();
var xqdssqyids = $.fn.zTree.getZTreeObj("menuTrees2").getCheckedNodes();
// 在这里处理获取到的节点数据
}
```
在上述代码中,"menuTrees" 和 "menuTrees2" 分别是两个ztree的 ID,可以根据实际情况进行替换。使用 $.fn.zTree.getZTreeObj() 方法获取 ztree 对象,然后调用 getCheckedNodes() 方法获取勾选中的节点。最后,将结果保存到变量 ssqyids 和 xqdssqyids 中。请注意,获取勾选中的节点应该在用户进行勾选操作之后,在 zOnClick 回调函数中获取。
相关问题
<!DOCTYPE html> <body> <div id="menuTrees2" class="ztree ztree-border"></div> <div id="menuTrees" class="ztree ztree-border"></div> </body> <script> //屏蔽区域树 $(function() { var url = ctx + "jcy/ssqx/roleMenuTreeData?xqdid=" + $("#xqdid").val(); var options = { id: "menuTrees", url: url, check: { enable: true,chkboxType: {"Y": "", "N": ""} }, expandLevel: 0, }; $.tree3.init(options); }); //所属区域树 $(function() { var url = ctx + "jcy/ssqx/roleMenuTreeData?xqdid=" + $("#xqdid").val(); var options = { id: "menuTrees2", url: url, check: { enable: true,chkboxType: {"Y": "", "N": ""} }, expandLevel: 0, }; $.tree.init(options); }); </script> 如何从两个ztree中获取勾选中的节点
您可以使用以下代码从两个ztree中获取勾选中的节点:
```javascript
//获取屏蔽区域树勾选中的节点
var checkedNodes1 = $.fn.zTree.getZTreeObj("menuTrees").getCheckedNodes(true);
//获取所属区域树勾选中的节点
var checkedNodes2 = $.fn.zTree.getZTreeObj("menuTrees2").getCheckedNodes(true);
```
其中,"menuTrees"和"menuTrees2"分别是两个ztree的ID,"getCheckedNodes(true)"表示只获取勾选中的节点。获取到的节点信息将保存在一个数组中,您可以对其进行进一步的处理。
ztree插件
### zTree 插件简介及其使用方法
zTree 是基于 jQuery 的多功能树形结构插件,具有高性能、灵活配置以及丰富的功能组合等特点[^3]。以下是有关其核心文件、下载方式及基本使用的详细介绍。
#### 核心文件
zTree 插件的核心依赖主要包括以下几个部分:
- **jquery.ztree.core.js**: 提供基础功能支持。
- **jquery.ztree.excheck.js**: 支持复选框/单选按钮的功能扩展。
- **jquery.ztree.exedit.js**: 支持编辑操作(如增删改节点)的功能扩展。
此外,还需要引入 CSS 文件用于定义样式[^4]。
#### 下载途径
官方文档推荐通过官网或者第三方资源站点获取最新版本的 zTree 插件。通常情况下,可以从以下地址找到所需资源:
- 官方 Demo 和 API 文档:`http://www.treejs.cn/v3/demo.php#_101`
- GitHub 地址或其他开源平台也可能提供最新的源码包[^1]。
#### 基础使用教程
为了快速上手 zTree 插件,可以按照如下方式进行初始化:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zTree Example</title>
<!-- 引入必要的CSS -->
<link rel="stylesheet" href="css/zTreeStyle.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入zTree核心JS -->
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
</head>
<body>
<div id="treeDemo" class="ztree"></div>
<script type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
}
};
var zNodes = [
{ id:1, pId:0, name:"父节点 1"},
{ id:11, pId:1, name:"子节点 1-1"},
{ id:12, pId:1, name:"子节点 1-2"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</body>
</html>
```
上述代码展示了如何加载并渲染一棵简单的树状结构。
---
阅读全文
相关推荐















