first commit

This commit is contained in:
jefferyzhao
2025-07-31 17:44:12 +08:00
commit b9bdc8598b
42390 changed files with 4467935 additions and 0 deletions

View File

@ -0,0 +1,191 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - async for All</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var demoMsg = {
async:"正在进行异步加载,请等一会儿再点击...",
expandAllOver: "全部展开完毕",
asyncAllOver: "后台异步加载完毕",
asyncAll: "已经异步加载完毕,不再重新加载",
expandAll: "已经异步加载完毕,使用 expandAll 方法"
}
var setting = {
async: {
enable: true,
url:"../asyncData/getNodes.php",
autoParam:["id", "name=n", "level=lv"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter,
type: "get"
},
callback: {
beforeAsync: beforeAsync,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError
}
};
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
function beforeAsync() {
curAsyncCount++;
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
curAsyncCount--;
if (curStatus == "expand") {
expandNodes(treeNode.children);
} else if (curStatus == "async") {
asyncNodes(treeNode.children);
}
if (curAsyncCount <= 0) {
if (curStatus != "init" && curStatus != "") {
$("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
asyncForAll = true;
}
curStatus = "";
}
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
curAsyncCount--;
if (curAsyncCount <= 0) {
curStatus = "";
if (treeNode!=null) asyncForAll = true;
}
}
var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
goAsync = false;
function expandAll() {
if (!check()) {
return;
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (asyncForAll) {
$("#demoMsg").text(demoMsg.expandAll);
zTree.expandAll(true);
} else {
expandNodes(zTree.getNodes());
if (!goAsync) {
$("#demoMsg").text(demoMsg.expandAll);
curStatus = "";
}
}
}
function expandNodes(nodes) {
if (!nodes) return;
curStatus = "expand";
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
for (var i=0, l=nodes.length; i<l; i++) {
zTree.expandNode(nodes[i], true, false, false);
if (nodes[i].isParent && nodes[i].zAsync) {
expandNodes(nodes[i].children);
} else {
goAsync = true;
}
}
}
function asyncAll() {
if (!check()) {
return;
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (asyncForAll) {
$("#demoMsg").text(demoMsg.asyncAll);
} else {
asyncNodes(zTree.getNodes());
if (!goAsync) {
$("#demoMsg").text(demoMsg.asyncAll);
curStatus = "";
}
}
}
function asyncNodes(nodes) {
if (!nodes) return;
curStatus = "async";
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
for (var i=0, l=nodes.length; i<l; i++) {
if (nodes[i].isParent && nodes[i].zAsync) {
asyncNodes(nodes[i].children);
} else {
goAsync = true;
zTree.reAsyncChildNodes(nodes[i], "refresh", true);
}
}
}
function reset() {
if (!check()) {
return;
}
asyncForAll = false;
goAsync = false;
$("#demoMsg").text("");
$.fn.zTree.init($("#treeDemo"), setting);
}
function check() {
if (curAsyncCount > 0) {
$("#demoMsg").text(demoMsg.async);
return false;
}
return true;
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
$("#expandAllBtn").bind("click", expandAll);
$("#asyncAllBtn").bind("click", asyncAll);
$("#resetBtn").bind("click", reset);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>异步加载模式下全部展开</h1>
<h6>[ 文件路径: super/asyncForAll.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>实现方法说明</h2>
<ul class="list">
<li>利用 onAsyncSuccess / onAsyncError 回调函数 和 reAsyncChildNodes 或 expandNode 方法可以实现全部功能。</li>
<li class="highlight_red">如果父节点数量很大,请注意利用延时进行控制,避免异步进程过多。</li>
<li class="highlight_red">建议:演示时请利用调试工具查看 network 的 ajax 加载过程。</li>
<li>演示操作
<br/><br/>
[ <a id="expandAllBtn" href="#" onclick="return false;">全部展开</a> ] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
[ <a id="asyncAllBtn" href="#" onclick="return false;">后台自动全部加载</a> ]<br/><br/>
[ <a id="resetBtn" href="#" onclick="return false;">Reset zTree</a> ]<br/><br/>
<p class="highlight_red" id="demoMsg"></p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

135
node_modules/@ztree/ztree_v3/demo/cn/super/awesome.html generated vendored Normal file
View File

@ -0,0 +1,135 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - awesome 风格</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Include font-awesome here, CDN is ok, or locally installed by bower to your project -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/awesomeStyle/awesome.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
check: {
enable: true
,chkStyle: 'radio'
,radioType: "level"
},
data: {
simpleData: {
enable: true
}
},
edit: {
enable: true
}
};
var zNodes =[
{ id:1, pId:0, name:"pNode 1", open:true},
{ id:11, pId:1, name:"pNode 11"},
{ id:111, pId:11, name:" sNode 111"},
{ id:112, pId:11, name:"sNode 112"},
{ id:113, pId:11, name:"sNode 113"},
{ id:114, pId:11, name:"sNode 114"},
{ id:12, pId:1, name:"pNode 12"},
{ id:121, pId:12, name:"sNode 121"},
{ id:122, pId:12, name:"sNode 122"},
{ id:123, pId:12, name:"sNode 123"},
{ id:124, pId:12, name:"sNode 124"},
{ id:13, pId:1, name:"pNode 13", isParent:true},
{ id:2, pId:0, name:"pNode 2"},
{ id:21, pId:2, name:"pNode 21", open:true},
{ id:211, pId:21, name:"sNode 211"},
{ id:212, pId:21, name:"sNode 212"},
{ id:213, pId:21, name:"sNode 213"},
{ id:214, pId:21, name:"sNode 214"},
{ id:22, pId:2, name:"pNode 22"},
{ id:221, pId:22, name:"sNode 221"},
{ id:222, pId:22, name:"sNode 222"},
{ id:223, pId:22, name:"sNode 223"},
{ id:224, pId:22, name:"sNode 224"},
{ id:23, pId:2, name:"pNode 23"},
{ id:231, pId:23, name:"sNode 231"},
{ id:232, pId:23, name:"sNode 232"},
{ id:233, pId:23, name:"sNode 233"},
{ id:234, pId:23, name:"sNode 234"},
{ id:3, pId:0, name:"pNode 3", isParent:true}
];
function setCheck() {
setting.check.chkStyle = $("#r1").attr("checked")? "checkbox":"radio";
setting.check.enable = (!$("#disablechk").attr("checked"));
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
$("#r1").bind("change", setCheck);
$("#r2").bind("change", setCheck);
$("#disablechk").bind("change", setCheck);
});
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
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.tId).unbind().remove();
};
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Awesome 风格</h1>
<h6>[ 文件路径: super/awesome.html ]</h6>
<div class="content_wrap">
<div class="bg left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>实现方法说明</h2>
<ul class="list">
<li>你需要在页面中引入 fontawesome 样式 http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css</li>
<li> <i class="fa fa-car"></i> &lt;= 小汽车图标 (如果 fontawesome 样式被正常加载,你可以正常看到)</li>
<li class="highlight_red">引入 适配 zTree 的 样式文件: 'css/awesomeStyle'</li>
<li>感谢 mikkelking 提供这个 Demo. (仅供参考)</li>
<li><p>Mode: <br/>
<label ><input type="radio" id="r1" class="radio first" name="r" value="checkbox" checked />
Checkbox</label>
<label><input type="radio" id="r2" class="radio" name="r" value="radio" /> Radio</label>
<label><input type="checkbox" id="disablechk" > Disable</label>
<br/>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,116 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - checkbox & radio</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var IDMark_A = "_a";
var setting = {
view: {
addDiyDom: addDiyDom
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"父节点 1", open:true},
{ id:11, pId:1, name:"叶子节点 1-1"},
{ 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"}
];
function addDiyDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + IDMark_A);
if (treeNode.level == 0) {
var editStr = "<input type='checkbox' class='checkboxBtn' id='checkbox_" +treeNode.id+ "' onfocus='this.blur();'></input>";
aObj.before(editStr);
var btn = $("#checkbox_"+treeNode.id);
if (btn) btn.bind("change", function() {checkAccessories(treeNode, btn);});
} else if (treeNode.level == 1) {
var editStr = "<input type='radio' class='radioBtn' id='radio_" +treeNode.id+ "' name='radio_"+treeNode.getParentNode().id+"' onfocus='this.blur();'></input>";
aObj.before(editStr);
var btn = $("#radio_"+treeNode.id);
if (btn) btn.bind("click", function() {checkBrand(treeNode, btn);});
}
}
function checkAccessories(treeNode, btn) {
var checkedRadio = getCheckedRadio("radio_"+treeNode.id);
if (btn.attr("checked")) {
if (!checkedRadio) {
$("#radio_" + treeNode.children[0].id).attr("checked", true);
}
} else {
checkedRadio.attr("checked", false);
}
}
function checkBrand(treeNode, btn) {
if (btn.attr("checked")) {
var pObj = $("#checkbox_" + treeNode.getParentNode().id);
if (!pObj.attr("checked")) {
pObj.attr("checked", true);
}
}
}
function getCheckedRadio(radioName) {
var r = document.getElementsByName(radioName);
for(var i=0; i<r.length; i++) {
if(r[i].checked) {
return $(r[i]);
}
}
return null;
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
.radioBtn {height: 16px;vertical-align: middle;}
.checkboxBtn {vertical-align: middle;margin-right: 2px;}
</style>
</HEAD>
<BODY>
<h1>checkbox / radio 共存</h1>
<h6>[ 文件路径: super/checkbox_radio.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>实现方法说明</h2>
<ul class="list">
<li>zTree 默认的 checkbox 和 radio 是无法共存的,但可以利用 自定义控件 的功能实现此需求,具体需求可以参考 "添加 自定义控件" 的详细说明</li>
<li class="highlight_red">对于 checkbox / radio 的联动规则,请根据需求制定自己的规则</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

177
node_modules/@ztree/ztree_v3/demo/cn/super/diydom.html generated vendored Normal file
View File

@ -0,0 +1,177 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - addHoverDom / removeHoverDom / addDiyDom</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var IDMark_Switch = "_switch",
IDMark_Icon = "_ico",
IDMark_Span = "_span",
IDMark_Input = "_input",
IDMark_Check = "_check",
IDMark_Edit = "_edit",
IDMark_Remove = "_remove",
IDMark_Ul = "_ul",
IDMark_A = "_a";
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
addDiyDom: addDiyDom
}
};
var zNodes =[
{id:1, name:"hover事件显示控件", open:true,
children:[
{id:11, name:"按钮1"},
{id:12, name:"按钮2"},
{id:13, name:"下拉框"},
{id:141, name:"文本1"},
{id:142, name:"文本2"},
{id:15, name:"超链接"}
]},
{id:2, name:"始终显示控件", open:true,
children:[
{id:21, name:"按钮1"},
{id:22, name:"按钮2"},
{id:23, name:"下拉框"},
{id:24, name:"文本"},
{id:25, name:"超链接"}
]}
];
function addHoverDom(treeId, treeNode) {
if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
var aObj = $("#" + treeNode.tId + IDMark_A);
if (treeNode.id == 11) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' >&nbsp;</span><span class='button icon03' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
aObj.append(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 12) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span class='button icon04' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 13) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' >&nbsp;</span><select class='selDemo ' id='diyBtn_" +treeNode.id+ "'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("change", function(){alert("diy Select value="+btn.attr("value")+" for " + treeNode.name);});
} else if (treeNode.id == 141) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span class='test' id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
aObj.append(editStr);
} else if (treeNode.id == 142) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
aObj.after(editStr);
} else if (treeNode.id == 15) {
if ($("#diyBtn1_"+treeNode.id).length>0) return;
if ($("#diyBtn2_"+treeNode.id).length>0) return;
var editStr = "<a id='diyBtn1_" +treeNode.id+ "' onclick='alert(1);return false;' style='margin:0 0 0 5px;'>链接1</a>" +
"<a id='diyBtn2_" +treeNode.id+ "' onclick='alert(2);return false;' style='margin:0 0 0 5px;'>链接2</a>";
aObj.append(editStr);
}
}
function removeHoverDom(treeId, treeNode) {
if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;
if (treeNode.id == 15) {
$("#diyBtn1_"+treeNode.id).unbind().remove();
$("#diyBtn2_"+treeNode.id).unbind().remove();
} else {
$("#diyBtn_"+treeNode.id).unbind().remove();
$("#diyBtn_space_" +treeNode.id).unbind().remove();
}
}
function addDiyDom(treeId, treeNode) {
if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
var aObj = $("#" + treeNode.tId + IDMark_A);
if (treeNode.id == 21) {
var editStr = "<span class='demoIcon' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'><span class='button icon01'></span></span>";
aObj.append(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 22) {
var editStr = "<span class='demoIcon' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'><span class='button icon02'></span></span>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 23) {
var editStr = "<select class='selDemo' id='diyBtn_" +treeNode.id+ "'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("change", function(){alert("diy Select value="+btn.attr("value")+" for " + treeNode.name);});
} else if (treeNode.id == 24) {
var editStr = "<span id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
aObj.after(editStr);
} else if (treeNode.id == 25) {
var editStr = "<a id='diyBtn1_" +treeNode.id+ "' onclick='alert(1);return false;'>链接1</a>" +
"<a id='diyBtn2_" +treeNode.id+ "' onclick='alert(2);return false;'>链接2</a>";
aObj.after(editStr);
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li span.demoIcon{padding:0 2px 0 10px;}
.ztree li span.button.icon01{margin:0; background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon02{margin:0; background: url(../../../css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon03{margin:0; background: url(../../../css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon04{margin:0; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon05{margin:0; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon06{margin:0; background: url(../../../css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>
</HEAD>
<BODY>
<h1>添加自定义控件</h1>
<h6>[ 文件路径: super/diydom.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、实现方法说明</h2>
<ul class="list">
<li>利用 setting.view.addHoverDom / removeHoverDom / addDiyDom 这几个参数的配置可以很容易的实现自定义控件的功能</li>
<li class="highlight_red">添加自定义控件,请务必掌握 zTree 节点对象的命名规则,以保证正常添加 DOM 控件</li>
<li class="highlight_red">如果添加标准的 select / checkbox / radio 等,请注意适当调整 zTree 的布局 css保证 zTree 能正常显示</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>使用 setting.view.addHoverDom / removeHoverDom / addDiyDom 属性,详细请参见 API 文档中的相关内容</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>对 节点数据 没有特殊要求,用户可以根据自己的需求添加自定义属性</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,253 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - drag with other DOM</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>-->
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var MoveTest = {
errorMsg: "放错了...请选择正确的类别!",
curTarget: null,
curTmpTarget: null,
noSel: function() {
try {
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
} catch(e){}
},
dragTree2Dom: function(treeId, treeNodes) {
return !treeNodes[0].isParent;
},
prevTree: function(treeId, treeNodes, targetNode) {
return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
},
nextTree: function(treeId, treeNodes, targetNode) {
return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
},
innerTree: function(treeId, treeNodes, targetNode) {
return targetNode!=null && targetNode.isParent && targetNode.tId == treeNodes[0].parentTId;
},
dragMove: function(e, treeId, treeNodes) {
var p = null, pId = 'dom_' + treeNodes[0].pId;
if (e.target.id == pId) {
p = $(e.target);
} else {
p = $(e.target).parent('#' + pId);
if (!p.get(0)) {
p = null;
}
}
$('.domBtnDiv .active').removeClass('active');
if (p) {
p.addClass('active');
}
},
dropTree2Dom: function(e, treeId, treeNodes, targetNode, moveType) {
var domId = "dom_" + treeNodes[0].getParentNode().id;
if (moveType == null && (domId == e.target.id || $(e.target).parents("#" + domId).length > 0)) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.removeNode(treeNodes[0]);
var newDom = $("span[domId=" + treeNodes[0].id + "]");
if (newDom.length > 0) {
newDom.removeClass("domBtn_Disabled");
newDom.addClass("domBtn");
} else {
$("#" + domId).append("<span class='domBtn' domId='" + treeNodes[0].id + "'>" + treeNodes[0].name + "</span>");
}
MoveTest.updateType();
} else if ( $(e.target).parents(".domBtnDiv").length > 0) {
alert(MoveTest.errorMsg);
}
},
dom2Tree: function(e, treeId, treeNode) {
var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
if (!target) return;
var zTree = $.fn.zTree.getZTreeObj("treeDemo"), parentNode;
if (treeNode != null && treeNode.isParent && "dom_" + treeNode.id == target.parent().attr("id")) {
parentNode = treeNode;
} else if (treeNode != null && !treeNode.isParent && "dom_" + treeNode.getParentNode().id == target.parent().attr("id")) {
parentNode = treeNode.getParentNode();
}
if (tmpTarget) tmpTarget.remove();
if (!!parentNode) {
var nodes = zTree.addNodes(parentNode, {id:target.attr("domId"), name: target.text()});
zTree.selectNode(nodes[0]);
} else {
target.removeClass("domBtn_Disabled");
target.addClass("domBtn");
alert(MoveTest.errorMsg);
}
MoveTest.updateType();
MoveTest.curTarget = null;
MoveTest.curTmpTarget = null;
},
updateType: function() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getNodes();
for (var i=0, l=nodes.length; i<l; i++) {
var num = nodes[i].children ? nodes[i].children.length : 0;
nodes[i].name = nodes[i].name.replace(/ \(.*\)/gi, "") + " (" + num + ")";
zTree.updateNode(nodes[i]);
}
},
bindDom: function() {
$(".domBtnDiv").bind("mousedown", MoveTest.bindMouseDown);
},
bindMouseDown: function(e) {
var target = e.target;
if (target!=null && target.className=="domBtn") {
var doc = $(document), target = $(target),
docScrollTop = doc.scrollTop(),
docScrollLeft = doc.scrollLeft();
target.addClass("domBtn_Disabled");
target.removeClass("domBtn");
curDom = $("<span class='dom_tmp domBtn'>" + target.text() + "</span>");
curDom.appendTo("body");
curDom.css({
"top": (e.clientY + docScrollTop + 3) + "px",
"left": (e.clientX + docScrollLeft + 3) + "px"
});
MoveTest.curTarget = target;
MoveTest.curTmpTarget = curDom;
doc.bind("mousemove", MoveTest.bindMouseMove);
doc.bind("mouseup", MoveTest.bindMouseUp);
doc.bind("selectstart", MoveTest.docSelect);
}
if(e.preventDefault) {
e.preventDefault();
}
},
bindMouseMove: function(e) {
MoveTest.noSel();
var doc = $(document),
docScrollTop = doc.scrollTop(),
docScrollLeft = doc.scrollLeft(),
tmpTarget = MoveTest.curTmpTarget;
if (tmpTarget) {
tmpTarget.css({
"top": (e.clientY + docScrollTop + 3) + "px",
"left": (e.clientX + docScrollLeft + 3) + "px"
});
}
return false;
},
bindMouseUp: function(e) {
var doc = $(document);
doc.unbind("mousemove", MoveTest.bindMouseMove);
doc.unbind("mouseup", MoveTest.bindMouseUp);
doc.unbind("selectstart", MoveTest.docSelect);
var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
if (tmpTarget) tmpTarget.remove();
if ($(e.target).parents("#treeDemo").length == 0) {
if (target) {
target.removeClass("domBtn_Disabled");
target.addClass("domBtn");
}
MoveTest.curTarget = null;
MoveTest.curTmpTarget = null;
}
},
bindSelect: function() {
return false;
}
};
var setting = {
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
drag: {
prev: MoveTest.prevTree,
next: MoveTest.nextTree,
inner: MoveTest.innerTree
}
},
data: {
keep: {
parent: true,
leaf: true
},
simpleData: {
enable: true
}
},
callback: {
beforeDrag: MoveTest.dragTree2Dom,
onDrop: MoveTest.dropTree2Dom,
onDragMove: MoveTest.dragMove,
onMouseUp: MoveTest.dom2Tree
},
view: {
selectedMulti: false
}
};
var zNodes =[
{ id:1, pId:0, name:"植物", isParent: true, open:true},
{ id:2, pId:0, name:"动物", isParent: true, open:true},
{ id:20, pId:2, name:"大象"},
{ id:29, pId:2, name:"鲨鱼"},
{ id:10, pId:1, name:"大白菜"},
{ id:19, pId:1, name:"西红柿"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
MoveTest.updateType();
MoveTest.bindDom();
});
//-->
</SCRIPT>
<style type="text/css">
.dom_line {margin:2px;border-bottom:1px gray dotted;height:1px}
.domBtnDiv {display:block;padding:2px;border:1px gray dotted;background-color:powderblue}
.categoryDiv {display:inline-block; width:335px}
.domBtn {display:inline-block;cursor:pointer;padding:2px;margin:2px 10px;border:1px gray solid;background-color:#FFE6B0}
.domBtn_Disabled {display:inline-block;cursor:default;padding:2px;margin:2px 10px;border:1px gray solid;background-color:#DFDFDF;color:#999999}
.dom_tmp {position:absolute;font-size:12px;}
.active {background-color: #93C3CF}
</style>
</HEAD>
<BODY>
<h1>与其他 DOM 拖拽互动</h1>
<h6>[ 文件路径: super/dragWithOther.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>实现方法说明</h2>
<ul class="list">
<li>zTree v3.2 版本修正了 onDrag/onDrop 中的 event 对象; v3.5.16 版本增加了 onDragMove; 因此可以较容易的控制将节点拖拽到其他 DOM </li>
<li class="highlight_red">将其他 DOM 拖拽到 zTree 需要自己制作相关的拖拽代码</li>
<li class="highlight_red">这仅仅是一个最简单的演示,如果需要更炫的效果,需要制作更复杂的代码</li>
</ul>
</li>
<li class="title"><h2>请拖拽下面内容到 树节点上</h2>
<div class="domBtnDiv">
<div id="dom_1" class="categoryDiv"><span class="domBtn" domId="11">大树</span><span class="domBtn" domId="12">小草</span><span class="domBtn" domId="13">花朵</span></div>
<div class="dom_line"></div>
<div id="dom_2" class="categoryDiv"><span class="domBtn" domId="21">老虎</span><span class="domBtn" domId="22">狗熊</span><span class="domBtn" domId="23">狮子</span></div>
</div>
<span class="highlight_red">也可以把二级节点拖拽到以上图层 </span>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - fuzzySearch</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exhide.js"></script>
<script type="text/javascript" src="../../js/fuzzysearch.js"></script>
<SCRIPT type="text/javascript">
var setting = {
check: {
enable: true//checkbox
},
view: {
nameIsHTML: true, //允许name支持html
selectedMulti: false
},
edit: {
enable: false,
editNameSelectAll: false
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"模糊搜索演示 1", t:"id=1", open:true},
{ id:11, pId:1, name:"[]\\^$.|?*+():关键字可以是js正则元字符", t:"id=11"},
{ id:12, pId:1, name:"{}<>'\"~`!@#%&-;:/,=:关键字可以是其他字符", t:"id=12"},
{ id:2, pId:0, name:"模糊搜索演示 2", t:"id=2", open:true},
{ id:21, pId:2, name:"大写ABDEFGHINQRT:关键字查找不区分大小写", t:"id=21"},
{ id:22, pId:2, name:"小写abdefghinqrt:关键字查找不区分大小写", t:"id=21"},
{ id:3, pId:0, name:"模糊搜索演示 3", t:"id=3", open:true },
{ id:31, pId:3, name:"空 格:关键字是空格", t:"id=31"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
fuzzySearch('treeDemo','#key',null,true); //初始化模糊搜索方法
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>根据关键字模糊查找节点</h1>
<h6>[ 文件路径: super/fuzzySearch.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、fuzzySearch()方法使用说明</h2>
<ul class="list">
<li class="highlight_red">
@param zTreeId ztree对象的id,不需要#
</li>
<li class="highlight_red">
@param searchField 输入框选择器
</li>
<li class="highlight_red">
@param isHighLight 是否高亮,默认高亮,传入false禁用
</li>
<li class="highlight_red">
@param isExpand 是否展开,默认合拢,传入true展开
</li>
<li class="highlight_red">
fuzzySearch ( zTreeId, searchField, isHighLight, isExpand )
</li>
<li><p>搜索试试看:<br/>
关键字:<input type="text" id="key" value="" class="empty" placeholder="请输入关键字"/><br/>
</p>
</li>
</ul>
</li>
<li class="title"><h2>2、依赖的js</h2>
<ul class="list">
<li>ztree v3.5.19.1及以上,使用到getPath()方法</li>
<li>ztree.exhide扩展,使用到hideNode()方法</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,102 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Keyboard navigation </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/keyboard_navigation.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"Custom Icon 01", open:true, iconSkin:"pIcon01", accesskey: 'c'},
{ id:11, pId:1, name:"leaf node 01", iconSkin:"icon01", accesskey: 'l'},
{ id:12, pId:1, name:"leaf node 02", iconSkin:"icon02"},
{ id:13, pId:1, name:"parent node 03", iconSkin:"pIcon01", accesskey: 'p'},
{ id:131, pId:13, name:"leaf node 01", iconSkin:"icon01"},
{ id:132, pId:13, name:"leaf node 02", iconSkin:"icon02"},
{ id:133, pId:13, name:"leaf node 03", iconSkin:"icon03"},
{ id:2, pId:0, name:"Custom Icon 02", open:true, iconSkin:"pIcon02"},
{ id:21, pId:2, name:"leaf node 01", iconSkin:"icon04"},
{ id:22, pId:2, name:"leaf node 02", iconSkin:"icon05"},
{ id:23, pId:2, name:"leaf node 03", iconSkin:"icon06"},
{ id:3, pId:0, name:"no Custom Icon", open:true, accesskey: 'n' },
{ id:31, pId:3, name:"leaf node 01"},
{ id:32, pId:3, name:"leaf node 02"},
{ id:33, pId:3, name:"leaf node 03"}
];
var $ = jQuery;
$(document).ready(function()
{
var element = "#treeDemo";
var zTree = $.fn.zTree.init($(element), setting, zNodes);
// Initialize keyboard navigation
$.fn.zTreeKeyboardNavigation(zTree, document.body);
});
</SCRIPT>
<style type="text/css">
.ztree li > a
{
border-left: 1px solid white;
}
.ztree li > a.curSelectedNode {
border-radius: 3px;
}
.ztree li span.button.pIcon01_ico_open{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_open.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.pIcon01_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_close.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.pIcon02_ico_open, .ztree li span.button.pIcon02_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/2.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon01_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon02_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon03_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon04_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon05_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon06_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>
</HEAD>
<BODY>
<h1>设置快捷键</h1>
<h6>[ 文件路径: super/keyboard_navigation.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、设置说明</h2>
<ul class="list">
<li>键盘导航不需要特殊配置。</li>
<li>只需要加载 keyboard_navigation.js 文件并初始化。</li>
</ul>
</li>
<li class="title"><h2>2、快捷键说明</h2>
<ul class="list">
<li>Home (keycode 36):定位到第一个根节点</li>
<li>End (keycode 35):定位到树上最后一个节点</li>
<li>下 (keycode 39):定位到下一个同级节点</li>
<li>右 (keycode 40):定位到下一个可视节点(包括子节点/同级节点 以及后面的父级节点)</li>
<li>上 (keycode 37):定位到前一个同级节点</li>
<li>左 (keycode 38):定位到前一个可视节点(包括子节点/同级节点 以及后面的父级节点)</li>
<li>空格 (keycode 32):切换当前父节点 折叠、展开状态</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,152 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - left_menu</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var curMenu = null, zTree_Menu = null;
var setting = {
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onNodeCreated: this.onNodeCreated,
beforeClick: this.beforeClick,
onClick: this.onClick
}
};
var zNodes =[
{ id:1, pId:0, name:"主菜单 1", open:true},
{ id:11, pId:1, name:"子菜单 1-1"},
{ id:111, pId:11, name:"叶子节点 1-1-1"},
{ id:112, pId:11, name:"叶子节点 1-1-2"},
{ id:113, pId:11, name:"叶子节点 1-1-3"},
{ id:114, pId:11, name:"叶子节点 1-1-4"},
{ id:12, pId:1, name:"子菜单 1-2"},
{ id:121, pId:12, name:"叶子节点 1-2-1"},
{ id:122, pId:12, name:"叶子节点 1-2-2"},
{ id:123, pId:12, name:"叶子节点 1-2-3"},
{ id:124, pId:12, name:"叶子节点 1-2-4"},
{ id:2, pId:0, name:"主菜单 2"},
{ id:21, pId:2, name:"子菜单 2-1"},
{ id:211, pId:21, name:"叶子节点 2-1-1"},
{ id:212, pId:21, name:"叶子节点 2-1-2"},
{ id:213, pId:21, name:"叶子节点 2-1-3"},
{ id:214, pId:21, name:"叶子节点 2-1-4"},
{ id:22, pId:2, name:"子菜单 2-2"},
{ id:221, pId:22, name:"叶子节点 2-2-1"},
{ id:222, pId:22, name:"叶子节点 2-2-2"},
{ id:223, pId:22, name:"叶子节点 2-2-3"},
{ id:224, pId:22, name:"叶子节点 2-2-4"},
{ id:3, pId:0, name:"主菜单 3"},
{ id:31, pId:3, name:"子菜单 3-1"},
{ id:311, pId:31, name:"叶子节点 3-1-1"},
{ id:312, pId:31, name:"叶子节点 3-1-2"},
{ id:313, pId:31, name:"叶子节点 3-1-3"},
{ id:314, pId:31, name:"叶子节点 3-1-4"},
{ id:32, pId:3, name:"子菜单 3-2"},
{ id:321, pId:32, name:"叶子节点 3-2-1"},
{ id:322, pId:32, name:"叶子节点 3-2-2"},
{ id:323, pId:32, name:"叶子节点 3-2-3"},
{ id:324, pId:32, name:"叶子节点 3-2-4"}
];
function beforeClick(treeId, node) {
if (node.isParent) {
if (node.level === 0) {
var pNode = curMenu;
while (pNode && pNode.level !==0) {
pNode = pNode.getParentNode();
}
if (pNode !== node) {
var a = $("#" + pNode.tId + "_a");
a.removeClass("cur");
zTree_Menu.expandNode(pNode, false);
}
a = $("#" + node.tId + "_a");
a.addClass("cur");
var isOpen = false;
for (var i=0,l=node.children.length; i<l; i++) {
if(node.children[i].open) {
isOpen = true;
break;
}
}
if (isOpen) {
zTree_Menu.expandNode(node, true);
curMenu = node;
} else {
zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);
curMenu = node.children[0];
}
} else {
zTree_Menu.expandNode(node);
}
}
return !node.isParent;
}
function onClick(e, treeId, node) {
alert("Do what you want to do!");
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
zTree_Menu.selectNode(curMenu);
var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
a.addClass("cur");
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li a.level0 {width:200px;height: 20px; text-align: center; display:block; background-color: #0B61A4; border:1px silver solid;}
.ztree li a.level0.cur {background-color: #66A3D2; }
.ztree li a.level0 span {display: block; color: white; padding-top:3px; font-size:12px; font-weight: bold;word-spacing: 2px;}
.ztree li a.level0 span.button { float:right; margin-left: 10px; visibility: visible;display:none;}
.ztree li span.button.switch.level0 {display:none;}
</style>
</HEAD>
<BODY>
<h1>左侧菜单</h1>
<h6>[ 文件路径: super/left_menu.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>实现方法说明</h2>
<ul class="list">
<li>在 “Demo 演示”中的左侧菜单就是用 zTree 实现的,主要是靠 css 样式负责排版,利用 setting 中的配置进行功能制作,本 Demo 对实现 左侧菜单进行简单的介绍,你也可以通过查看 “Demo 演示”页面的源码深入了解。</li>
<li class="highlight_red">1、关于 css 完全可以根据自己的需要进行个性化调整,例如:此 Demo 的菜单样式 就 与 “Demo 演示”页面的不一样,仅供对比参考</li>
<li class="highlight_red">2、主要用到的配置有<br/>
&nbsp;&nbsp;&nbsp;&nbsp;setting.view.showIcon / showLine / selectedMulti / dblClickExpand<br/>
&nbsp;&nbsp;&nbsp;&nbsp;setting.callback.onNodeCreated / beforeClick / onClick
</li>
<li>3、是否需要限制单一路径展开完全由你的需求而定实现代码可参考 "保持展开单一路径"</li>
<li>4、其他辅助规则请根据实际情况自行编写</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 B

View File

@ -0,0 +1,136 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - left_menu for Outlook</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<SCRIPT type="text/javascript">
<!--
var curMenu = null, zTree_Menu = null;
var setting = {
view: {
showLine: false,
showIcon: false,
selectedMulti: false,
dblClickExpand: false,
addDiyDom: addDiyDom
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick
}
};
var zNodes =[
{ id:1, pId:0, name:"文件夹", open:true},
{ id:11, pId:1, name:"收件箱"},
{ id:111, pId:11, name:"收件箱1"},
{ id:112, pId:111, name:"收件箱2"},
{ id:113, pId:112, name:"收件箱3"},
{ id:114, pId:113, name:"收件箱4"},
{ id:12, pId:1, name:"垃圾邮件"},
{ id:13, pId:1, name:"草稿"},
{ id:14, pId:1, name:"已发送邮件"},
{ id:15, pId:1, name:"已删除邮件"},
{ id:3, pId:0, name:"快速视图"},
{ id:31, pId:3, name:"文档"},
{ id:32, pId:3, name:"照片"}
];
function addDiyDom(treeId, treeNode) {
var spaceWidth = 5;
var switchObj = $("#" + treeNode.tId + "_switch"),
icoObj = $("#" + treeNode.tId + "_ico");
switchObj.remove();
icoObj.before(switchObj);
if (treeNode.level > 1) {
var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
switchObj.before(spaceStr);
}
}
function beforeClick(treeId, treeNode) {
if (treeNode.level == 0 ) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.expandNode(treeNode);
return false;
}
return true;
}
$(document).ready(function(){
var treeObj = $("#treeDemo");
$.fn.zTree.init(treeObj, setting, zNodes);
zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
zTree_Menu.selectNode(curMenu);
treeObj.hover(function () {
if (!treeObj.hasClass("showIcon")) {
treeObj.addClass("showIcon");
}
}, function() {
treeObj.removeClass("showIcon");
});
});
//-->
</SCRIPT>
<style type="text/css">
.ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
.ztree li ul{ margin:0; padding:0}
.ztree li {line-height:30px;}
.ztree li a {width:200px;height:30px;padding-top: 0px;}
.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
.ztree li a span.button.switch {visibility:hidden}
.ztree.showIcon li a span.button.switch {visibility:visible}
.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
.ztree li span {line-height:30px;}
.ztree li span.button {margin-top: -7px;}
.ztree li span.button.switch {width: 16px;height: 16px;}
.ztree li a.level0 span {font-size: 150%;font-weight: bold;}
.ztree li span.button {background-image:url("./left_menuForOutLook.png"); *background-image:url("./left_menuForOutLook.gif")}
.ztree li span.button.switch.level0 {width: 20px; height:20px}
.ztree li span.button.switch.level1 {width: 20px; height:20px}
.ztree li span.button.noline_open {background-position: 0 0;}
.ztree li span.button.noline_close {background-position: -18px 0;}
.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
</style>
</HEAD>
<BODY>
<h1>OutLook 样式的左侧菜单</h1>
<h6>[ 文件路径: super/left_menuForOutLook.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>实现方法说明</h2>
<ul class="list">
<li>帮朋友用 zTree 实现了一个貌似 Outlook.com 的菜单,特拿出来分享给大家</li>
<li class="highlight_red">1、请注意本页面源码中的 css 部分</li>
<li class="highlight_red">2、请查看源码中 js 的使用,特别是利用 addDiyDom 回调将 展开按钮 转移到 &lt;a&gt; 标签内</li>
<li class="highlight_red">3、利用添加 zTree 的 class 实现展开按钮的隐藏、显示</li>
<li>4、其他辅助规则请根据实际情况自行编写</li>
<li>5、当前规则说明:<br/>
&nbsp;&nbsp;单击根节点可以展开、折叠;<br/>
&nbsp;&nbsp;非根节点只有点击 箭头 图标才可以展开、折叠;<br/>
</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

Binary file not shown.

After

Width:  |  Height:  |  Size: 421 B

109
node_modules/@ztree/ztree_v3/demo/cn/super/metro.html generated vendored Normal file
View File

@ -0,0 +1,109 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
edit: {
enable: true
}
};
var zNodes =[
{ id:1, pId:0, name:"父节点1", open:true},
{ id:11, pId:1, name:"父节点11"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13", isParent:true},
{ id:2, pId:0, name:"父节点2"},
{ id:21, pId:2, name:"父节点21", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
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.tId).unbind().remove();
};
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Metro 风格</h1>
<h6>[ 文件路径: super/metro.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、样式文件说明</h2>
<ul class="list">
<li class="highlight_red">请使用 css/metroStyle 目录内的样式文件 和 图片</li>
<li>感谢网友 rqx110 提供, 仅供参考</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - one click</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
dblClickExpand: false,
showLine: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: onClick
}
};
var zNodes =[
{ id:1, pId:0, name:"根 Root", open:true},
{ id:11, pId:1, name:"父节点 1-1", open:true},
{ id:111, pId:11, name:"叶子节点 1-1-1"},
{ id:112, pId:11, name:"叶子节点 1-1-2"},
{ id:113, pId:11, name:"叶子节点 1-1-3"},
{ id:114, pId:11, name:"叶子节点 1-1-4"},
{ id:12, pId:1, name:"父节点 1-2", open:true},
{ id:121, pId:12, name:"叶子节点 1-2-1"},
{ id:122, pId:12, name:"叶子节点 1-2-2"},
{ id:123, pId:12, name:"叶子节点 1-2-3"},
{ id:124, pId:12, name:"叶子节点 1-2-4"},
{ id:13, pId:1, name:"父节点 1-3", open:true},
{ id:131, pId:13, name:"叶子节点 1-3-1"},
{ id:132, pId:13, name:"叶子节点 1-3-2"},
{ id:133, pId:13, name:"叶子节点 1-3-3"},
{ id:134, pId:13, name:"叶子节点 1-3-4"}
];
function onClick(e,treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.expandNode(treeNode);
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li button.switch {visibility:hidden; width:1px;}
.ztree li button.switch.roots_docu {visibility:visible; width:16px;}
.ztree li button.switch.center_docu {visibility:visible; width:16px;}
.ztree li button.switch.bottom_docu {visibility:visible; width:16px;}
</style>
</HEAD>
<BODY>
<h1>单击展开/折叠节点</h1>
<h6>[ 文件路径: super/oneclick.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>实现方法说明</h2>
<ul class="list">
<li>zTree 默认不提供单击展开节点的功能,但可以利用 onClick 事件回调函数轻松实现此功能</li>
<li class="highlight_red">为了避免与双击功能冲突,建议关闭双击展开节点的功能,请设置 setting.view.dblClickExpand = false </li>
<li class="highlight_red">可以将所有的 +/- 开关隐藏,请查看本页面源码,查看 css 设置 </li>
<li class="highlight_red">由于 +/- 开关与 节点连接线是配套的,所以如果不显示 +/- 开关的话,那么请设置 setting.view.showLine = false 隐藏连接线 </li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - one root</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
dblClickExpand: dblClickExpand
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"根 Root", open:true},
{ id:11, pId:1, name:"父节点 1-1", open:true},
{ id:111, pId:11, name:"叶子节点 1-1-1"},
{ id:112, pId:11, name:"叶子节点 1-1-2"},
{ id:113, pId:11, name:"叶子节点 1-1-3"},
{ id:114, pId:11, name:"叶子节点 1-1-4"},
{ id:12, pId:1, name:"父节点 1-2", open:true},
{ id:121, pId:12, name:"叶子节点 1-2-1"},
{ id:122, pId:12, name:"叶子节点 1-2-2"},
{ id:123, pId:12, name:"叶子节点 1-2-3"},
{ id:124, pId:12, name:"叶子节点 1-2-4"},
{ id:13, pId:1, name:"父节点 1-3", open:true},
{ id:131, pId:13, name:"叶子节点 1-3-1"},
{ id:132, pId:13, name:"叶子节点 1-3-2"},
{ id:133, pId:13, name:"叶子节点 1-3-3"},
{ id:134, pId:13, name:"叶子节点 1-3-4"}
];
function dblClickExpand(treeId, treeNode) {
return treeNode.level > 0;
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li span.button.switch.level0 {visibility:hidden; width:1px;}
.ztree li ul.level0 {padding:0; background:none;}
</style>
</HEAD>
<BODY>
<h1>冻结根节点</h1>
<h6>[ 文件路径: super/oneroot.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>实现方法说明</h2>
<ul class="list">
<li>对于这种只有一个根节点,且不显示 +/- 开关的需求,需要利用 css、setting 配合使用</li>
<li class="highlight_red">zTree v3.x 可以针对指定的 level进行样式设定请查看本页面源码查看 css 设置</li>
<li class="highlight_red">设置 setting.view.dblClickExpand 指向 Function可以只针对根节点关闭双击展开的操作</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,171 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - select menu</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
dblClickExpand: false
},
check: {
enable: true
},
callback: {
onRightClick: OnRightClick
}
};
var zNodes =[
{id:1, name:"无右键菜单 1", open:true, noR:true,
children:[
{id:11, name:"节点 1-1", noR:true},
{id:12, name:"节点 1-2", noR:true}
]},
{id:2, name:"右键操作 2", open:true,
children:[
{id:21, name:"节点 2-1"},
{id:22, name:"节点 2-2"},
{id:23, name:"节点 2-3"},
{id:24, name:"节点 2-4"}
]},
{id:3, name:"右键操作 3", open:true,
children:[
{id:31, name:"节点 3-1"},
{id:32, name:"节点 3-2"},
{id:33, name:"节点 3-3"},
{id:34, name:"节点 3-4"}
]}
];
function OnRightClick(event, treeId, treeNode) {
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
showRMenu("root", event.clientX, event.clientY);
} else if (treeNode && !treeNode.noR) {
zTree.selectNode(treeNode);
showRMenu("node", event.clientX, event.clientY);
}
}
function showRMenu(type, x, y) {
$("#rMenu ul").show();
if (type=="root") {
$("#m_del").hide();
$("#m_check").hide();
$("#m_unCheck").hide();
} else {
$("#m_del").show();
$("#m_check").show();
$("#m_unCheck").show();
}
y += document.body.scrollTop;
x += document.body.scrollLeft;
rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
$("body").bind("mousedown", onBodyMouseDown);
}
function hideRMenu() {
if (rMenu) rMenu.css({"visibility": "hidden"});
$("body").unbind("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event){
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility" : "hidden"});
}
}
var addCount = 1;
function addTreeNode() {
hideRMenu();
var newNode = { name:"增加" + (addCount++)};
if (zTree.getSelectedNodes()[0]) {
newNode.checked = zTree.getSelectedNodes()[0].checked;
zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
} else {
zTree.addNodes(null, newNode);
}
}
function removeTreeNode() {
hideRMenu();
var nodes = zTree.getSelectedNodes();
if (nodes && nodes.length>0) {
if (nodes[0].children && nodes[0].children.length > 0) {
var msg = "要删除的节点是父节点,如果删除将连同子节点一起删掉。\n\n请确认";
if (confirm(msg)==true){
zTree.removeNode(nodes[0]);
}
} else {
zTree.removeNode(nodes[0]);
}
}
}
function checkTreeNode(checked) {
var nodes = zTree.getSelectedNodes();
if (nodes && nodes.length>0) {
zTree.checkNode(nodes[0], checked, true);
}
hideRMenu();
}
function resetTree() {
hideRMenu();
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
var zTree, rMenu;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
rMenu = $("#rMenu");
});
//-->
</SCRIPT>
<style type="text/css">
div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
div#rMenu ul li{
margin: 1px 0;
padding: 0 5px;
cursor: pointer;
list-style: none outside none;
background-color: #DFDFDF;
}
</style>
</HEAD>
<BODY>
<h1>右键菜单的实现</h1>
<h6>[ 文件路径: super/rightClickMenu.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>实现方法说明</h2>
<ul class="list">
<li>利用 beforeRightClick / onRightClick 事件回调函数简单实现的右键菜单</li>
<li class="highlight_red">Demo 中的菜单比较简陋,你完全可以配合其他自定义样式的菜单图层混合使用</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="rMenu">
<ul>
<li id="m_add" onclick="addTreeNode();">增加节点</li>
<li id="m_del" onclick="removeTreeNode();">删除节点</li>
<li id="m_check" onclick="checkTreeNode(true);">Check节点</li>
<li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li>
<li id="m_reset" onclick="resetTree();">恢复zTree</li>
</ul>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,124 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - select menu</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
var zNodes =[
{id:1, pId:0, name:"北京"},
{id:2, pId:0, name:"天津"},
{id:3, pId:0, name:"上海"},
{id:6, pId:0, name:"重庆"},
{id:4, pId:0, name:"河北省", open:true},
{id:41, pId:4, name:"石家庄"},
{id:42, pId:4, name:"保定"},
{id:43, pId:4, name:"邯郸"},
{id:44, pId:4, name:"承德"},
{id:5, pId:0, name:"广东省", open:true},
{id:51, pId:5, name:"广州"},
{id:52, pId:5, name:"深圳"},
{id:53, pId:5, name:"东莞"},
{id:54, pId:5, name:"佛山"},
{id:6, pId:0, name:"福建省", open:true},
{id:61, pId:6, name:"福州"},
{id:62, pId:6, name:"厦门"},
{id:63, pId:6, name:"泉州"},
{id:64, pId:6, name:"三明"}
];
function beforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
if (!check) alert("只能选择城市...");
return check;
}
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
v = "";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
}
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
</style>
</HEAD>
<BODY>
<h1>下拉菜单</h1>
<h6>[ 文件路径: super/select_menu.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul class="list">
<li class="title">&nbsp;&nbsp;<span class="highlight_red">选择城市时,按下 Ctrl 或 Cmd 键可以进行多选</span></li>
<li class="title">&nbsp;&nbsp;城市:<input id="citySel" type="text" readonly value="" style="width:120px;"/>
&nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a></li>
</ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>实现方法说明</h2>
<ul class="list">
<li>用 zTree 实现这种下拉菜单,应该说是比较容易的,你只需要控制 zTree 所在容器的隐藏/显示,以及位置即可。</li>
<li class="highlight_red">zTree v3.x 实现了多点选中功能,因此对于需要多选的下拉菜单也易如反掌。</li>
<li class="highlight_red">利用 setting 的各项配置参数,完全可以满足大部分的功能需求。</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,126 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - checkbox select menu</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true,
chkboxType: {"Y":"", "N":""}
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onCheck: onCheck
}
};
var zNodes =[
{id:1, pId:0, name:"北京"},
{id:2, pId:0, name:"天津"},
{id:3, pId:0, name:"上海"},
{id:6, pId:0, name:"重庆"},
{id:4, pId:0, name:"河北省", open:true, nocheck:true},
{id:41, pId:4, name:"石家庄"},
{id:42, pId:4, name:"保定"},
{id:43, pId:4, name:"邯郸"},
{id:44, pId:4, name:"承德"},
{id:5, pId:0, name:"广东省", open:true, nocheck:true},
{id:51, pId:5, name:"广州"},
{id:52, pId:5, name:"深圳"},
{id:53, pId:5, name:"东莞"},
{id:54, pId:5, name:"佛山"},
{id:6, pId:0, name:"福建省", open:true, nocheck:true},
{id:61, pId:6, name:"福州"},
{id:62, pId:6, name:"厦门"},
{id:63, pId:6, name:"泉州"},
{id:64, pId:6, name:"三明"}
];
function beforeClick(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true),
v = "";
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
}
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
</style>
</HEAD>
<BODY>
<h1>带 checkbox 的多选下拉菜单 -- zTree</h1>
<h6>[ 文件路径: super/select_menu_checkbox.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul class="list">
<li class="title">&nbsp;&nbsp;<span class="highlight_red">勾选 checkbox 或者 点击节点 进行选择</span></li>
<li class="title">&nbsp;&nbsp;Test: <input id="citySel" type="text" readonly value="" style="width:120px;" onclick="showMenu();" />
&nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">select</a></li>
</ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>实现方法说明</h2>
<ul class="list">
<li>用 checkbox 也可以轻松实现多选的下拉菜单</li>
<li>此 Demo 主要用于 和 其他下拉菜单进行对比</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - radio select menu</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: onClick,
onCheck: onCheck
}
};
var zNodes =[
{id:1, pId:0, name:"北京"},
{id:2, pId:0, name:"天津"},
{id:3, pId:0, name:"上海"},
{id:6, pId:0, name:"重庆"},
{id:4, pId:0, name:"河北省", open:true, nocheck:true},
{id:41, pId:4, name:"石家庄"},
{id:42, pId:4, name:"保定"},
{id:43, pId:4, name:"邯郸"},
{id:44, pId:4, name:"承德"},
{id:5, pId:0, name:"广东省", open:true, nocheck:true},
{id:51, pId:5, name:"广州"},
{id:52, pId:5, name:"深圳"},
{id:53, pId:5, name:"东莞"},
{id:54, pId:5, name:"佛山"},
{id:6, pId:0, name:"福建省", open:true, nocheck:true},
{id:61, pId:6, name:"福州"},
{id:62, pId:6, name:"厦门"},
{id:63, pId:6, name:"泉州"},
{id:64, pId:6, name:"三明"}
];
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true),
v = "";
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
}
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
</style>
</HEAD>
<BODY>
<h1>带 radio 的单选下拉菜单 -- zTree</h1>
<h6>[ 文件路径: super/select_menu_radio.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul class="list">
<li class="title">&nbsp;&nbsp;<span class="highlight_red">勾选 radio 或者 点击节点 进行选择</span></li>
<li class="title">&nbsp;&nbsp;Test: <input id="citySel" type="text" readonly value="" style="width:120px;" onclick="showMenu();" />
&nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">select</a></li>
</ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>实现方法说明</h2>
<ul class="list">
<li>用 radio 也可以轻松实现单选的下拉菜单</li>
<li>单选其实没有必要使用 radio, 此 Demo 主要用于 和 其他下拉菜单进行对比</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,166 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - single path</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
dblClickExpand: false,
showLine: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeExpand: beforeExpand,
onExpand: onExpand,
onClick: onClick
}
};
function createNodes(maxNodesNumInLevel, maxLevel, curLevel, curPId) {
if (maxNodesNumInLevel<5) {
maxNodesNumInLevel = 5;
}
var nodes = [], num = 0;
while(num<3) {
num = parseInt(Math.random()*1024)%maxNodesNumInLevel+1;
}
for (var i=0; i<num; i++) {
var id = curPId ? curPId + "-" + i : "" + i, isParent = (parseInt(Math.random()*9999)%3!=0),
node = {id: id, pId : curPId, name : "N" + id};
nodes.push(node);
if (isParent && curLevel<maxLevel) {
nodes = nodes.concat(createNodes(maxNodesNumInLevel, maxLevel, curLevel+1, id));
}
}
return nodes;
}
var zNodes =createNodes(5, 5, 0);
var curExpandNode = null;
function beforeExpand(treeId, treeNode) {
var pNode = curExpandNode ? curExpandNode.getParentNode():null;
var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
if (treeNode !== treeNodeP.children[i]) {
zTree.expandNode(treeNodeP.children[i], false);
}
}
while (pNode) {
if (pNode === treeNode) {
break;
}
pNode = pNode.getParentNode();
}
if (!pNode) {
singlePath(treeNode);
}
}
function singlePath(newNode) {
if (newNode === curExpandNode) return;
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
rootNodes, tmpRoot, tmpTId, i, j, n;
if (!curExpandNode) {
tmpRoot = newNode;
while (tmpRoot) {
tmpTId = tmpRoot.tId;
tmpRoot = tmpRoot.getParentNode();
}
rootNodes = zTree.getNodes();
for (i=0, j=rootNodes.length; i<j; i++) {
n = rootNodes[i];
if (n.tId != tmpTId) {
zTree.expandNode(n, false);
}
}
} else if (curExpandNode && curExpandNode.open) {
if (newNode.parentTId === curExpandNode.parentTId) {
zTree.expandNode(curExpandNode, false);
} else {
var newParents = [];
while (newNode) {
newNode = newNode.getParentNode();
if (newNode === curExpandNode) {
newParents = null;
break;
} else if (newNode) {
newParents.push(newNode);
}
}
if (newParents!=null) {
var oldNode = curExpandNode;
var oldParents = [];
while (oldNode) {
oldNode = oldNode.getParentNode();
if (oldNode) {
oldParents.push(oldNode);
}
}
if (newParents.length>0) {
zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
} else {
zTree.expandNode(oldParents[oldParents.length-1], false);
}
}
}
}
curExpandNode = newNode;
}
function onExpand(event, treeId, treeNode) {
curExpandNode = treeNode;
}
function onClick(e,treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.expandNode(treeNode, null, null, null, true);
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li button.switch {visibility:hidden; width:1px;}
.ztree li button.switch.roots_docu {visibility:visible; width:16px;}
.ztree li button.switch.center_docu {visibility:visible; width:16px;}
.ztree li button.switch.bottom_docu {visibility:visible; width:16px;}
</style>
</HEAD>
<BODY>
<h1>保持展开单一路径</h1>
<h6>[ 文件路径: super/singlepath.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>实现方法说明</h2>
<ul class="list">
<li>此 Demo 是在 "单击展开/折叠节点" 基础上改造而来,树节点保持始终只展开一条路径。</li>
<li class="highlight_red">利用 setting.callback.beforeExpand / onExpand 事件回调函数实现展开规则</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>