___树形菜单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 ...
随机推荐
- noip第26课资料
- 安装vue-cli脚手架构建工具
vue安装 1.vue安装: $ cnpm install vue 2.安装vue-cli脚手架构建工具: # 全局安装 vue-cli $ cnpm install --global vue-cli ...
- 转 Refresh Excel Pivot Tables Automatically Using SSIS Script Task
Refresh Excel Pivot Tables Automatically Using SSIS Script Task https://www.mssqltips.com/sqlservert ...
- vue.js 2.0(1)
1.点击一个按钮打开,关闭弹框 2.实现滚动监听,导航看顶置,实现某元素吸顶 路由
- 项目小程序笔记-登录界面+FPGA管脚分配文件生成
声明:只是为了记录我遇到的一些问题,其中有我理解错的望勿参考. (1)qt designer设计好窗口 主窗口: 登录窗口: 关于qt designer的使用,大可以百度,很简单的,要注意的是部件的参 ...
- CDN随笔
CDN的理解:(1)CDN (内容分发网络)加速用户获取数据的 系统(2)部署在离用户最近的网络节点上(3)命中CDN 不需要访问后端服务器(4)互联网公司自己搭建或租用
- linux系统下安装redis以及java调用redis
关系型数据库:MySQL Oracle 非关系型数据库:Redis 去掉主外键等关系数据库的关系性特性 1)安装redis编译的c环境,yum install gcc-c++ 2)将redis-2. ...
- [转]Comparing sFlow and NetFlow in a vSwitch
As virtualization shifts the network edge from top of rack switches to software virtual switches run ...
- IEDA的程序调试debug
以前只是浅层面的使用dubug来查看程序运行顺序,排查一些异常的原因, 今天由于要学习一些源码,所以系统的记录一下(借鉴网上资料总结而来) 主要涉及到的功能区为如下: A::重启项目 快捷键 Ctrl ...
- 阿里技术分享：阿里自研金融级数据库OceanBase的艰辛成长之路
本文原始内容由作者“阳振坤”整理发布于OceanBase技术公众号. 1.引言 OceanBase 是蚂蚁金服自研的分布式数据库,在其 9 年的发展历程里,从艰难上线到找不到业务场景濒临解散,最后在双 ...