ztree管理html元素,zTree入坑指南
问题1: zTree 根本不能获取到, 当前你点击的节点是哪个? 那么你要怎么根据路径去服务器请求数据呢? 根本无从下手, 如果你也遇到了需要通过zTree 获取当前点击的节点, 那么,你应该明白我的痛苦, 翻遍API文档,也找不到解决的方案!,怎么办呢?
思路: 查看 zTree 生成的 html 代码, 可以看到, 每个点击按钮都有一个className: .button, 我的思路,就是获取到,所有的 $('.button') 设置点击事件, 获取到该元素的父节点的id属性, zTree 提供了根据 tid 获取当前节点的方法 treeObj.getNodeByTId(tid) (具体参照API文档), 怎么我们就通过自己的努力获取到了当前被点击的节点
获取当前被点击的节点,也是需要的时机,否则是获取不到的,那么正确的时机在那里呢?当然是zTree异步获取数据,并渲染到dom以后的事情, 来看看, 我是怎么写的:var tid = '';
var filePathDom = $('#file_path')
// zTree配置
var setting = {
async: {
enable: true,
type: 'GET',
url: getUrl,
dataFilter: filter
},
callback: {
onAsyncSuccess: function () { //在数据请求成功后获取zTree渲染出来的节点
$('.button').click(function () {
tid = $(this).parent().attr('id')
})
}
}
};
看到了吗? 我在 setting 配置中的回调处理部分,去获取DOM节点的, 这很重要, 不然,你是不能获取到渲染出来的DOM节点的, 我也是研究了一番之后,对API的使用和配置才了然于胸!
根据上面的技巧,获取到了tid, 那么很容易得到当前被点击的节点了;zTree 提供了获取渲染出来的使用节点数据的直接方法, 直接使用即可 :
var treeObj = $.fn.zTree.getZTreeObj("tree");
//当前节点
var node = treeObj.getNodeByTId(tid)
var treeObj = $.fn.zTree.getZTreeObj("tree");
//所有数据节点
var nodes = treeObj.getNodes()
很好,我们已经有了当前节点 ``和所有节点, 我们就可以根据层级关系,得到请求的路径了:
// ajax请求地址
function getUrl() {
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes()
var node = {}
if (tid && nodes.length > 0) {
node = treeObj.getNodeByTId(tid);
var file_path = getFilePath(node, nodes)
return baseUrl + 'file_path=' + file_path
}
return baseUrl + 'file_path=/'
}
// 地址中path部分获取
function getFilePath(node, nodes) {
var parent = node.getParentNode()
var path = []
while (parent) {
path.unshift(parent.name)
parent = parent.getParentNode()
}
if (path.length > 0) {
path = path.join('/')
path = '/' + path + '/' + node.name
} else {
path = '/' + node.name
}
return path
}
ztree管理html元素,zTree入坑指南相关推荐
- Rust入坑指南:核心概念
如果说前面的坑我们一直在用小铲子挖的话,那么今天的坑就是用挖掘机挖的. 今天要介绍的是Rust的一个核心概念:Ownership.全文将分为什么是Ownership以及Ownership的传递类型两部 ...
- 发布开源框架到CocoaPods入坑指南
个人原文博客地址: 发布开源框架到CocoaPods入坑指南 在开发过程中一定会用到一些第三方框架, 只要安装了CocoaPods, 然后通过pod install命令, 就可以集成框架到项目中了 可 ...
- python web-python web入坑指南
原标题:python web入坑指南 Invest regularly in your knowledge portfolio. Make learning a habit. 自学python web ...
- 微信小程序继续入坑指南
微信小程序继续入坑指南 wxml 类似于html 感觉和ejs灰常的相似 数据绑定 js Page({data: {message: "hello world"} }) wxml ...
- Rust 入坑指南:鳞次栉比 | CSDN 博文精选
作者 | Jackyzhe 责编 | 屠敏 出品 | CSDN(ID:CSDNnews) 很久没有挖Rust的坑啦,今天来挖一些排列整齐的坑.没错,就是要介绍一些集合类型的数据类型."鳞次栉 ...
- notion 科研_科研新手全面入坑指南
简介 写论文既是当代大学生的必修课,也是科研工作者的必备技能.尽管大部分少数派读者的人生中都要经历一两次写论文的过程,但那些藏在这个过程里的诸多方法和细节,连你的导师都未必会系统地告诉你. 在这份&l ...
- Camunda BPM工作流引擎入坑指南(一)
Camunda BPM工作流引擎入坑指南 欢迎使用Camunda BPM工作流 入坑说明书 入坑准备工作 BPMN2.0基础 Camunda实战 Camunda BPM Activiti对比 功能快捷 ...
- 开发工具篇第九讲:菜鸟入坑指南
摘要:本文是开发工具篇第九讲:菜鸟入坑指南.针对新人上手慢的问题,写了这篇入坑指南,方便自己回顾,总结.本文分为四个部分,分别为jenkins使用技巧:常用软件操作命令:开发手册:调试手册.主要材料来 ...
- Rust入坑指南:齐头并进(上)
我们知道,如今CPU的计算能力已经非常强大,其速度比内存要高出许多个数量级.为了充分利用CPU资源,多数编程语言都提供了并发编程的能力,Rust也不例外. 聊到并发,就离不开多进程和多线程这两个概念. ...
- Rust入坑指南:鳞次栉比
很久没有挖Rust的坑啦,今天来挖一些排列整齐的坑.没错,就是要介绍一些集合类型的数据类型."鳞次栉比"这个标题是不是显得很有文化? 在Rust入坑指南:常规套路一文中我们已经介绍 ...
最新文章
- 酷派奖励程序员10 万股期权!因代码贡献受 Linux 之父亲自点名赞赏
- poj 3740 Easy Finding
- 一个页面区分管理者和普通用户如何设计_产品经理要做的操作权限/数据权限设计...
- Python3学习笔记(2)——递归函数
- 2016年:勒索病毒造成损失预估超过10亿美元
- JS文件信息收集工具-LinkFinder
- Python之数据拆分——groupby()方法
- 如何用VB.NET控制Excel單元格裡的內容?
- java开发工作找不到要放弃吗,这样学习Java,才能找到一份Java开发的工作。不要盲目的学!...
- 计算机电气工程论文,计算机在电气工程自动化控制的作用
- JavaScript 练手小技巧:过年了,用JS写一幅春联吧
- 撩妹代码html,Web前端
- hyperopt使用
- GIS-地理信息系统
- 前端——使用JavaScript(jQuery)通过身份证号获取籍贯、生日、年龄、性别
- 技术专栏|多旋翼飞行器振动机理分析和减振设计
- 怎么用java调用mysql_java 调用mysql实例
- dev c++怎么设置断点_斑马进度计划软件可以检查计划中是否存在逻辑断点和错误逻辑关系...
- 金融无疆界 风险无极限——中国金融的未来之路
- u盘笔记本安装linux卡主,小白u盘装系统步骤图解u盘安装centos7 卡在loop:module loaded...