___树形菜单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 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>

___树形菜单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 ...

随机推荐

parrot os 更新到3.7后无法上网（DNS暂时无法解析）
parrot os 更新到最新后可能ping的通IP,ping不通域名,是DNS解析出问题了修改/etc/resolv.conf sudo rm /etc/resolv.conf sudo vi / ...
python opencv 处理文件、摄像头、图形化界面
转换成RGB import cv2 import numpy as ny img = ny.zeros( ( 3 , 3 ),ny.float32) img=cv2.cvtColor(img,cv2. ...
《Pyhton语言程序设计》_第7章_对象和类
#7.2.1_定义类一个类的功能:数据域.定义方法.初始化程序初始化程序总是被命名为:_ _init_ _ (两个连续的下划线) #7.2.4_self参数 #self参数是指向对象本身的参数,那 ...
webapi使用swagger出现“Cannot read property 'parameters' of null”
前端时间在webapi项目使用swagger来提供接口文档及测试工具,按网上方法(http://wmpratt.com/swagger-and-asp-net-web-api-part-1)配置好之后 ...
Linux系统安装 OpenSSL两种方法
OpenSSL是一个开源的ssl技术,由于安装pytbull,需要安装openssl,并下载对应的版本下载地址:https://www.openssl.org/source/ 方法一,编译安装Open ...
CS61A Lecture3 Note
本次lec主讲控制流本文档只列一些py控制流与C不同的地方 print的功能不同可以print出来None这种东西重点讲了函数运行机制,我的理解是这样的,在调用函数之前,def会产生一个glo ...
python 按照一个字典的值来对这个字典进行排序
old_dic = {'a':6, 'b':3, 'c':2, 'd':4, 'e':5, 'f':1}new_dic = sorted(old_dic.items(), key=lambda d:d ...
Spring详解（六）------AspectJ 实现AOP
上一篇博客我们引出了 AOP 的概念,以及 AOP 的具体实现方式.但是为什么要这样实现?以及提出的切入点表达式到底该怎么理解? 这篇博客我们通过对 AspectJ 框架的介绍来详细了解. 1.什么是 ...
linux mint 安装 opencv2.4
Download opencv https://github.com/opencv/opencv/tree/2.4 安装必要的依赖 sudo apt-get install build-essenti ...
数据库建模&逆向工程工具
工具推荐先走一波: Navicat Premium:https://www.navicat.com.cn/products/navicat-premiumPremium (个人推荐) Navicat ...

___树形菜单Ztree.js显示.

___树形菜单Ztree.js显示.的更多相关文章

随机推荐

热门专题