这段时间在维护公司的项目,去年做的项目里面有ztree树的例子,想起之前还没有开始写博客,一些知识点也无从找起,要新加一个右击节点事件,折腾了半天,其中也包含了一些知识点,稍稍做了一些demo。

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

• 兼容 IE、FireFox、Chrome 等浏览器

• 在一个页面内可同时生成多个 Tree 实例

• 支持 JSON 数据

• 支持一次性静态生成 和 Ajax 异步加载 两种方式

• 支持多种事件响应及反馈

• 支持 Tree 的节点移动、编辑、删除

• 支持任意更换皮肤 / 个性化图标(依靠css)

• 支持极其灵活的 checkbox 或 radio 选择功能

• 简单的参数配置实现 灵活多变的功能

在官网能够下载到zTree的源码、实例和API,其中作者pdf的API写得非常详细。

参考文档:http://www.treejs.cn/v3/api.php

图片.png

需求,点击根节点的时候,alert出所点击的事件里面的具体节点信息,在这个过程里,如果点击到了父节点(嘉定监狱),则不显示任何信息

1:在setting 配置里面,给callback设置,单击事件onClick : zTreeOnClick;

图片.png

2:写一个函数zTreeOnClick

// 单击事件
function zTreeOnClick(event, treeId, treeNode) { alert(treeNode.tId + ", " + treeNode.name);
}

3:父节点不需要点击事件,父节点为1,如果节点为1 的时候,不执行下一步

if (treeNode.id == "1") {
return;
}

图片.png

项目js部分完整代码,仅供参考

var detain = function() {

    AssetSavetype = null;
AssetSelecttype = null;
getFloorList(); initLoadMap('detainmap'); var beforeNodeID; var basePath;
var url; var setting = {
check : {
enable : true,
chkStyle : "radio",
radioType : "all"
},
view : {
selectedMulti : true,
showLine : false
},
data : {
key : {
name : "name"
},
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId",
}
},
edit : {
enable : true,
removeTitle : "删除节点",
showRemoveBtn : setRemoveBtn,
showRenameBtn : setRenameBtn
},
async : {
enable : true,
url : "/bison/design/detain/getTree",
autoParam : [ "id" ],
type : "get",
dataFilter : ajaxDataFilter,
dataType : "json"
},
callback : {
// 单击事件
onClick : zTreeOnClick,
onCheck : zTreeOnCheck,
beforeRemove : zTreeBeforeRemove,
onRemove : zTreeOnRemove,
onRename : zTreeOnRename
}
}; var zTreeObj; // 初始化根节点
function initTree() {
$.get(basePath + "/design/detain/initNode?type=1", function(data) {
// 设置父节点不显示checkbox
data.returnData.node.nocheck = true;
zTreeObj = $.fn.zTree.init($("#zTree"), setting,
data.returnData.node);
});
} // 单击事件,向后台发起请求
function zTreeOnClick(event, treeId, treeNode) {
if (treeNode.id == "1") {
return;
}
alert(treeNode.tId + ", " + treeNode.name); } function setRemoveBtn(treeId, treeNode) {
if(treeNode.id == 1){
return false;
}
return true;
} function setRenameBtn(treeId, treeNode) {
if(treeNode.id == 1){
return false;
}
return true;
} function zTreeBeforeRemove(treeId, treeNode) {
if (confirm("是否确认删除"))
return true;
return false;
} function zTreeOnRemove(event, treeId, treeNode) {
$.ajax({
url : basePath + "/design/detain/deleteNode",
data : {
id : treeNode.id,
},
type : "get",
success : function(data) {
}
});
deleteDetain(treeNode.id);
} function zTreeOnRename(event, treeId, treeNode) {
$.ajax({
url : basePath + "/design/detain/updateName",
data : {
id : treeNode.id,
name : treeNode.name
},
type : "POST",
success : function(data) {
}
});
} // 异步加载数据过滤器
function ajaxDataFilter(treeId, parentNode, responseData) {
var data = responseData.returnData.treeList;
return data;
}
; // 节点勾选事件
function zTreeOnCheck(event, treeId, treeNode) {
// 显示围栏
if (beforeNodeID != treeNode.id) {
electronicLayerOff = true;
beforeNodeID = treeNode.id;
}
showDetain([ treeNode.id ]);
}
; // 获取项目路径
function getContextPath() {
var currentPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = currentPath.indexOf(pathName);
var localhostPath = currentPath.substring(0, pos);
var projectName = pathName.substring(0,
pathName.substr(1).indexOf('/') + 1);
return (localhostPath + projectName);
} // 显示配置记录
function showDetain(DetainNum) {
electronicLayer.getSource().clear();
if (electronicLayerOff) {
for (var num = 0; num < DetainNum.length; num++) {
var electronicParam = {
service : 'WFS',
version : '1.1.0',
request : 'GetFeature',
typeName : DBs + ':detain',
outputFormat : 'application/json',
cql_filter : "bid='" + DetainNum[num] + "'"
};
$.ajax({
url : wfsUrl,
data : $.param(electronicParam),
type : 'GET',
dataType : 'json',
success : function(response) {
var features = new ol.format.GeoJSON()
.readFeatures(response);
electronicLayer.getSource().addFeatures(features);
}
});
}
electronicLayerOff = false;
} else {
electronicLayerOff = true;
}
}
// 资产FID获取
var FIDObject = function(Filter, Typename) {
var Fid = [];
$.ajax({
url : wfsUrl,
data : {
service : 'WFS',
version : '1.1.0',
request : 'GetFeature',
typename : Typename,
outputFormat : 'application/json',
cql_filter : Filter
},
type : 'GET',
dataType : 'json',
async : false,
success : function(response) {
if (response.features.length == 1) {
Fid[0] = response.features[0].id;
} else if (response.features.length > 1) {
for (var i = 0; i < response.features.length; i++) {
Fid[i] = response.features[i].id;
}
} else {
}
} });
return Fid;
};
// 删除配置记录
function deleteDetain(id) {
var Filter = "bid=" + "'" + id + "'";
var Typename = DBs + ':detain';
var newFeature = new ol.Feature();
newFeature.setId(FIDObject(Filter, Typename)[0]); var tableType = 'detain';
updateNewFeature([ newFeature ], tableType, 'remove');
if (beforeNodeID == id) {
electronicLayer.getSource().clear();
} } // 添加配置
$("#adddetain").on("click", function() { layer.open({
type : 2,
title : '添加配置',
area : [ '550px', '550px' ],
// fix : false, �
content : [ './adddetain.jsp', ],
end : function() {
initTree();
electronicLayer.getSource().clear();
}
});
}); return {
init : function() {
basePath = getContextPath();
initTree();
}
}; }();

ztree实现根节点单击事件,显示节点信息的更多相关文章

  1. zTree 无子节点 单击事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. C#treeView控件单击事件选中节点滞后问题解决方法

    问题描述:在treeView的Click事件中,选中的节点SelectedNode并不是您刚才点击的节点,总是上一次选中的节点,节点选中滞后的问题. 解决方案:在treeView的MouseDown事 ...

  3. AppBox中main树节点单击事件JS(还有叶子的节点的页面链接)

    AppBox中main.aspx.csif (menu.IsTreeLeaf) {                        node.Leaf = true;                   ...

  4. C# chart,有关如何在鼠标移动到Series上时显示节点及数据 (有待继续更新)

    一.效果与思路 效果: 解决方案1 用chart的mousemove时间,实时跟踪鼠标最近的X轴的位置,然后把cursorX设置到那个位置上,让用户知道我是选的那一个X的值,同时用tooltip显示该 ...

  5. ztree根据treeId展开指定节点并触发单击事件

    ztree.expandNode(ztree.getNodeByParam("id",treeId,null));//展开指定节点 ztree.selectNode(ztree.g ...

  6. ie6下:png图片不透明 和 背景图片为png的节点的内部标签单击事件不响应

    1.png图片不透明 少量图片时:使用滤镜: _background:none; _filter:prodig:DXImageTransform.Microsoft.AlphaImageLoader( ...

  7. zTree新增的根结点再新增子节点reAsyncChildNodes不生效解决方案

    zTree新增的根结点再新增子节点reAsyncChildNodes不生效解决方案, zTree新的根结点不能异步刷新,reAsyncChildNodes不生效解决方案, reAsyncChildNo ...

  8. ztree 获取根节点

    function getRoot() { var treeObj = $.fn.zTree.getZTreeObj("tree-div"); //返回一个根节点 var node ...

  9. zTree实现单独选中根节点中第一个节点

    zTree实现单独选中根节点中第一个节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树& ...

随机推荐

  1. 8、Situation-Dependent Combination of Long-Term and Session-Based Preferences in Group Recommendations: An Experimental Analysis ----组推荐中基于长期和会话偏好的情景依赖组合

    一.摘要: 背景:会话组推荐系统的一个主要挑战是如何适当地利用群组成员之间的交互引起用户偏好,这可能会偏离用户的长期偏好.长期偏好和群组诱导的偏好之间的相对重要性应该根据具体的群组设置而变化. 本文: ...

  2. Vue学习之路第七篇:跑马灯项目实现

    前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...

  3. [COCI2007]PRAVOKUTNI

    题目大意:在一个平面上,有\(N\)个点,求这些点构成的直角三角形个数.解题思路:枚举直角顶点,对于每个点,将这个点当做原点,对其他点按极角排序,然后双指针扫一遍,判断弧度差即可. C++ Code: ...

  4. EXGSBS模板

    EXBSGS模板 我之前把有一处b和c弄反了,有点困...然后调了半天 (exbsgs比excrt简单多了) 求x的最小正整数解 原式子拆成 在bsgs中,保证a,b互质,这样求出的逆元挪过去才对 但 ...

  5. java实现支付宝电脑支付(servlet版本)

    前期准备: 蚂蚁金融开放平台 进行登录操作 进入我的开放平台 在上方找到沙箱,进入沙箱(网络编程虚拟执行环境). 这里的RSA2密钥设置下,我已经设置好了,所以便有了支付宝公钥(公钥是对外公开的,私钥 ...

  6. Redis介绍、安装部署、操作

    学习连接:http://www.runoob.com/redis/redis-tutorial.html 一.Redis介绍 Redis是NoSql的一种. NoSql,全名:Not Only Sql ...

  7. (转)Linux内核 TCP/IP、Socket参数调优

    Doc1: /proc/sys/net目录 所有的TCP/IP参数都位于/proc/sys/net目录下(请注意,对/proc/sys/net目录下内容的修改都是临时的,任何修改在系统重启后都会丢失) ...

  8. 王立平-bmp.compress()

    bmp.compress(Bitmap.CompressFormat.JPEG, 30, baos); //30 是压缩率,表示压缩70%; 假设不压缩是100,表示压缩率为0

  9. HH实习(hpu1287)(斐波那契运用)

    HH实习 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 44  Solved: 29 [Submit][id=1287">Status ...

  10. Java5新特性之枚举

    1.  概念 首先,枚举并非一种新技术,而是一种基础数据类型.它隶属于两种基础类型中的值类型,例如以下: 2.  为什么要有枚举 枚举在真正的开发中是非经常常使用的,它的作用非常easy也非常纯粹:它 ...