<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeClick / onClick</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="jQueryUI/css/redmond/jquery-ui-1.9.2.custom.min.css"/>
<link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jQueryUI/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.core-3.5.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>-->
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
<script type="text/javascript" src="jquery.popupSmallMenu.js"></script>
<style>
.small-menu {
position: absolute;
width: 120px;
z-index: 99999;
border: solid 1px #CCC;
background: #EEE;
padding: 0px;
margin: 0px;
display: none;
}
.small-menu li {
list-style: none;
padding: 0px;
margin: 0px;
}
.small-menu li A {
color: #333;
text-decoration: none;
display: block;
line-height: 20px;
height: 20px;
background-position: 6px center;
background-repeat: no-repeat;
outline: none;
padding: 1px 5px;
padding-left: 28px;
}
.small-menu li a:hover {
color: #FFF;
background-color: #3399FF;
}
.small-menu-separator {
padding-bottom:0;
border-bottom: 1px solid #DDD;
}
.small-menu LI.edit A { background-image: url(images/page_white_edit.png); }
.small-menu LI.cut A { background-image: url(images/cut.png); }
.small-menu LI.copy A { background-image: url(images/page_white_copy.png); }
.small-menu LI.paste A { background-image: url(images/page_white_paste.png); }
.small-menu LI.delete A { background-image: url(images/page_white_delete.png); }
.small-menu LI.quit A { background-image: url(images/door.png); }
</style>
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true
},
data: {
key: {
checked: "isChecked",
title:"t",
name:"nnnn",
},
simpleData: {
enable: true,
idKey :"key",
pIdKey:"pkey"
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick,
onNodeCreated:OnNodeCreated,
onRightClick:OnRightClick
}
};
var zNodes =[
{ key:1, pkey:0, nnnn:"普通的父节点", t:"我很普通，随便点我吧", open:true,isChecked:0},
{ key:11, pkey:1, nnnn:"叶子节点 - 1", t:"我很普通，随便点我吧"},
{ key:12, pkey:1, nnnn:"叶子节点 - 2", t:"我很普通，随便点我吧"},
{ key:13, pkey:1, nnnn:"叶子节点 - 3", t:"我很普通，随便点我吧"},
{ key:2, pkey:0, nnnn:"NB的父节点", t:"点我可以，但是不能点我的子节点，有本事点一个你试试看？", open:true},
{ key:21, pkey:2, nnnn:"叶子节点2 - 1", t:"你哪个单位的？敢随便点我？小心点儿..", click:false},
{ key:22, pkey:2, nnnn:"叶子节点2 - 2", t:"我有老爸罩着呢，点击我的小心点儿..", click:false},
{ key:23, pkey:2, nnnn:"叶子节点2 - 3", t:"好歹我也是个领导，别普通群众就来点击我..", click:false},
{ key:3, pkey:0, nnnn:"郁闷的父节点", t:"别点我，我好害怕...我的子节点随便点吧...", open:true, click:false },
{ key:31, pkey:3, nnnn:"叶子节点3 - 1", t:"唉，随便点我吧"},
{ key:32, pkey:3, nnnn:"叶子节点3 - 2", t:"唉，随便点我吧"},
{ key:33, pkey:3, nnnn:"叶子节点3 - 3", t:"唉，随便点我吧"}
];
var log, className = "dark";
function beforeClick(treeId, treeNode, clickFlag) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeClick ] " + treeNode.nnnn );
return (treeNode.click != false);
}
function onClick(event, treeId, treeNode, clickFlag) {
showLog("[ "+getTime()+" onClick ] clickFlag = " + clickFlag + " (" + (clickFlag===1 ? "普通选中": (clickFlag===0 ? "<b>取消选中</b>" : "<b>追加选中</b>")) + ")");
}
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();
return (h+":"+m+":"+s);
}
var ztree;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
ztree = $.fn.zTree.getZTreeObj("treeDemo");
});
function OnRightClick(event, treeId, treeNode) {
ztree.selectNode(treeNode);
if(treeNode) {
//console.log(treeNode.tId);
//console.dir($('#'+treeNode.tId));
$("#menu").popupSmallMenu({
event : event,
onClickItem : function(item) {
chuli(treeNode,item);
}
});
}
}
function chuli(treeNode,item){
alert(item);
}
function OnNodeCreated(event, treeId, treeNode) {
//console.log(treeId);
//console.dir(treeNode);
//$(treeNode).contextMenu({x: 123, y: 123});
// console.dir($('#treeDemo_10'));
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1 id="s">单击节点控制</h1>
<h6>[ 文件路径: core/click.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、beforeClick / onClick 事件回调函数控制</h2>
<ul class="list">
<li>利用 click 事件回调函数 可以进行各种其他的附加操作，这里简单演示如何监控此事件</li>
<li><p><span class="highlight_red">请尝试按下 <b>Ctrl</b> 键进行 多节点选择 和 取消选择</span><br/>
click log:<br/>
<ul id="log" class="log"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li class="highlight_red">需要设置 setting.callback.beforeClick 和 setting.callback.onClick 属性, 详细请参见 API 文档中的相关内容</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>对 节点数据 没有特殊要求，用户可以根据自己的需求添加自定义属性</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<ul id="menu" class="small-menu">
<li class="edit"><a href="#">编辑</a></li>
<li class="cut"><a href="#">添加</a></li>
<li class="copy"><a href="#">删除</a></li>
<li class="small-menu-separator"></li>
<li class="delete"><a href="#"><span class="icon icon-edit"></span>Zoom Out</a></li>
</ul>
</div>
</BODY>
</HTML>
popupSmallMenu.rar （27个子文件） 
jquery.popupSmallMenu.js 2KB
images 
cut.png 648B page_white_copy.png 309B page_white_delete.png 536B page_white_paste.png 620B door.png 412B page_white_add.png 442B page_white_edit.png 618B jquery-1.8.2.min.js 91KB
jquery ui click.html 7KB zTree js jquery.ztree.core-3.5.js 55KB css demo.css 2KB zTreeStyle zTreeStyle.css 6KB img zTreeStandard.png 11KB
zTreeStandard.gif 5KB line_conn.gif 45B loading.gif 381B diy 4.png 399B 1_close.png 601B 3.png 762B 1_open.png 580B 7.png 534B 5.png 710B 2.png 570B 6.png 432B 8.png 529B 9.png 467B资源评论
