zTree第二次
需要注意的是：动态生成的树节点数据不是在后面拼接的，而是直接在done里面
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
<!-- 分别导入jquery，zTree的两个js文件，其中excheck是显示复选框一定要有的 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
</head>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
<input id="btn1" value="获取选中节点id" type="button"/>
</div>
<script>
var treeNodes = [];
$(function(){
$.ajax({
url: "http://127.0.0.1:8081/uris",
type: "GET",
dataType: "json"
}).done(function(result){ var da = result.data;
for (var i = 0; i < da.length;i ++) {
var node = {};
node.id=da[i].id;
node.superiorsId=da[i].superiorsId;
node.uriName=da[i].uriName;
if (da[i].id===112) {
node.checked="true";
}
treeNodes.push(node);
}
// 树是在done里面生成,而不是在后面,这个ready写在此处
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,treeNodes)
});
console.log(treeNodes);
})
})
var zTreeObj;
// function ajaxDataFilter(treeId,parentNode,responseData) {
// return responseData.data;
// }
var setting = {
// 开启复选框,其他不写就都是默认
check: {
enable: true
},
// name:"uriName"和取别名差不多
data: {
key:{
name:"uriName"
},
// 开启简单数据,其他默认
// idKey:"id",pIdKey:"superiorsId"也差不多是取别名
simpleData: {
enable: true,
idKey: "id",
pIdKey: "superiorsId",
rootPId: 0
}
}
} // 点击按钮后获取选中的数据
$("#btn1").on("click", function(){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo");
var nodes=treeObj.getCheckedNodes(true);
for(var i=0;i<nodes.length;i++){
console.log(nodes[i].id);
}
})
</script>
</BODY>
</HTML>
如果不是要一开始默认选中，而只是显示树节点，可以用更简单的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript" src="jquery.ztree.core.js"></script>
<script type="text/javascript" src="jquery.ztree.excheck.js"></script>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
<input id="btn1" value="获取选中节点id" type="button"/>
</div> <script>
var treeNodes = "";
$(function(){
$.ajax({
url: "http://127.0.0.1:8081/uris",
type: "get",
dataType: "json"
}).done(function(result){
console.log(result.data);
treeNodes = result.data;
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,treeNodes)
}); })
}) var zTreeObj;
var setting = {
// 开启复选框,其他不写就都是默认
check: {
enable: true
},
// name:"uriName"和取别名差不多
data: {
key:{
name:"uriName"
},
// 开启简单数据,其他默认
// idKey:"id",pIdKey:"superiorsId"也差不多是取别名
simpleData: {
enable: true,
idKey: "id",
pIdKey: "superiorsId",
rootPId: 0
}
}
} $("#btn1").on("click", function(){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo");
var nodes=treeObj.getCheckedNodes(true);
for(var i=0;i<nodes.length;i++){
console.log(nodes[i].haveSuperiors);
}
})
</script>
</body>
</html>
zTree第二次的更多相关文章
- zTree第二章，各种常见setting设置和方法
具体详见API文档: http://www.treejs.cn/v3/api.php --------------------------------------------------------- ...
- 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh（复习） 4、 SpringData-JPA持久层入门案例（重点） 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用
1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...
- 第二篇：怕碰到是因为没掌握，来吧，zTree！
一直以来看见web项目中的树就头疼.这次又给碰上了,什么也别说,这次自己整理一个版本出来实践一下.zTree v3.2的API界面非常清爽,但是在查看API之前,你需要自己先实践一下,知道基本的概念和 ...
- zTree和SweetAlert插件初探
1.zTree插件简介 zTree是一个依靠 jQuery实现的多功能“树插件”.优异的性能.灵活的配置.多种功能的组合是zTree最大优点.专门适合项目开发,尤其是树状菜单.树状数据的Web显示.权 ...
- zTree开发下拉树
最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...
- Ztree的简单使用和后台交互的写法（二）
针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...
- Ztree的简单使用和后台交互的写法（一）
一.引入ztree的头文件 <!-- 引入ztree/--> <script type="text/javascript" src="${pageCon ...
- jQuery Ztree基本用法
1.首先在页面上有<ul/>标签 <ul id="tree" class="ztree"></ul> 2.定义ztree的配 ...
- jq生成目录文件树jQuery Ztree基本用法
转自:http://www.cnblogs.com/linjiqin/p/4547452.html 1.首先在页面上有<ul/>标签 ? 1 <ul id="tree&qu ...
随机推荐
- C语言入门---第九章 C语言指针
没学指针就是没学C语言! 指针是C语言的精华,也是C语言的难点. 所谓指针,也就是内存的地址,所谓指针变量,也就是保存了内存地址的变量.不过人们往往不会区分两者的概念,而是混淆在一起使用. ===== ...
- Python 基础之函数的嵌套与nonlocal修改局部变量及闭包函数
一.函数的嵌套 嵌套在外层,称之为外函数 嵌套在里层,称之为内函数#例:def outer(): def inner(): print("I'm inner") ...
- 如何使用ffmpeg进行音视频裁剪命令和音视频合成命令
音视频剪裁命令 ffmpeg -i input.mp4 -ss 00:00:00 -t 10 out.ts -i : 指定视频 -ss : 开始时间 -t : 指定裁剪的秒数 音视频合并的命令 ffm ...
- ubutun18 install ibus-pinyin
ref: https://www.cnblogs.com/asmer-stone/p/9069866.html Step1 $ sudo apt-get install ibus-pinyin
- 测试人员如何使用Git
测试人员如何使用Git? 首先Git的安装,这里不多做阐述,直接去Git官方网站下载后并傻瓜式安装即可. 如何判定已安装好Git呢? ------------- 随便打开一个目录,鼠标右键点击可看到 ...
- vue dialog每次打开会展示上一次数据（转载）
原文地址: (https://www.jianshu.com/p/82b6681d0768) 在dialog外套一层div,div中以v-if来控制组件el-dialog的出现与否,每次弹出el-di ...
- thinkPHP5.0中使用header跳转没作用
我在controller中的方法中这样写: header("Location:".$url); 但是一直没动静,不会跳转,最后还是官方文档解决了 https://www.kancl ...
- js面试代码中的“坑”
1.typeof 对类型的判断 (function() { return typeof arguments; } )(); 答案:"Object" 解释:arguments是一个伪 ...
- PAT B1020 月饼
#include<iostream> #include<algorithm> using namespace std; struct mooncake { double sto ...
- JS操作DOM节点查找
JS中常用的DOM操作事件,包括有节点查找,键盘鼠标事件等等,本文内容介绍DOM的节点查找. <script> window.onload = function(){ //children ...