___树形菜单Ztree.js显示.
----视图
@{
Layout = null;
}
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="~/Content/zTree-zTree_v3-master/zTree_v3/css/demo.css" rel="stylesheet" />
<link href="~/Content/zTree-zTree_v3-master/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Content/zTree-zTree_v3-master/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script src="~/Content/zTree-zTree_v3-master/zTree_v3/js/jquery.ztree.core.js"></script>
<script src="~/Content/zTree-zTree_v3-master/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script src="~/Content/zTree-zTree_v3-master/zTree_v3/js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
//给节点额外增加属性来控制“重命名”、“删除”图标的显示或隐藏
showRenameBtn: showRenameBtn,
showRemoveBtn: showRemoveBtn
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename
}
};
var zNodes = [
//给节点额外增加属性来控制“重命名”、“删除”图标的显示或隐藏
{ id: 1, pId: 0, name: "父节点 1", open: true, noRemoveBtn: true, noEditBtn: true },
{ id: 11, pId: 1, name: "叶子节点 1-1", noRemoveBtn: true, noEditBtn: true },
{ id: 12, pId: 1, name: "叶子节点 1-2" },
{ id: 13, pId: 1, name: "叶子节点 1-3" },
{ id: 2, pId: 0, name: "父节点 2", open: true },
{ id: 21, pId: 2, name: "叶子节点 2-1" },
{ id: 22, pId: 2, name: "叶子节点 2-2" },
{ id: 23, pId: 2, name: "叶子节点 2-3" },
{ id: 3, pId: 0, name: "父节点 3", open: true },
{ id: 31, pId: 3, name: "叶子节点 3-1" },
{ id: 32, pId: 3, name: "叶子节点 3-2" },
{ id: 33, pId: 3, name: "叶子节点 3-3" }
];
var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
return false;
}
function beforeEditName(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeEditName ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？");
}
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeRemove ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
function onRemove(e, treeId, treeNode) {
showLog("[ " + getTime() + " onRemove ] " + treeNode.name);
}
function beforeRename(treeId, treeNode, newName) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeRename ] " + treeNode.name);
if (newName.length == 0) {
alert("节点名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
setTimeout(function () { zTree.editName(treeNode) }, 10);
return false;
}
return true;
}
function onRename(e, treeId, treeNode) {
showLog("[ " + getTime() + " onRename ] " + treeNode.name);
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='" + className + "'>" + str + "</li>");
if (log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now = new Date(),
h = now.getHours(),
m = now.getMinutes(),
s = now.getSeconds(),
ms = now.getMilliseconds();
return (h + ":" + m + ":" + s + " " + ms);
}
//是否显示编辑按钮
function showRenameBtn(treeId, treeNode) {
//获取节点所配置的noEditBtn属性值
if (treeNode.noEditBtn != undefined && treeNode.noEditBtn) {
return false;
} else {
return true;
}
}
//是否显示删除按钮
function showRemoveBtn(treeId, treeNode) {
//获取节点所配置的noRemoveBtn属性值
if (treeNode.noRemoveBtn != undefined && treeNode.noRemoveBtn) {
return false;
} else {
return true;
}
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
//在addHoverDom中判断第0级的节点不要显示“新增”按钮
if (treeNode.level === 0) {
return false;
} else {
//给节点添加"新增"按钮
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.id).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.id
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.id);
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
return false;
});
}
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.id).unbind().remove();
};
function selectAll() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
}
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#selectAll").bind("click", selectAll);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li span.button.add {
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle;
}
</style>
</HEAD>
<BODY>
<h1>高级 增 / 删 / 改 节点</h1>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</BODY>
</HTML>
___树形菜单Ztree.js显示.的更多相关文章
- 议：如何将树形菜单形式的数据转化成HTML的二维表（相同内容需合并单元格）
一般做OA类管理系统,经常涉及到“组织架构”的概念,那么像这种有上下层级关系的数据一般会做成树形菜单的方式显示,底层代码必定会用到递归算法.这篇随笔的目的就是要谈谈除了用树形菜单来显示这种上下层级关系 ...
- SpringMVC+ZTree实现树形菜单权限配置
计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎sta ...
- zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...
- Bootstrap风格zTree树形菜单插件
这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...
- EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...
- Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
- 使用ztree展示树形菜单结构
官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 一.功能简介 在权限系统中,实现给角色指定菜单权限的功能.主要包括以下几点: 读取全部菜单项,并以树形结构 ...
- zTree树形菜单交互选项卡效果实现
1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...
- ztree带有选项框的树形菜单使用
1.ztree简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状数据的Web ...
随机推荐
- Charles配置抓取HTTPS请求的Android配置
关于android手机在mac版charles上抓不到包这个问题困扰了很久,查阅了很多资料,发现是android7.0系统安全策略问题. Charles抓包正常流程1.在手机上配置证书 点击后:直接在 ...
- [转]Comparing sFlow and NetFlow in a vSwitch
As virtualization shifts the network edge from top of rack switches to software virtual switches run ...
- 了解Serverless架构
1 概述 Serverless中文译为“无服务”是一种新兴起的架构模式,公司ESB产品引入Rest微服务服务机制过程,笔者刚好参与其中,其中Serverless作为一个新起的概念,跟微服务架构相关,为 ...
- H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- [Postman]发送第一个请求(1)
通过API请求,您可以与具有要访问的API端点的服务器联系,并执行某些操作.这些操作是HTTP方法. 最常用的方法是GET,POST,PUT和DELETE.方法的名称是不言自明的.例如,GET使您可以 ...
- Oracle的nvl函数和nvl2函数
一.基本语法 介绍一下oracle的nvl函数和nvl2函数. nvl函数 nvl函数基本语法为nvl(E1,E2),意思是E1为null就返回E2,不为null就返回E1. nvl2函数 nvl2函 ...
- Python - 关于代码阅读的一些建议
初始能力 让阅读思路保持清晰连贯,主力关注在流程架构和逻辑实现上,不被语法.技巧和业务流程等频繁地阻碍和打断. 建议基本满足以下条件,再开始进行代码阅读: 具备一定的语言基础:熟悉基础语法,常用的函数 ...
- 转载 Flask中客户端 - 服务器 - web应用程序 是如何处理request生成response的?
文章转载自https://blog.csdn.net/weixin_37923128/article/details/80992645 , 感谢原作者 当客户端向服务器发送一个请求时,服务器会将请求转 ...
- 访问iis出现500.21错误
上图是错误的界面 刚开始接手了一个项目,然后想发布到iis上访问使用效果,结果出现了上面的问题,最开始以为是 .net Framework版本的问题,每个版本都试过了,结果问题并没有完全解决. 下面 ...
- Quartz的使用案例
一.介绍 项目中的调度任务可以使用Quartz任务调度框架 1.Job接口:这个接口里面只定义了一个方法,excute void execute(JobExecutionContext context ...