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

随机推荐

Node selenium-webdriver
Selenium-webdriver基本使用准备 ① node.js 的安装和配置略 ② Selenium-webdriver npm install -save selenium-webdrive ...
Debian 8下手工安装 Eclipse CDT neon.2
从 http://www.eclipse.org/downloads/packages/eclipse-ide-cc-developers/neon2 下载 eclipse-cpp-neon-2-li ...
画PCB之电流与线宽的关系
来源:(多图) 超强整理!PCB设计之电流与线宽的关系http://www.51hei.com/bbs/dpj-39134-1.html 关于PCB线宽和电流的经验公式,关系表和软件网上都很多,本文把 ...
画PCB
1.AD16Design中Boardshape没有redefine board shape选项来修改板子的形状:{ 解决办法:在英文输入模式下按“1”键整个界面会变绿,此时就会有redefine bo ...
利用WindowsServiceWrapper(WinSW)将nginx包装为系统服务
1.WindowsServiceWrapper(WinSW) Github:https://github.com/kohsuke/winsw/ 下载地址:http://repo.jenkins-ci. ...
C语言中关键字restrict的概念，使用范围，例子
概念: restrict,C语言中的一种类型限定符(Type Qualifiers),用于告诉编译器,对象已经被指针所引用,不能通过除该指针外所有其他直接或间接的方式修改该对象的内容. 渊源: res ...
Date相关
处理时间是常见的需求,总结下Date类的相关知识构建时间对象 Date 对象基于1970年1月1日(世界标准时间)起的毫秒数. 构建对象实例有多种方式: 不传入参数,默认以系统当前时间返回一个时间对 ...
HTML5拍照、摄像机功能实战
HTML5拍照.摄像机功能实战苏格团队作者:Tomey 开篇最近在做一个chrome app的云相机应用,应用包括拍照.摄像.保存照片视频.上传文件等等核心功能,其中涉及到很多HTML5对媒体流 ...
自动化运维Ansible安装篇
Ansible自动化工具之--部署篇 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了 ...
Android--UI之GridView
前言这篇博客介绍一下Android平台下,GridView控件的开发.针对GridView控件的一些常用属性.方法,以及注意事项进行讲解,最后将以一个Demo展示GridView控件的使用. Gri ...

___树形菜单Ztree.js显示.

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

随机推荐

热门专题