ztree实现根节点右击事件,显示添加删除
需求,右击树节点,出现编辑和删除的提示框
1:在setting 配置里面,给callback设置,右击事件onRightClick:
2:写一个函数onRightClick
function onRightClick(event, treeId, treeNode) {
}
3:禁用默认鼠标右击事件
document.oncontextmenu = function(){
return false;
}
4:父节点不需要点击事件,父节点为1,如果节点为1 的时候,不执行下一步
if (treeNode.id == "1") {
return;
}
以上步骤,组成右击事件以下代码:
//右击事件
function onRightClick(event, treeId, treeNode) {
document.oncontextmenu = function(){
return false;
}
//alert(1)
if (treeNode.id == "1") {
return;
}
if (treeNode) {
zTreeObj.selectNode(treeNode);
showContextMenu(treeNode.organId,treeNode.leaf);
/*showContextMenu(treeNode.organId,treeNode.leaf, event.clientX -10, event.clientY -10);*/
}
}
众所周知,在PC端,我们通常用event.clienX或者event.clientY来获取手指的坐标,注释部分的代码控制提示框的位置。
5:触发事件之后,出现提示框
jsp代码:
<div class="dropdown open" id="treeContextMenu" style="display: none;position: absolute">
<ul class="dropdown-menu">
<li><a href="javascript:;" id="toUpdateBtn">编辑</a></li>
<li><a href="#" id="deleteBtn" data-target="#confirmDialog" data-toggle="modal">删除</a></li>
</ul>
</div>
js代码
function showContextMenu(type,leaf, x, y) {
if (type == -1) {
$(".dropdown-menu").find("li:not(:first)").hide();
} else if(leaf){
$(".dropdown-menu").find("li:first").hide();
}else{
$(".dropdown-menu").find("li").show();
}
$("#treeContextMenu").css({"top": y + "px", "left": x + "px"}).show();
$("body").on("mousedown", onBodyMouseDown);
}
6:提示框的一些处理
function hideContextMenu() {
$("#treeContextMenu").hide();
$("body").off("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event) {
if (!(event.target.id == "treeContextMenu" || $(event.target).parents("#treeContextMenu").length > 0)) {
hideContextMenu();
}
}
项目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 : {
onRightClick: onRightClick,
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 onRightClick(event, treeId, treeNode) {
document.oncontextmenu = function(){
return false;
}
//alert(1)
if (treeNode.id == "1") {
return;
}
if (treeNode) {
zTreeObj.selectNode(treeNode);
showContextMenu(treeNode.organId,treeNode.leaf);
/*showContextMenu(treeNode.organId,treeNode.leaf, event.clientX -10, event.clientY -10);*/
}
}
function showContextMenu(type,leaf, x, y) {
if (type == -1) {
$(".dropdown-menu").find("li:not(:first)").hide();
} else if(leaf){
$(".dropdown-menu").find("li:first").hide();
}else{
$(".dropdown-menu").find("li").show();
}
$("#treeContextMenu").css({"top": y + "px", "left": x + "px"}).show();
$("body").on("mousedown", onBodyMouseDown);
}
function hideContextMenu() {
$("#treeContextMenu").hide();
$("body").off("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event) {
if (!(event.target.id == "treeContextMenu" || $(event.target).parents("#treeContextMenu").length > 0)) {
hideContextMenu();
}
}
//编辑信息
$("#toUpdateBtnd").on("click", function() {
layer.open({
type : 2,
title : '编辑信息',
area : [ '1000px', '650px' ],
fix : false, // �
content : basePath + 'personInfo/toAdduser',
end : function() {
}
});
});
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实现根节点右击事件,显示添加删除的更多相关文章
- ztree实现根节点单击事件,显示节点信息
这段时间在维护公司的项目,去年做的项目里面有ztree树的例子,想起之前还没有开始写博客,一些知识点也无从找起,要新加一个右击节点事件,折腾了半天,其中也包含了一些知识点,稍稍做了一些demo. zT ...
- ztree 获取根节点
function getRoot() { var treeObj = $.fn.zTree.getZTreeObj("tree-div"); //返回一个根节点 var node ...
- ztree : checkbox 选中/不选中时动态添加/删除DOM元素
先上代码. var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_ ...
- zTree 无子节点 单击事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Gridview的RowDataBound事件(添加删除提示,改变背景颜色)
protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e) { //如果是绑定数据行 if (e.Row.Row ...
- 节点操作-创建并添加&删除节点&替换&克隆节点
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
- Ztree加载完成默认选中根节点右侧生成表格
需求:页面加载完成之后,默认选中ztree的根节点,并执行其点击方法,右侧生成表格: 效果:如下图所示: 思路:在节点点击事件clickNode方法中根据节点的部门code查询这个部门下的所有员工,并 ...
- 【转】 oracle 层次查询判断叶子和根节点
Oracle 9i判断是叶子或根节点,是比较麻烦的一件事情,SQL演示脚本如下: DROP TABLE idb_hierarchical; create TABLE idb_hierarchical ...
- ASPxTreeList控件去根节点的新增修改操作(写在onCommandColumnButtonInitialize()事件中)
treelist去掉根节点按钮效果图: //去掉父节点及子节点旁的新增.修改.删除操作(写在onCommandColumnButtonInitialize事件中) protected void Tre ...
随机推荐
- [luogu3369] 普通平衡树(splay模板)
题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 1.插入 xx 数 2.删除 xx 数(若有多个相同的数,因只删除一个) 3.查询 xx 数的排名(排名定义为比 ...
- 紫书 例题8-2 UVa 11605(构造法)
这道题方法非常的巧妙, 两层的n*n, 第一层第I行全是第I个国家, 第二层的第j列全是第j个国家.这样能符合题目的条件.比如说第1个国家, 在第一层的第一行全是A, 然后在第二层的第一行就有ABCD ...
- CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...
对于text-overflow:ellipsis,文本超出部分显示...,但要实现这个效果,却有一些必备条件,如下: div{ overflow:hidden; white-space:nowrap; ...
- spring security中当前用户信息
1:如果在jsp页面中获取可以使用spring security的标签库 在页面中引入标签 1 <%@ taglib prefix="sec" uri="htt ...
- NYIST 860 又见01背包
又见01背包时间限制:1000 ms | 内存限制:65535 KB难度:3 描述 有n个重量和价值分别为wi 和 vi 的 物品,从这些物品中选择总重量不超过 W 的物品,求所有挑选方案中物品价值总 ...
- [ReactVR] Start a Virtual Reality Project Using the React VR CLI
We will learn how to set up a React VR project, run the development mode with hot reloading, and tak ...
- SQL学习之使用order by 依照指定顺序排序或自己定义顺序排序
我们通常须要依据客户需求对于查询出来的结果给客户提供自己定义的排序方式,那么我们通常sql须要实现方式都有哪些,參考很多其它资料总结例如以下(不完好的和错误望大家指出): 一.假设我们仅仅是对于在某个 ...
- 剑指offer_面试题_从上往下打印二叉树
题目:从上往下打印出二叉树的每一个结点.同一层的结点依照从左到右的顺序打印.比如输入图4.5中的二叉树.则依次打印出8.6.10.5.7.9.11. 8 / \ 6 10 / \ ...
- Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...
- Google Maps API 将开始收费
Google Maps API 将开始收费 一.总结 一句话总结:国外的话openstreetmap或许不错 国内的话就高德吧 二.Google Maps API 将开始收费 曾经免费的 Google ...