这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下。我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件。

  我们先下载zTree,点击我跳转到一个网站进行下载

  代码直接贴出来

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/zTreeStyle.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all-3.1.min.js"></script>
</head> <body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
<script type="text/javascript">
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
callback:{
onClick:function(event,treeId,treeNode){
if(treeNode.ahref){
window.open(treeNode.ahref);
}else{
alert("此节点没有链接!")
} }
},
view:{
showIcon:false
}
};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [
{
name: "test1",
open: true,
children: [{name: "test1_1",ahref:"https://www.baidu.com/"}, {name: "test1_2"}]},
{
name: "test2",
open: true,
children: [{name: "test2_1"}, {name: "test2_2"}]
}];
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</body> </html>

  

  之前我在点击test1_1这个节点的时候弹出了两个页面,这个原因是我在设置children节点的时候把里面的链接直接使用的是url属性,这样就会使得我在点击节点时弹出两个页面,然后我把属性名改为了ahref之后就可以了。url估计是一个关键字,我们在设置链接时不要使用url。

jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题的更多相关文章

  1. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  2. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

  3. Jquery插件Ztree使用所遇问题

    问题1.$.fn.zTree为空或为Undefined 我在MVC中引用Jquery插件Ztree的JS并不存任何问题,而当我将Ztree的js引入项目中,就出现$.fn.zTree为空或为Undef ...

  4. jquery mobile页面跳转后,必须重新刷新页面js方可有效

    最近在做个项目,用到jquery mobile,很陌生对他,问题一个个的来,那就要一个个解决,找了一天这个问题,放可明白:首先明白jqm里面页面跳转默认都是通过ajax请求的,必须重新刷新页面js方可 ...

  5. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  6. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  7. 页面跳转时,url 传大数据的参数不全的问题+序列化对象

    1.页面跳转时,url 传大数据的参数不全的问题 //传参: url: '/pages/testOfPhysical/shareEvaluation?detailInfo=' +encodeURICo ...

  8. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  9. selenium获取新页面标签页(只弹出一个新页面的切换)

    selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...

随机推荐

  1. 简历编写技巧-java开发工程师简历实战

    看到一遍简历编写的文章 想到也快找工作了 早晚能够用上 现在摘录如下 640?wx_fmt=jpeg 工欲善其事,必先利其器,这是自古以来的道理.所以如果想找到一份好的工作,一定要先整理一份好的简历. ...

  2. Cache的封装和使用

    ICache 接口 using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...

  3. 【bzoj3262】陌上花开 CDQ分治+树状数组

    题目描述 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要美丽,当且仅当Sa&g ...

  4. Android Service的分类详解

    按照启动方式分类 谷歌官网对Service的分类 Service根据启动方式分为两类:Started和Bound.其中,Started()是通过startService()来启动,主要用于程序内部使用 ...

  5. json数据中的某一个字段进行快速排序quicksort

    快速排序(Quicksort)是对冒泡排序的一种改进,是一种分而治之算法归并排序的风格. 核心的思想就是通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小 ...

  6. P3032 [USACO11NOV]二进制数独Binary Sudoku

    题目描述 Farmer John's cows like to play an interesting variant of the popular game of "Sudoku" ...

  7. AGC018C Coins (set)

    题目大意: 给出n个人,每个人手里都有xi个金牌,yi个银牌,ci个铜牌. 你需要选出X个人,拿走他们手里的金牌,选出Y个人,拿走他们手里的银牌,选出Z个人,拿走他们手里的铜牌 X+Y+Z = n.并 ...

  8. arc068 E: Snuke Line

    首先要知道 (m/1 + m/2 + ... + m/m) 约为 mlogm 还有一个比较明显的结论,如果一个纪念品区间长度大于d,那么如果列车的停车间隔小于等于d,则这个纪念品一定能被买到 然后把区 ...

  9. Educational Codeforces Round 55:B. Vova and Trophies

    B. Vova and Trophies 题目链接:https://codeforc.es/contest/1082/problem/B 题意: 给出一个“GS”串,有一次交换两个字母的机会,问最大的 ...

  10. jquery教程-Jquery 获取标签个数 size()函数用法

    jquery教程-Jquery 获取标签个数 size()函数用法,size() 方法返回被 jQuery 选择器匹配的元素的数量. 语法 $(selector).size()     jQuery ...