Commit 05453cbc by 416409548@qq.com

多路视频回放/配置修改

parent a7f06036
NODE_ENV=development
VUE_APP_API_BASE_URL=http://localhost:8080/jeecg-boot
VUE_APP_API_BASE_URL=http://192.168.1.166:3001/jeecg-boot
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
......
NODE_ENV=production
VUE_APP_API_BASE_URL=http://localhost:8080/jeecg-boot
VUE_APP_API_BASE_URL=http://172.16.16.251:3001/jeecg-boot
VUE_APP_CAS_BASE_URL=http://localhost:8888/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
/*
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/
/*
* Configurable variables. You may need to tweak these to be compatible with
* the server-side, but the defaults work in most cases.
*/
var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */
var b64pad = ""; /* base-64 pad character. "=" for strict RFC compliance */
var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */
/*
* These are the functions you'll usually want to call
* They take string arguments and return either hex or base-64 encoded strings
*/
function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
/*
* Perform a simple self-test to see if the VM is working
*/
function md5_vm_test()
{
return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
}
/*
* Calculate the MD5 of an array of little-endian words, and a bit length
*/
function core_md5(x, len)
{
/* append padding */
x[len >> 5] |= 0x80 << ((len) % 32);
x[(((len + 64) >>> 9) << 4) + 14] = len;
var a = 1732584193;
var b = -271733879;
var c = -1732584194;
var d = 271733878;
for(var i = 0; i < x.length; i += 16)
{
var olda = a;
var oldb = b;
var oldc = c;
var oldd = d;
a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
c = md5_ff(c, d, a, b, x[i+ 2], 17, 606105819);
b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
d = md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426);
c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
a = md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416);
d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
a = md5_ff(a, b, c, d, x[i+12], 7 , 1804603682);
d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
b = md5_ff(b, c, d, a, x[i+15], 22, 1236535329);
a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
c = md5_gg(c, d, a, b, x[i+11], 14, 643717713);
b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
d = md5_gg(d, a, b, c, x[i+10], 9 , 38016083);
c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
a = md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438);
d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
b = md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501);
a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
c = md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473);
b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
c = md5_hh(c, d, a, b, x[i+11], 16, 1839030562);
b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
d = md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353);
c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
a = md5_hh(a, b, c, d, x[i+13], 4 , 681279174);
d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
b = md5_hh(b, c, d, a, x[i+ 6], 23, 76029189);
a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
c = md5_hh(c, d, a, b, x[i+15], 16, 530742520);
b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
d = md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415);
c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
a = md5_ii(a, b, c, d, x[i+12], 6 , 1700485571);
d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
a = md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359);
d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
b = md5_ii(b, c, d, a, x[i+13], 21, 1309151649);
a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
c = md5_ii(c, d, a, b, x[i+ 2], 15, 718787259);
b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
a = safe_add(a, olda);
b = safe_add(b, oldb);
c = safe_add(c, oldc);
d = safe_add(d, oldd);
}
return Array(a, b, c, d);
}
/*
* These functions implement the four basic operations the algorithm uses.
*/
function md5_cmn(q, a, b, x, s, t)
{
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
}
function md5_ff(a, b, c, d, x, s, t)
{
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
}
function md5_gg(a, b, c, d, x, s, t)
{
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
}
function md5_hh(a, b, c, d, x, s, t)
{
return md5_cmn(b ^ c ^ d, a, b, x, s, t);
}
function md5_ii(a, b, c, d, x, s, t)
{
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
}
/*
* Calculate the HMAC-MD5, of a key and some data
*/
function core_hmac_md5(key, data)
{
var bkey = str2binl(key);
if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
var ipad = Array(16), opad = Array(16);
for(var i = 0; i < 16; i++)
{
ipad[i] = bkey[i] ^ 0x36363636;
opad[i] = bkey[i] ^ 0x5C5C5C5C;
}
var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
return core_md5(opad.concat(hash), 512 + 128);
}
/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
function safe_add(x, y)
{
var lsw = (x & 0xFFFF) + (y & 0xFFFF);
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
return (msw << 16) | (lsw & 0xFFFF);
}
/*
* Bitwise rotate a 32-bit number to the left.
*/
function bit_rol(num, cnt)
{
return (num << cnt) | (num >>> (32 - cnt));
}
/*
* Convert a string to an array of little-endian words
* If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
*/
function str2binl(str)
{
var bin = Array();
var mask = (1 << chrsz) - 1;
for(var i = 0; i < str.length * chrsz; i += chrsz)
bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
return bin;
}
/*
* Convert an array of little-endian words to a string
*/
function binl2str(bin)
{
var str = "";
var mask = (1 << chrsz) - 1;
for(var i = 0; i < bin.length * 32; i += chrsz)
str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
return str;
}
/*
* Convert an array of little-endian words to a hex string.
*/
function binl2hex(binarray)
{
var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
var str = "";
for(var i = 0; i < binarray.length * 4; i++)
{
str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
hex_tab.charAt((binarray[i>>2] >> ((i%4)*8 )) & 0xF);
}
return str;
}
/*
* Convert an array of little-endian words to a base-64 string
*/
function binl2b64(binarray)
{
var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var str = "";
for(var i = 0; i < binarray.length * 4; i += 3)
{
var triplet = (((binarray[i >> 2] >> 8 * ( i %4)) & 0xFF) << 16)
| (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
| ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
for(var j = 0; j < 4; j++)
{
if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
}
}
return str;
}
<!DOCTYPE html>
<html land="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>多路回放</title>
<link rel="stylesheet" href="../zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="./css/icon.css" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="md5.js"></script>
<!-- zTree 这里使用的 all.js = core + excheck + exedit ( 不包括 exhide )-->
<script src="../zTree/js/jquery.ztree.all-3.5.min.js"></script>
<script src ="mpb.js"></script>
<script language="javascript" for="spb" event="MPB_FireSelectWndIndex(lWndId, cameraUuid)">
szMsg = "窗口:" + lWndId + ":" + cameraUuid;
alert(szMsg);
</script>
<script language="javascript" for="spb" event="MPB_FirePlaybackResult(lWndId, lPlaybackResult)">
szMsg = "回放窗口" + lWndId;
if (1 == lPlaybackResult)
{
szMsg += "开始回放";
}
else if(2 == lPlaybackResult)
{
szMsg += "停止回放";
}
alert(szMsg);
</script>
<script language="javascript" for="spb" event="MPB_FireSnapShot(lWndIndex,lpPicName,lpCameraUUID,lSnapResult)">
if(lSnapResult == 1){
alert("窗口" + lWndIndex + "抓图成功:" + lpPicName);
}
else
{
alert("窗口" + lWndIndex + "抓图失败");
}
</script>
</head>
<body>
<div style="width:1000px;float:left">
<div style="text-align:left;background-color: #C0C0C0;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp多路回放:请先填入appKey和secret,然后点击"加载数据"按钮获取用户、网域以及组织资源数据,然后点"初始化"按钮初始化控件</div>
<br />
<div style="padding: 1px; margin: 1px;">
startTime:&nbsp;<input id="startTime" type="text" value="" />&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;endTime:&nbsp;<input id="endTime" type="text" value="" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;appKey:&nbsp;<input id="appKey" type="text" value="" />&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;<input type="button" onclick="InitData()" value="加载数据" />
</div>
<div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;secret:&nbsp;<input id="secret" type="text" value="" />&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;userName:&nbsp;<select id="SelectUser" name="user" style="width:152px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;netZone:&nbsp;<select id="SelectNet" name="net" style="width:152px"></select>
</div>
<br />
<div>
<input type="button" onclick="InitSpb()" value="初始化" />
&nbsp;&nbsp;<input type="button" onclick="SetLocalParam()" value="设置本地参数" />
&nbsp;&nbsp;<input type="button" onclick="stopAllPlayback()" value="停止所有回放" />
&nbsp;&nbsp;<input type="button" onclick="UninitSpb()" value="反初始化" />
&nbsp;&nbsp;<input type="button" onclick="SetToolBar()" value="设置播放窗口工具条按钮">
&nbsp;按钮ID:<input id="tbar" type="text" value="0,1,2,3,4">
</div>
<div>
<input type="button" onclick="SetWnd()" value="设置窗口数"/>
&nbsp;窗口数:<select id="SetWnd" name="setwnd" style="width:50px">
<option value = "1">1</option>
<option value = "4">4</option>
<option value = "9">9</option>
<option value = "16">16</option>
</select>
&nbsp;&nbsp;<input type="button" onclick="GetWnd()" value="获取窗口数" />
&nbsp;&nbsp;<input type="button" onclick="SnapPic()" value="回放抓图">
&nbsp;&nbsp;回放类型:<select id="PlayType" style="width:100pix">
<option value="0" selected="true">空闲窗口回放</option>
<option value="1">选中窗口回放</option>
<option value="2">指定窗口回放</option>
</select>
&nbsp;<select id="seledWndIndex" style="width:80px">
</select>
</div>
<div>
<div class="tree" style="width:250px;float:left">
<ul id="planTree" class="ztree" width="100%" />
</div>
<div class="ActiveX" style="Margin-left:tree.width">
<td>
<object classid="clsid:863E7B58-A280-40A5-8394-CE33F4E7B654" id="spb" width="700px" height="600px" />
</td>
</div>
</div>
</div>
</body>
</html>
#################
## Eclipse
#################
*.pydevproject
.project
.metadata
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.classpath
.settings/
.loadpath
# External tool builders
.externalToolBuilders/
# Locally stored "Eclipse launch configurations"
*.launch
# CDT-specific
.cproject
# PDT-specific
.buildpath
#################
## Visual Studio
#################
## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.
# User-specific files
*.suo
*.user
*.sln.docstates
# Build results
[Dd]ebug/
[Rr]elease/
*_i.c
*_p.c
*.ilk
*.meta
*.obj
*.pch
*.pdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.vspscc
.builds
*.dotCover
## TODO: If you have NuGet Package Restore enabled, uncomment this
#packages/
# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opensdf
*.sdf
# Visual Studio profiler
*.psess
*.vsp
# ReSharper is a .NET coding add-in
_ReSharper*
# Installshield output folder
[Ee]xpress
# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html
# Click-Once directory
publish
# Others
[Bb]in
[Oo]bj
sql
TestResults
*.Cache
ClientBin
stylecop.*
~$*
*.dbmdl
Generated_Code #added for RIA/Silverlight projects
# Backup & report files from converting an old project file to a newer
# Visual Studio version. Backup files are not needed, because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
############
## Windows
############
# Windows image file caches
Thumbs.db
# Folder config file
Desktop.ini
#############
## Python
#############
*.py[co]
# Packages
*.egg
*.egg-info
dist
build
eggs
parts
bin
var
sdist
develop-eggs
.installed.cfg
# Installer logs
pip-log.txt
# Unit test / coverage reports
.coverage
.tox
#Translations
*.mo
#Mr Developer
.mr.developer.cfg
# Mac crap
.DS_Store
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>API 文档 [zTree -- jQuery 树插件]</title>
<link rel="stylesheet" href="apiCss/common.css" type="text/css">
<link rel='stylesheet' href='apiCss/zTreeStyleForApi.css' type='text/css'>
<script type="text/javascript">
var ie = (function(){
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}()), ie6 = (ie === 6),
path = window.location.pathname.replace(/.*\/([^\/\.]*)\..*/g,"$1"),
langLib = [];
ie = ie<9;
if(ie) {
document.write('<link rel="stylesheet" href="apiCss/common_ie6.css" type="text/css">');
}
var lang = "cn",
ajaxMsg = "如果你使用的是 Chrome 浏览器,那么请把 API 文档发布到 web 服务目录下访问。\n\n(Chrome 浏览器不支持本地 ajax 访问, 即:file://)";
</script>
</head>
<body>
<div id="header_wrap" class="header_wrap" style="padding-top: 30px;">
<div id="header" class="header round">
<div class="light-bulb" alt=""></div>
<div class="ieSuggest">浏览本网站建议您使用 Chrome、FireFox、Opera、IE9 等浏览器(只要不是 IE6 7 8 就行), 速度会更快,画面会更炫!</div>
<div class="google_plus"><g:plusone></g:plusone></div>
<div class="header-text">
<h1><em>zTree v3.5.17 API 文档</em></h1><p></p>
<p>all.js = core + excheck + exedit ( 不包括 exhide ); 发现错误请及时通知,谢谢。</p>
</div>
<ul class="shortcuts language" style="top:0;">
<li><a href="API_en.html" onclick="window.location.href='API_en.html'"><button class="ico en" title="英文版" type="button"></button><span class=""></span></a></li>
</ul>
</div>
</div>
<div id="content_wrap" class="content_wrap">
<div id="content" class="content">
<div class="nav_section">
<ul>
<li class="first">注释:</li>
<li><button class="ico16 z_core" onfocus="this.blur();"></button><span>core 核心包</span></li>
<li><button class="ico16 z_check" onfocus="this.blur();"></button><span>excheck 扩展</span></li>
<li><button class="ico16 z_edit" onfocus="this.blur();"></button><span>exedit 扩展</span></li>
<li><button class="ico16 z_hide" onfocus="this.blur();"></button><span>exhide 扩展</span></li>
<li class="noline">
<button class="ico16 z_search" onfocus="this.blur();" title="Enter 以及 左、右键可以快速定位查找结果"></button>
<input type="text" class="searchKey search empty" value=""><input type="text" class="searchResult search" value="">
<button class="ico16 searchPrev disabled" onfocus="this.blur();" title="Enter 以及 左、右键可以快速定位查找结果"></button><button class="ico16 searchNext disabled" onfocus="this.blur();" title="Enter 以及 左、右键可以快速定位查找结果"></button>
</li>
</ul>
</div>
<div id="contentBox" class="contentBox round clearfix">
<div id="apiContent" class="apiContent">
<div id="api_setting" class="api_setting left">
<ul class="api_content_title"><li>setting 配置详解</li></ul>
<ul id="settingTree" class="ztree"></ul>
</div>
<div id="api_function" class="api_function right">
<ul class="api_content_title"><li>zTree 方法详解</li></ul>
<ul id="functionTree" class="ztree"></ul>
<ul class="api_content_title"><li>treeNode 节点数据详解</li></ul>
<ul id="treenodeTree" class="ztree"></ul>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- overlayed -->
<div id="overlayDiv" class="baby_overlay">
<div id="overlayContent" class="content round clearfix">
<div class="overlaySearch">
<button class="ico16 z_search" onfocus="this.blur();" title="Enter 以及 左、右键可以快速定位查找结果"></button>
<input type="text" class="searchKey search empty" value=""><input type="text" class="searchResult search" value="">
<button class="ico16 searchPrev disabled" onfocus="this.blur();" title="Enter 以及 左、右键可以快速定位查找结果"></button><button class="ico16 searchNext disabled" onfocus="this.blur();" title="Enter 以及 左、右键可以快速定位查找结果"></button>
</div>
<a id="overlayDivCloseBtn" class="close"></a>
<div id="overlayDetailDiv" class="details"></div>
</div>
<div id="overlayDivArrow" class="baby_overlay_arrow"></div>
</div>
<script type="text/javascript" src="apiCss/jquery-1.6.2.min.js"></script>
<script type='text/javascript' src='apiCss/jquery.ztree.core-3.5.js'></script>
<script type='text/javascript' src='apiCss/api.js'></script>
<script type="text/javascript">
$(document).ready(function(){
apiContent._init();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>API Document [zTree -- jQuery tree plug-ins.]</title>
<link rel="stylesheet" href="apiCss/common.css" type="text/css">
<link rel='stylesheet' href='apiCss/zTreeStyleForApi.css' type='text/css'>
<script type="text/javascript">
var ie = (function(){
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}()), ie6 = (ie === 6),
path = window.location.pathname.replace(/.*\/([^\/\.]*)\..*/g,"$1"),
langLib = [];
ie = ie<9;
if(ie) {
document.write('<link rel="stylesheet" href="apiCss/common_ie6.css" type="text/css">');
}
var lang = "en",
ajaxMsg = "If you use chrome browser, please copy the API files to local webserver. \n\n( because chrome browser can't allow AJAX access to 'file://' )";
</script>
</head>
<body>
<div id="header_wrap" class="header_wrap" style="padding-top: 30px;">
<div id="header" class="header round">
<div class="light-bulb" alt=""></div>
<div class="ieSuggest">If you use the Chrome / FireFox / Opera / IE9 browser will be even more dazzling effect!</div>
<div class="google_plus"><g:plusone></g:plusone></div>
<div class="header-text">
<h1><em>zTree v3.5.17 API Document</em></h1><p></p>
<p>all.js = core + excheck + exedit ( without exhide ); if you found some mistakes please contact me.</p>
</div>
<ul class="shortcuts language" style="top:0;">
<li><a href="API_cn.html" onclick="window.location.href='API_cn.html'"><button class="ico cn" title="Chinese" type="button"></button><span class=""></span></a></li>
</ul>
</div>
</div>
<div id="content_wrap" class="content_wrap">
<div id="content" class="content">
<div class="nav_section">
<ul>
<li class="first">Notes: </li>
<li><button class="ico16 z_core" onfocus="this.blur();"></button><span>core package</span></li>
<li><button class="ico16 z_check" onfocus="this.blur();"></button><span>excheck pack</span></li>
<li><button class="ico16 z_edit" onfocus="this.blur();"></button><span>exedit pack</span></li>
<li><button class="ico16 z_hide" onfocus="this.blur();"></button><span>exhide pack</span></li>
<li class="noline">
<button class="ico16 z_search" onfocus="this.blur();" title="'Enter', 'left' and 'right' key can locate the search results quickly."></button>
<input type="text" class="searchKey search empty" value=""><input type="text" class="searchResult search" value="">
<button class="ico16 searchPrev disabled" onfocus="this.blur();" title="'Enter', 'left' and 'right' key can locate the search results quickly."></button><button class="ico16 searchNext disabled" onfocus="this.blur();" title="'Enter', 'left' and 'right' key can locate the search results quickly."></button>
</li>
</ul>
</div>
<div id="contentBox" class="contentBox round clearfix">
<div id="apiContent" class="apiContent">
<div id="api_setting" class="api_setting left">
<ul class="api_content_title"><li>setting details</li></ul>
<ul id="settingTree" class="ztree"></ul>
</div>
<div id="api_function" class="api_function right">
<ul class="api_content_title"><li>zTree method details</li></ul>
<ul id="functionTree" class="ztree"></ul>
<ul class="api_content_title"><li>treeNode data details</li></ul>
<ul id="treenodeTree" class="ztree"></ul>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- overlayed -->
<div id="overlayDiv" class="baby_overlay">
<div id="overlayContent" class="content round clearfix">
<div class="overlaySearch">
<button class="ico16 z_search" onfocus="this.blur();" title="'Enter', 'left' and 'right' key can locate the search results quickly."></button>
<input type="text" class="searchKey search empty" value=""><input type="text" class="searchResult search" value="">
<button class="ico16 searchPrev disabled" onfocus="this.blur();" title="'Enter', 'left' and 'right' key can locate the search results quickly."></button><button class="ico16 searchNext disabled" onfocus="this.blur();" title="'Enter', 'left' and 'right' key can locate the search results quickly."></button>
</div>
<a id="overlayDivCloseBtn" class="close"></a>
<div id="overlayDetailDiv" class="details"></div>
</div>
<div id="overlayDivArrow" class="baby_overlay_arrow"></div>
</div>
<script type="text/javascript" src="apiCss/jquery-1.6.2.min.js"></script>
<script type='text/javascript' src='apiCss/jquery.ztree.core-3.5.js'></script>
<script type='text/javascript' src='apiCss/api.js'></script>
<script type="text/javascript">
$(document).ready(function(){
apiContent._init();
});
</script>
</body>
</html>
\ No newline at end of file
* html{
/* background-image:url(about:blank);*/
background-attachment:fixed;
}
html pre {word-wrap: break-word}
.header {background-image: none;background-color: #F0F6E4;}
.ieSuggest {display:block;}
.shortcuts button.cn {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='apiCss/img/chinese.png');background-image: none;}
.shortcuts button.en {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='apiCss/img/english.png');background-image: none;}
.light-bulb {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='apiCss/img/lightbulb.png');background-image: none;}
.contentBox {background-image: none;background-color: #F0F6E4;}
.zTreeInfo {background-image: none;background-color: #F0F6E4;}
.content button.ico16 {*background-image:url("img/apiMenu.gif")}
.siteTag {background-image: none;}
.apiContent .right {float: right;padding-right: 50px;}
div.baby_overlay {background-color: #3C6E31;background-image:none;color:#fff;}
div.baby_overlay .close {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='apiCss/img/overlay_close_IE6.gif');background-image: none;}
.baby_overlay_arrow {background-image:url(img/overlay_arrow.gif);}
.apiDetail button {background-image:url("img/zTreeStandard.gif")}
\ No newline at end of file
/*-------------------------------------
zTree Style
version: 3.0
author: Hunter.z
email: hunter.z@263.net
website: http://code.google.com/p/jquerytree/
-------------------------------------*/
.ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
.ztree {margin:0; padding:5px; color:#333}
.ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap}
.ztree li ul{ margin:0; padding:0 0 0 18px}
.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;}
.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; color:#333; height:17px; text-decoration:none; vertical-align:top; display: inline-block}
.ztree li a:hover {text-decoration:none}
.ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid;}
.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8; filter:alpha(opacity=80)}
.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid; opacity:0.8; filter:alpha(opacity=80)}
.ztree li a.tmpTargetNode_prev {}
.ztree li a.tmpTargetNode_next {}
.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
font-size:12px; border:1px #7EC4CC solid; *border:0px}
.ztree li span {line-height:16px; margin-right: 2px}
.ztree li span.button {line-height:0; margin:0;width:16px; height:16px; display: inline-block; vertical-align:middle;
border:0 none; cursor: pointer;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
.ztree li span.button.switch {width:1px; height:18px; visibility: hidden}
.zTreeDragUL {margin:0; padding:0; position:absolute; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
.zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
/* level 等级样式*/
/*.ztree li button.level0 {
display:none;
}
.ztree li ul.level0 {
padding:0;
background:none;
}*/
.ztree li span.button.core_ico_docu{margin-right:2px; background-position:-126px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.check_ico_docu{margin-right:2px; background-position:-126px -16px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit_ico_docu{margin-right:2px; background-position:-126px -32px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.hide_ico_docu{margin-right:2px; background-position:-160px 0; vertical-align:top; *vertical-align:middle}
<div class="apiDetail">
<div>
<h2><span>JSON</span><span class="path">$.fn.zTree.</span>_z</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree v3.x 内部的全部方法都可以通过 $.fn.zTree._z 进行调用,开放出来是为了更便于大家开发制作自己的 zTree 插件。 </p>
<p class="highlight_red">如无特殊需求请勿使用此对象,以及修改此对象内部的各个函数。</p>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId)</span><span class="path">$.fn.zTree.</span>destroy</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>从 zTree v3.4 开始提供销毁 zTree 的方法。 </p>
<p>1、用此方法可以销毁指定 treeId 的 zTree,也可以销毁当前页面全部的 zTree。</p>
<p class="highlight_red">2、销毁指定 treeId 的 zTree 也可以使用 zTreeObj.destroy() 方法。</p>
<p class="highlight_red">3、重新使用已经被销毁的树,必须要使用 init 方法进行初始化。</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>zTree 的 DOM 容器的 id</p>
<p class="highlight_red">省略 treeId,表示销毁当前页面全部的 zTree</p>
<h4 class="topLine"><b>返回值</b><span></span></h4>
<p>目前无任何返回值</p>
</div>
<h3>function 举例</h3>
<h4>1. 销毁 id 为 "treeDemo" 的 zTree</h4>
<pre xmlns=""><code>$.fn.zTree.destroy("treeDemo");</code></pre>
<h4>2. 销毁全部 的 zTree</h4>
<pre xmlns=""><code>$.fn.zTree.destroy();</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId)</span><span class="path">$.fn.zTree.</span>getZTreeObj</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree v3.x 专门提供的根据 treeId 获取 zTree 对象的方法。 </p>
<p class="highlight_red">必须在初始化 zTree 以后才可以使用此方法。</p>
<p>有了这个方法,用户不再需要自己设定全局变量来保存 zTree 初始化后得到的对象了,而且在所有回调函数中全都会返回 treeId 属性,用户可以随时使用此方法获取需要进行操作的 zTree 对象</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>zTree 的 DOM 容器的 id</p>
<h4 class="topLine"><b>返回值</b><span>JSON</span></h4>
<p>zTree 对象,提供操作 zTree 的各种方法,对于通过 js 操作 zTree 来说必须通过此对象</p>
</div>
<h3>function 举例</h3>
<h4>1. 获取 id 为 tree 的 zTree 对象</h4>
<pre xmlns=""><code>var treeObj = $.fn.zTree.getZTreeObj("tree");</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(obj, zSetting, zNodes)</span><span class="path">$.fn.zTree.</span>init</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree 初始化方法,创建 zTree 必须使用此方法</p>
<p>1、页面需要进行 W3C 申明,例如:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&nbsp;&nbsp; &nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</p>
<p>2、需要首先加载 jquery-1.4.2.js 或其他更高版本的 jQuery 。</p>
<p>3、需要加载 jquery-ztree.core-3.0.js,如果需要用到 编辑功能 或 checkbox / radio 还需要分别加载 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。</p>
<p>4、需要加载 zTreeStyle.css 以及 zTreeStyle 目录下的 img 文件。</p>
<p>5、如果需要使用自定义图标请参考相应的Demo。</p>
<p>6、请注意设置 zTree 的容器样式 class="ztree",其中 "ztree" 这个 className,可以根据需要随意修改,别忘了修改 css 中对应名字就是了,对于容器如果需要增加其他特殊样式,可根据自己的需要进行修改。</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>obj</b><span>jQuery Object</span></h4>
<p>用于展现 zTree 的 DOM 容器</p>
<h4 class="topLine"><b>zSetting</b><span>JSON</span></h4>
<p>zTree 的配置数据,具体请参考 “setting 配置详解”中的各个属性详细说明</p>
<h4 class="topLine"><b>zNodes</b><span>Array(JSON) / JSON</span></h4>
<p>zTree 的节点数据,具体请参考 “treeNode 节点数据详解”中的各个属性详细说明</p>
<p class="highlight_red">1、v3.x 支持单独添加一个节点,即如果只新增一个节点,不用必须包在数组中</p>
<p class="highlight_red">2、如果需要异步加载根节点,可以设置为 null 或 [ ]</p>
<p class="highlight_red">3、使用简单数据模式,请参考 setting.data.simpleData 内的属性说明</p>
<h4 class="topLine"><b>返回值</b><span>JSON</span></h4>
<p>zTree 对象,提供操作 zTree 的各种方法,对于通过 js 操作 zTree 来说必须通过此对象</p>
<p class="highlight_red">如果不需要自行设定全局变量保存,可以利用 $.fn.zTree.getZTreeObj 方法随时获取</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 简单创建 zTree 演示</h4>
<pre xmlns=""><code>&lt;!DOCTYPE html&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt; ZTREE DEMO &lt;/TITLE&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
&lt;link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"&gt;
&lt;script type="text/javascript" src="jquery-1.4.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.ztree.core-3.5.js"&gt;&lt;/script&gt;
&lt;!--
&lt;script type="text/javascript" src="jquery.ztree.excheck-3.5.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.ztree.exedit-3.5.js"&gt;&lt;/script&gt;
--&gt;
&lt;SCRIPT type="text/javascript" &gt;
var zTreeObj,
setting = {
view: {
selectedMulti: false
}
},
zTreeNodes = [
{"name":"网站导航", open:true, children: [
{ "name":"google", "url":"http://g.cn", "target":"_blank"},
{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
]
}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
});
&lt;/SCRIPT&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;ul id="tree" class="ztree" style="width:230px; overflow:auto;"&gt;&lt;/ul&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Array(String)</span><span class="path">setting.async.</span>autoParam</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>异步加载时需要自动提交父节点属性的参数。<span class="highlight_red">[setting.async.enable = true 时生效]</span></p>
<p>默认值:[ ]</p>
</div>
</div>
<h3>Array(String) 格式说明</h3>
<div class="desc">
<p>1、将需要作为参数提交的属性名称,制作成 Array 即可,例如:["id", "name"]</p>
<p>2、可以设置提交时的参数名称,例如 server 只接受 zId : ["id=zId"]</p>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 id 属性为自动提交的参数</h4>
<pre xmlns=""><code>var setting = {
async: {
enable: true,
url: "http://host/getNode.php",
autoParam: ["id"]
}
};
假设 异步加载 父节点(node = {id:1, name:"test"}) 的子节点时,将提交参数 id=1
......</code></pre>
<h4>2. 设置 id 属性作为 zId 成为自动提交的参数</h4>
<pre xmlns=""><code>var setting = {
async: {
enable: true,
url: "http://host/getNode.php",
autoParam: ["id=zId"]
}
};
假设 对父节点 node = {id:1, name:"test"},进行异步加载时,将提交参数 zId=1
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.async.</span>contentType</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>Ajax 提交参数的数据类型。<span class="highlight_red">[setting.async.enable = true 时生效]</span></p>
<p>默认值:"application/x-www-form-urlencoded"</p>
</div>
</div>
<h3>String 格式说明</h3>
<div class="desc">
<p> contentType = "application/x-www-form-urlencoded" 可以满足绝大部分请求,按照标准的 Form 格式提交参数</p>
<p> contentType = "application/json" 可以满足 .Net 的编程需要,按照 JSON 格式提交参数</p>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 Ajax 提交参数的数据类型为 JSON 格式</h4>
<pre xmlns=""><code>var setting = {
async: {
enable: true,
contentType: "application/json",
url: "http://host/getNode.php",
autoParam: ["id", "name"]
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, parentNode, responseData)</span><span class="path">setting.async.</span>dataFilter</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于对 Ajax 返回数据进行预处理的函数。<span class="highlight_red">[setting.async.enable = true 时生效]</span></p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>parentNode</b><span>JSON</span></h4>
<p>进行异步加载的父节点 JSON 数据对象</p>
<p class="highlight_red">对根进行异步加载时,parentNode = null</p>
<h4 class="topLine"><b>responseData</b><span>Array(JSON) / JSON / String</span></h4>
<p>异步加载获取到的数据转换后的 Array(JSON) / JSON / String 数据对象</p>
<p class="highlight_red">v3.4开始 支持 XML 数据格式的 String</p>
<h4 class="topLine"><b>返回值</b><span>Array(JSON) / JSON</span></h4>
<p>返回值是 zTree 支持的JSON 数据结构即可。</p>
<p class="highlight_red">v3.x 支持单个 JSON 节点数据进行加载</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 修改异步获取到的节点name属性</h4>
<pre xmlns=""><code>function ajaxDataFilter(treeId, parentNode, responseData) {
if (responseData) {
for(var i =0; i < responseData.length; i++) {
responseData[i].name += "_filter";
}
}
return responseData;
};
var setting = {
async: {
enable: true,
url: "http://host/getNode.php",
dataFilter: ajaxDataFilter
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.async.</span>dataType</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>Ajax 获取的数据类型。<span class="highlight_red">[setting.async.enable = true 时生效]</span></p>
<p>默认值:"text"</p>
</div>
</div>
<h3>String 格式说明</h3>
<div class="desc">
<p> dataType = "text" 可以满足绝大部分请求</p>
<p class="highlight_red">其余 dataType 类型请参考 jQuery ajax 中的 dataType 参数</p>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 Ajax 获取的数据类型为 纯文本</h4>
<pre xmlns=""><code>var setting = {
async: {
enable: true,
dataType: "text",
url: "http://host/getNode.php",
autoParam: ["id", "name"]
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.async.</span>enable</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>设置 zTree 是否开启异步加载模式</p>
<p>默认值:false</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true 表示 开启 异步加载模式</p>
<p> false 表示 关闭 异步加载模式</p>
<p class="highlight_red">如果设置为 true,请务必设置 setting.async 内的其它参数。</p>
<p class="highlight_red">如果需要根节点也异步加载,初始化时 treeNodes 参数设置为 null 即可。</p>
</div>
<h3>setting 举例</h3>
<h4>1. 需要开启异步加载模式</h4>
<pre xmlns=""><code>var setting = {
async: {
enable: true,
url: "http://host/getNode.php",
autoParam: ["id", "name"]
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Array(String) / JSON</span><span class="path">setting.async.</span>otherParam</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>Ajax 请求提交的静态参数键值对。<span class="highlight_red">[setting.async.enable = true 时生效]</span></p>
<p>默认值:[ ]</p>
</div>
</div>
<h3>Array(String) 格式说明</h3>
<div class="desc">
<p>可以为空[ ],如果有 key,则必须存在 value。 例如:[key, value]</p>
</div>
<h3>JSON 格式说明</h3>
<div class="desc">
<p>直接用 JSON 格式制作键值对,例如:{ key1:value1, key2:value2 }</p>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 Array(String) 格式的参数</h4>
<pre xmlns=""><code>var setting = {
async: {
enable: true,
url: "http://host/getNode.php",
otherParam: ["id", "1", "name", "test"]
}
};
进行异步加载时,将提交参数 id=1&name=test</code></pre>
<h4>2. 设置 JSON 格式的参数</h4>
<pre xmlns=""><code>var setting = {
async: {
enable: true,
url: "http://host/getNode.php",
otherParam: { "id":"1", "name":"test"}
}
};
进行异步加载时,将提交参数 id=1&name=test</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.async.</span>type</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>Ajax 的 http 请求模式。<span class="highlight_red">[setting.async.enable = true 时生效]</span></p>
<p>默认值:"post"</p>
</div>
</div>
<h3>String 格式说明</h3>
<div class="desc">
<p> type = "post" 表示异步加载采用 post 方法请求</p>
<p> type = "get" 表示异步加载采用 get 方法请求</p>
<p class="highlight_red">对应于 jQuery ajax 中的 type 参数</p>
</div>
<h3>setting 举例</h3>
<h4>1. 设置使用 get 方式请求数据</h4>
<pre xmlns=""><code>var setting = {
async: {
enable: true,
type: "get",
url: "http://host/getNode.php",
autoParam: ["id", "name"]
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String / Function(treeId, treeNode)</span><span class="path">setting.async.</span>url</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>Ajax 获取数据的 URL 地址。<span class="highlight_red">[setting.async.enable = true 时生效]</span></p>
<p>默认值:""</p>
</div>
</div>
<h3>String 格式说明</h3>
<div class="desc">
<p>设置固定的异步加载 url 字符串,请注意地址的路径,确保页面能正常加载</p>
<p class="highlight_red">url 内也可以带参数,这些参数就只能是通过 get 方式提交了,并且请注意进行转码</p>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>需要异步加载子节点的的父节点 JSON 数据对象</p>
<p class="highlight_red">针对根进行异步加载时,treeNode = null</p>
<h4 class="topLine"><b>返回值</b><span>String</span></h4>
<p>返回值同 String 格式的数据</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 设置异步获取节点的 URL 为 nodes.php</h4>
<pre xmlns=""><code>var setting = {
async: {
enable: true,
url: "nodes.php",
autoParam: ["id", "name"]
}
};
......</code></pre>
<h4>2. 设置异步获取节点的 URL 为 function 动态获取</h4>
<pre xmlns=""><code>function getAsyncUrl(treeId, treeNode) {
return treeNode.isParent ? "nodes1.php" : "nodes2.php";
};
var setting = {
async: {
enable: true,
url: getAsyncUrl,
autoParam: ["id", "name"]
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeAsync</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获异步加载之前的事件回调函数,zTree 根据返回值确定是否允许进行异步加载</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>进行异步加载的父节点 JSON 数据对象</p>
<p class="highlight_red">针对根进行异步加载时,treeNode = null</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,zTree 将不进行异步加载,也无法触发 onAsyncSuccess / onAsyncError 事件回调函数</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止 id 为 1 的父节点进行异步加载操作</h4>
<pre xmlns=""><code>function zTreeBeforeAsync(treeId, treeNode) {
return (treeNode.id !== 1);
};
var setting = {
callback: {
beforeAsync: zTreeBeforeAsync
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeCheck</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 勾选 或 取消勾选 之前的事件回调函数,并且根据返回值确定是否允许 勾选 或 取消勾选 </p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>进行 勾选 或 取消勾选 的节点 JSON 数据对象</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,将不会改变勾选状态,并且无法触发 onCheck 事件回调函数</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止所有勾选操作,保持初始化的勾选状态</h4>
<pre xmlns=""><code>function zTreeBeforeCheck(treeId, treeNode) {
return false;
};
var setting = {
callback: {
beforeCheck: zTreeBeforeCheck
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode, clickFlag)</span><span class="path">setting.callback.</span>beforeClick</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获单击节点之前的事件回调函数,并且根据返回值确定是否允许单击操作</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>被单击的节点 JSON 数据对象</p>
<h4 class="topLine"><b>clickFlag</b><span>Number</span></h4>
<p>节点被点击后的选中操作类型,详细看下表</p>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<thead><tr><td>clickFlag</td><td title="是否允许多点选中">selectedMulti</td><td title="是否按下 Ctrl 或 Cmd 键">autoCancelSelected<br/>&&<br/>event.ctrlKey / metaKey</td><td title="节点当前选择状态">isSelected</td><td>选中操作</td></tr></thead>
<tbody>
<tr><td>1</td><td>true</td><td>false</td><td>false</td><td>普通选中</td></tr>
<tr><td>1</td><td>true</td><td>false</td><td>true</td><td>普通选中</td></tr>
<tr><td>2</td><td>true</td><td>true</td><td>false</td><td>追加选中</td></tr>
<tr><td>0</td><td>true</td><td>true</td><td>true</td><td>取消选中</td></tr>
<tr><td>1</td><td>false</td><td>false</td><td>false</td><td>普通选中</td></tr>
<tr><td>1</td><td>false</td><td>false</td><td>true</td><td>普通选中</td></tr>
<tr><td>1</td><td>false</td><td>true</td><td>false</td><td>普通选中</td></tr>
<tr><td>0</td><td>false</td><td>true</td><td>true</td><td>取消选中</td></tr>
</tbody>
</table>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,zTree 将不会选中节点,也无法触发 onClick 事件回调函数</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止节点被选中</h4>
<pre xmlns=""><code>function zTreeBeforeClick(treeId, treeNode, clickFlag) {
return (treeNode.id !== 1);
};
var setting = {
callback: {
beforeClick: zTreeBeforeClick
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeCollapse</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获父节点折叠之前的事件回调函数,并且根据返回值确定是否允许折叠操作</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>要折叠的父节点 JSON 数据对象</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,zTree 将不会折叠节点,也无法触发 onCollapse 事件回调函数</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止所有已展开的父节点折叠</h4>
<pre xmlns=""><code>function zTreeBeforeCollapse(treeId, treeNode) {
return false;
};
var setting = {
callback: {
beforeCollapse: zTreeBeforeCollapse
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeDblClick</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 zTree 上鼠标双击之前的事件回调函数,并且根据返回值确定触发 onDblClick 事件回调函数</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>鼠标双击时所在节点的 JSON 数据对象</p>
<p class="highlight_red">如果不在节点上,则返回 null</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,将仅仅无法触发 onDblClick 事件回调函数,对其他操作无任何影响</p>
<p class="highlight_red">此事件回调函数对双击节点展开功能无任何影响,如果需要设置请参考 setting.view.dblClickExpand 属性</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止 onDblClick 事件</h4>
<pre xmlns=""><code>function zTreeBeforeDblClick(treeId, treeNode) {
return false;
};
var setting = {
callback: {
beforeDblClick: zTreeBeforeDblClick
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNodes)</span><span class="path">setting.callback.</span>beforeDrag</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点被拖拽之前的事件回调函数,并且根据返回值确定是否允许开启拖拽操作</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>被拖拽的节点 treeNodes 所在 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNodes</b><span>Array(JSON)</span></h4>
<p>要被拖拽的节点 JSON 数据集合</p>
<p class="highlight_red">v3.x 允许多个同级节点同时被拖拽,因此将此参数修改为 Array(JSON)</p>
<p class="highlight_red">如果拖拽时多个被选择的节点不是同级关系,则只能拖拽鼠标当前所在位置的节点</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,zTree 将终止拖拽,也无法触发 onDrag / beforeDrop / onDrop 事件回调函数</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止全部拖拽操作</h4>
<pre xmlns=""><code>function zTreeBeforeDrag(treeId, treeNodes) {
return false;
};
var setting = {
edit: {
enable: true
},
callback: {
beforeDrag: zTreeBeforeDrag
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeDragOpen</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获拖拽节点移动到折叠状态的父节点后,即将自动展开该父节点之前的事件回调函数,并且根据返回值确定是否允许自动展开操作</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>需要被展开的父节点 treeNode 所在 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>要被自动展开的父节点 JSON 数据对象</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,zTree 将无法进行自动展开操作</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止全部拖拽时的自动展开操作</h4>
<pre xmlns=""><code>function zTreeBeforeDragOpen(treeId, treeNode) {
return false;
};
var setting = {
edit: {
enable: true
},
callback: {
beforeDragOpen: zTreeBeforeDragOpen
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNodes, targetNode, moveType, isCopy)</span><span class="path">setting.callback.</span>beforeDrop</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点拖拽操作结束之前的事件回调函数,并且根据返回值确定是否允许此拖拽操作</p>
<p>默认值:null</p>
<p class="highlight_red">如未拖拽到有效位置,则不触发此回调函数,直接将节点恢复原位置</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>目标节点 targetNode 所在 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNodes</b><span>Array(JSON)</span></h4>
<p>被拖拽的节点 JSON 数据集合</p>
<p class="highlight_red">无论拖拽操作为 复制 还是 移动,treeNodes 都是当前被拖拽节点的数据集合。</p>
<h4 class="topLine"><b>targetNode</b><span>JSON</span></h4>
<p>treeNodes 被拖拽放开的目标节点 JSON 数据对象。</p>
<p class="highlight_red">如果拖拽成为根节点,则 targetNode = null</p>
<h4 class="topLine"><b>moveType</b><span>String</span></h4>
<p>指定移动到目标节点的相对位置</p>
<p class="highlight_red">"inner":成为子节点,"prev":成为同级前一个节点,"next":成为同级后一个节点</p>
<h4 class="topLine"><b>isCopy</b><span>Boolean</span></h4>
<p>拖拽节点操作是 复制 或 移动</p>
<p class="highlight_red">true:复制;false:移动</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,zTree 将恢复被拖拽的节点,也无法触发 onDrop 事件回调函数</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止将节点拖拽成为根节点</h4>
<pre xmlns=""><code>function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
return !(targetNode == null || (moveType != "inner" && !targetNode.parentTId));
};
var setting = {
edit: {
enable: true
},
callback: {
beforeDrop: zTreeBeforeDrop
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeEditName</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点编辑按钮的 click 事件,并且根据返回值确定是否允许进入名称编辑状态</p>
<p class="highlight_red">此事件回调函数最主要是用于捕获编辑按钮的点击事件,然后触发自定义的编辑界面操作。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>将要进入编辑名称状态的节点 JSON 数据对象</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,节点将无法进入 zTree 默认的编辑名称状态</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止修改父节点的名称</h4>
<pre xmlns=""><code>function zTreeBeforeEditName(treeId, treeNode) {
return !treeNode.isParent;
}
var setting = {
edit: {
enable: true
},
callback: {
beforeEditName: zTreeBeforeEditName
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeExpand</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>要展开的父节点 JSON 数据对象</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,zTree 将不会展开节点,也无法触发 onExpand 事件回调函数</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止所有已折叠的父节点展开</h4>
<pre xmlns=""><code>function zTreeBeforeExpand(treeId, treeNode) {
return false;
};
var setting = {
callback: {
beforeExpand: zTreeBeforeExpand
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeMouseDown</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 zTree 上鼠标按键按下之前的事件回调函数,并且根据返回值确定触发 onMouseDown 事件回调函数</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>鼠标按键按下时所在节点的 JSON 数据对象</p>
<p class="highlight_red">如果不在节点上,则返回 null</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,将仅仅无法触发 onMouseDown 事件回调函数,对其他操作无任何影响</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止 onMouseDown 事件</h4>
<pre xmlns=""><code>function zTreeBeforeMouseDown(treeId, treeNode) {
return false;
};
var setting = {
callback: {
beforeMouseDown: zTreeBeforeMouseDown
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeMouseUp</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 zTree 上鼠标按键松开之前的事件回调函数,并且根据返回值确定触发 onMouseUp 事件回调函数</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>鼠标按键松开时所在节点的 JSON 数据对象</p>
<p class="highlight_red">如果不在节点上,则返回 null</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,将仅仅无法触发 onMouseUp 事件回调函数,对其他操作无任何影响</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止 onMouseUp 事件</h4>
<pre xmlns=""><code>function zTreeBeforeMouseUp(treeId, treeNode) {
return false;
};
var setting = {
callback: {
beforeMouseUp: zTreeBeforeMouseUp
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeRemove</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点被删除之前的事件回调函数,并且根据返回值确定是否允许删除操作</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>将要删除的节点 JSON 数据对象</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,zTree 将不删除节点,也无法触发 onRemove 事件回调函数</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止全部删除操作</h4>
<pre xmlns=""><code>function zTreeBeforeRemove(treeId, treeNode) {
return false;
}
var setting = {
edit: {
enable: true
},
callback: {
beforeRemove: zTreeBeforeRemove
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode, newName, isCancel)</span><span class="path">setting.callback.</span>beforeRename</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点编辑名称结束(Input 失去焦点 或 按下 Enter 键)之后,更新节点名称数据之前的事件回调函数,并且根据返回值确定是否允许更改名称的操作</p>
<p class="highlight_red">节点进入编辑名称状态后,按 ESC 键可以放弃当前修改,恢复原名称,取消编辑名称状态</p>
<p class="highlight_red">从 v3.5.13 开始,取消编辑状态也会触发此回调,根据 isCancel 参数判断</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>将要更改名称的节点 JSON 数据对象</p>
<h4 class="topLine"><b>newName</b><span>String</span></h4>
<p>修改后的新名称</p>
<h4 class="topLine"><b>isCancel</b><span>Boolean</span></h4>
<p>是否取消操作 (v3.5.13+)</p>
<p class="highlight_red">isCancel = true 表示取消编辑操作(按下 ESC 或 使用 cancelEditName 方法)</p>
<p class="highlight_red">isCancel = false 表示确认修改操作</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,zTree 将保持名称编辑状态,无法触发 onRename 事件回调函数,并且会导致屏蔽其它事件,直到修改名称使得 beforeRename 返回 true</p>
<p class="highlight_red">如果返回 false,不会让 input 输入框获取焦点,避免由于警告信息而导致反复触发 beforeRename。 请在关闭提示警告信息后,利用 editName 方法让 input 重新获取焦点。</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止修改的名称的长度小于 5</h4>
<pre xmlns=""><code>function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
return newName.length > 5;
}
var setting = {
edit: {
enable: true
},
callback: {
beforeRename: zTreeBeforeRename
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(treeId, treeNode)</span><span class="path">setting.callback.</span>beforeRightClick</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 zTree 上鼠标右键点击之前的事件回调函数,并且根据返回值确定触发 onRightClick 事件回调函数</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>鼠标右键点击时所在节点的 JSON 数据对象</p>
<p class="highlight_red">如果不在节点上,则返回 null</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值是 true / false</p>
<p class="highlight_red">如果返回 false,将仅仅无法触发 onRightClick 事件回调函数,对其他操作无任何影响</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止 onRightClick 事件</h4>
<pre xmlns=""><code>function zTreeBeforeRightClick(treeId, treeNode) {
return false;
};
var setting = {
callback: {
beforeRightClick: zTreeBeforeRightClick
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span class="path">setting.callback.</span>onAsyncError</h2>
<h2><span>Function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown)</span>&nbsp;</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获异步加载出现异常错误的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeAsync 方法,且返回 false,将无法触发 onAsyncSuccess / onAsyncError 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>进行异步加载的父节点 JSON 数据对象</p>
<p class="highlight_red">针对根进行异步加载时,treeNode = null</p>
<h4 class="topLine"><b>XMLHttpRequest</b><span>String</span></h4>
<p>标准 XMLHttpRequest 对象,请参考 JQuery API 文档。</p>
<h4 class="topLine"><b>textStatus</b><span>String</span></h4>
<p>请求状态:success,error,请参考 JQuery API 文档。</p>
<h4 class="topLine"><b>errorThrown</b><span>String</span></h4>
<p>errorThrown 只有当异常发生时才会被传递,请参考 JQuery API 文档。</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 异步加载出现异常后,弹出错误信息</h4>
<pre xmlns=""><code>function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
};
var setting = {
callback: {
onAsyncError: zTreeOnAsyncError
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode, msg)</span><span class="path">setting.callback.</span>onAsyncSuccess</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获异步加载正常结束的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeAsync 方法,且返回 false,将无法触发 onAsyncSuccess / onAsyncError 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>进行异步加载的父节点 JSON 数据对象</p>
<p class="highlight_red">针对根进行异步加载时,treeNode = null</p>
<h4 class="topLine"><b>msg</b><span>String / Object</span></h4>
<p>异步获取的节点数据字符串,主要便于用户调试使用。</p>
<p class="highlight_red">实际数据类型会受 setting.async.dataType 的设置影响,请参考 JQuery API 文档。</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 异步加载成功后,弹出提示信息</h4>
<pre xmlns=""><code>function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
alert(msg);
};
var setting = {
callback: {
onAsyncSuccess: zTreeOnAsyncSuccess
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode)</span><span class="path">setting.callback.</span>onCheck</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeCheck 方法,且返回 false,将无法触发 onCheck 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>被勾选 或 取消勾选的节点 JSON 数据对象</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次点击 checkbox 或 radio 后, 弹出该节点的 tId、name 以及当前勾选状态的信息</h4>
<pre xmlns=""><code>function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
};
var setting = {
callback: {
onCheck: zTreeOnCheck
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode, clickFlag)</span><span class="path">setting.callback.</span>onClick</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点被点击的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeClick 方法,且返回 false,将无法触发 onClick 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>被点击的节点 JSON 数据对象</p>
<h4 class="topLine"><b>clickFlag</b><span>Number</span></h4>
<p>节点被点击后的选中操作类型,详细看下表</p>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<thead><tr><td>clickFlag</td><td title="是否允许多点选中">selectedMulti</td><td title="是否按下 Ctrl 或 Cmd 键">autoCancelSelected<br/>&&<br/>event.ctrlKey / metaKey</td><td title="节点当前选择状态">isSelected</td><td>选中操作</td></tr></thead>
<tbody>
<tr><td>1</td><td>true</td><td>false</td><td>false</td><td>普通选中</td></tr>
<tr><td>1</td><td>true</td><td>false</td><td>true</td><td>普通选中</td></tr>
<tr><td>2</td><td>true</td><td>true</td><td>false</td><td>追加选中</td></tr>
<tr><td>0</td><td>true</td><td>true</td><td>true</td><td>取消选中</td></tr>
<tr><td>1</td><td>false</td><td>false</td><td>false</td><td>普通选中</td></tr>
<tr><td>1</td><td>false</td><td>false</td><td>true</td><td>普通选中</td></tr>
<tr><td>1</td><td>false</td><td>true</td><td>false</td><td>普通选中</td></tr>
<tr><td>0</td><td>false</td><td>true</td><td>true</td><td>取消选中</td></tr>
</tbody>
</table>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次点击节点后, 弹出该节点的 tId、name 的信息</h4>
<pre xmlns=""><code>function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
};
var setting = {
callback: {
onClick: zTreeOnClick
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode)</span><span class="path">setting.callback.</span>onCollapse</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点被折叠的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeCollapse 方法,且返回 false,将无法触发 onCollapse 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>被折叠的节点 JSON 数据对象</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次折叠节点后, 弹出该节点的 tId、name 的信息</h4>
<pre xmlns=""><code>function zTreeOnCollapse(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
};
var setting = {
callback: {
onCollapse: zTreeOnCollapse
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode)</span><span class="path">setting.callback.</span>onDblClick</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 zTree 上鼠标双击之后的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeDblClick 方法,且返回 false,将无法触发 onDblClick 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>鼠标双击时所在节点的 JSON 数据对象</p>
<p class="highlight_red">如果不在节点上,则返回 null</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次鼠标双击后, 弹出鼠标所在节点的 tId、name 的信息</h4>
<pre xmlns=""><code>function zTreeOnDblClick(event, treeId, treeNode) {
alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
};
var setting = {
callback: {
onDblClick: zTreeOnDblClick
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNodes)</span><span class="path">setting.callback.</span>onDrag</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点被拖拽的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeDrag 方法,且返回 false,将无法触发 onDragMove 和 onDrag 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>被拖拽的节点 treeNodes 所在 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNodes</b><span>Array(JSON)</span></h4>
<p>要被拖拽的节点 JSON 数据集合</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次开始进行拖拽节点后, 弹出被拖拽节点的个数信息</h4>
<pre xmlns=""><code>function zTreeOnDrag(event, treeId, treeNodes) {
alert(treeNodes.length);
};
var setting = {
callback: {
onDrag: zTreeOnDrag
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNodes)</span><span class="path">setting.callback.</span>onDragMove</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点被拖拽过程中移动的事件回调函数</p>
<p class="highlight_red">主要用于捕获 zTree 节点拖拽到的 DOM,从而操作对应的 DOM。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>被拖拽的节点 treeNodes 所在 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNodes</b><span>Array(JSON)</span></h4>
<p>要被拖拽的节点 JSON 数据集合</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 拖拽节点时,随时输出 当前拖拽到的目标 DOM</h4>
<pre xmlns=""><code>function zTreeOnDragMove(event, treeId, treeNodes) {
console.log(event.target);
};
var setting = {
callback: {
onDragMove: zTreeOnDragMove
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNodes, targetNode, moveType, isCopy)</span><span class="path">setting.callback.</span>onDrop</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点拖拽操作结束的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeDrop 方法,且返回 false,将无法触发 onDrop 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>目标节点 targetNode 所在 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNodes</b><span>Array(JSON)</span></h4>
<p>被拖拽的节点 JSON 数据集合</p>
<p class="highlight_red">如果拖拽操作为 移动,treeNodes 是当前被拖拽节点的数据集合。</p>
<p class="highlight_red">如果拖拽操作为 复制,treeNodes 是复制后 clone 得到的新节点数据。</p>
<h4 class="topLine"><b>targetNode</b><span>JSON</span></h4>
<p>成为 treeNodes 拖拽结束的目标节点 JSON 数据对象。</p>
<p class="highlight_red">如果拖拽成为根节点,则 targetNode = null</p>
<h4 class="topLine"><b>moveType</b><span>String</span></h4>
<p>指定移动到目标节点的相对位置</p>
<p class="highlight_red">"inner":成为子节点,"prev":成为同级前一个节点,"next":成为同级后一个节点</p>
<p class="highlight_red">如果 moveType = null,表明拖拽无效</p>
<h4 class="topLine"><b>isCopy</b><span>Boolean</span></h4>
<p>拖拽节点操作是 复制 或 移动</p>
<p class="highlight_red">true:复制;false:移动</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次拖拽操作结束后, 弹出该被拖拽节点的个数以及目标节点的 tId、name 的信息</h4>
<pre xmlns=""><code>function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
};
var setting = {
callback: {
onDrop: zTreeOnDrop
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode)</span><span class="path">setting.callback.</span>onExpand</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点被展开的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeExpand 方法,且返回 false,将无法触发 onExpand 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>被展开的节点 JSON 数据对象</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次展开节点后, 弹出该节点的 tId、name 的信息</h4>
<pre xmlns=""><code>function zTreeOnExpand(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
};
var setting = {
callback: {
onExpand: zTreeOnExpand
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode)</span><span class="path">setting.callback.</span>onMouseDown</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 zTree 上鼠标按键按下后的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeMouseDown 方法,且返回 false,将无法触发 onMouseDown 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>鼠标按键按下时所在节点的 JSON 数据对象</p>
<p class="highlight_red">如果不在节点上,则返回 null</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次鼠标按键按下后, 弹出鼠标所在节点的 tId、name 的信息</h4>
<pre xmlns=""><code>function zTreeOnMouseDown(event, treeId, treeNode) {
alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
};
var setting = {
callback: {
onMouseDown: zTreeOnMouseDown
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode)</span><span class="path">setting.callback.</span>onMouseUp</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 zTree 上鼠标按键松开后的事件回调函数</p>
<p class="highlight_red">如果设置了 setting.callback.beforeMouseUp 方法,且返回 false,将无法触发 onMouseUp 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>鼠标按键松开时所在节点的 JSON 数据对象</p>
<p class="highlight_red">如果不在节点上,则返回 null</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次鼠标按键松开后, 弹出鼠标所在节点的 tId、name 的信息</h4>
<pre xmlns=""><code>function zTreeOnMouseUp(event, treeId, treeNode) {
alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
};
var setting = {
callback: {
onMouseUp: zTreeOnMouseUp
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode)</span><span class="path">setting.callback.</span>onNodeCreated</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点生成 DOM 后的事件回调函数</p>
<p class="highlight_red">v3.x 采用了延迟加载技术,因此对于父节点未展开的子节点来说,初始化后是不会触发此回调函数,直到其父节点被展开</p>
<p class="highlight_red">大数据量的节点加载请注意:不设置 onNodeCreated,可以提升一部分初始化性能</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>生成 DOM 完毕的节点的 JSON 数据对象</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 创建节点 DOM 后, 弹出该节点的 tId、name 的信息</h4>
<pre xmlns=""><code>function zTreeOnNodeCreated(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
};
var setting = {
callback: {
onNodeCreated: zTreeOnNodeCreated
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode)</span><span class="path">setting.callback.</span>onRemove</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获删除节点之后的事件回调函数。</p>
<p class="highlight_red">如果用户设置了 beforeRemove 回调函数,并返回 false,将无法触发 onRemove 事件回调函数。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>将要删除的节点 JSON 数据对象</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 删除节点时,弹出被删除的节点的 tId 以及 name 信息</h4>
<pre xmlns=""><code>function zTreeOnRemove(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
}
var setting = {
callback: {
onRemove: zTreeOnRemove
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode, isCancel)</span><span class="path">setting.callback.</span>onRename</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获节点编辑名称结束之后的事件回调函数。</p>
<p>1、节点进入编辑名称状态,并且修改节点名称后触发此回调函数。<span class="highlight_red">如果用户设置了 beforeRename 回调函数,并返回 false,将无法触发 onRename 事件回调函数。</span></p>
<p>2、<span class="highlight_red">如果通过直接修改 treeNode 的数据,并且利用 updateNode 方法更新,是不会触发此回调函数的。</span></p>
<p class="highlight_red">3、从 v3.5.13 开始,取消编辑状态也会触发此回调,根据 isCancel 参数判断</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>被修改名称的节点 JSON 数据对象</p>
<h4 class="topLine"><b>isCancel</b><span>Boolean</span></h4>
<p>是否取消操作 (v3.5.13+)</p>
<p class="highlight_red">isCancel = true 表示取消编辑操作(按下 ESC 或 使用 cancelEditName 方法)</p>
<p class="highlight_red">isCancel = false 表示确认修改操作</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 修改名称后,弹出被修改名称的节点的 tId 以及 name 信息</h4>
<pre xmlns=""><code>function zTreeOnRename(event, treeId, treeNode, isCancel) {
alert(treeNode.tId + ", " + treeNode.name);
}
var setting = {
callback: {
onRename: zTreeOnRename
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Function(event, treeId, treeNode)</span><span class="path">setting.callback.</span>onRightClick</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于捕获 zTree 上鼠标右键点击之后的事件回调函数</p>
<p class="highlight_red">1、如果设置了 setting.callback.beforeRightClick 方法,且返回 false,将无法触发 onRightClick 事件回调函数。</p>
<p class="highlight_red">2、只要将 function 的引用赋给 onRightClick 属性,则右键点击 zTree 时,将屏蔽浏览器的右键菜单。</p>
<p>默认值:null</p>
</div>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>event</b><span>js event 对象</span></h4>
<p>标准的 js event 对象</p>
<h4 class="topLine"><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>鼠标右键点击时所在节点的 JSON 数据对象</p>
<p class="highlight_red">如果不在节点上,则返回 null</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 每次鼠标右键点击后, 弹出鼠标所在节点的 tId、name 的信息</h4>
<pre xmlns=""><code>function zTreeOnRightClick(event, treeId, treeNode) {
alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
};
var setting = {
callback: {
onRightClick: zTreeOnRightClick
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.check.</span>autoCheckTrigger</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数。<span class="highlight_red">[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]</span></p>
<p class="highlight_red">1、如果设置 setting.check.chkboxType = { "Y": "", "N": "" },将不会有任何自动关联勾选的操作。</p>
<p class="highlight_red">2、如果开启触发,对于节点较多的树将会影响性能,因为所有被联动勾选的操作都会触发事件回调函数,请根据需要决定是否使用此功能。</p>
<p>默认值: false</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true / false 分别表示 触发 / 不触发 事件回调函数</p>
</div>
<h3>setting 举例</h3>
<h4>1. 需要触发自动关联勾选操作</h4>
<pre xmlns=""><code>var setting = {
check: {
enable: true,
autoCheckTrigger: true
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.check.</span>chkDisabledInherit</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>当父节点设置 chkDisabled = true 时,设置子节点是否自动继承 chkDisabled = true 。<span class="highlight_red">[setting.check.enable = true 时生效]</span></p>
<p class="highlight_red">1、只使用于初始化节点时,便于批量操作。 对于已存在的节点请利用 setChkDisabled 方法单个节点设置。</p>
<p>默认值: false</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true 表示 新加入子节点时,自动继承父节点 chkDisabled = true 的属性。</p>
<p> false 表示 新加入子节点时,不继承父节点 chkDisabled 的属性。</p>
</div>
<h3>setting 举例</h3>
<h4>1. 需要子节点自动继承 chkDisabled = true</h4>
<pre xmlns=""><code>var setting = {
check: {
enable: true,
chkDisabledInherit: true
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.check.</span>chkStyle</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>勾选框类型(checkbox 或 radio)<span class="highlight_red">[setting.check.enable = true 时生效]</span></p>
<p>默认值:"checkbox"</p>
</div>
</div>
<h3>String 格式说明</h3>
<div class="desc">
<p>chkStyle = "checkbox" 时,显示 checkbox 选择框,<span class="highlight_red">setting.check.chkboxType</span> 属性有效。
<br/>chkStyle = "radio" 时,显示 radio 选择框, <span class="highlight_red">setting.check.radioType</span> 属性有效。</p>
<p class="highlight_red">请注意大小写,不要改变</p>
</div>
<h3>checkbox 状态说明</h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p><button type="button" class="chk checkbox_false_full"></button>未勾选;<span class="highlight_red">如果是父节点,则无子节点被勾选</span>。鼠标移到该节点上显示为:<button type="button" class="chk checkbox_false_full_focus"></button></p>
<p><button type="button" class="chk checkbox_false_part"></button>未勾选;(只有父节点存在此状态)<span class="highlight_red">存在被勾选的子节点</span>。鼠标移到该节点上显示为:<button type="button" class="chk checkbox_false_part_focus"></button></p>
<p><button type="button" class="chk checkbox_true_full"></button>被勾选;<span class="highlight_red">如果是父节点,则全部子节点都被勾选</span>。鼠标移到该节点上显示为:<button type="button" class="chk checkbox_true_full_focus"></button></p>
<p><button type="button" class="chk checkbox_true_part"></button>被勾选;(只有父节点存在此状态)<span class="highlight_red">且部分或无子节点被勾选</span>。鼠标移到该节点上显示为:<button type="button" class="chk checkbox_true_part_focus"></button></p>
</div>
</div>
<h3>radio 状态说明</h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p><button type="button" class="chk radio_false_full"></button>未勾选;<span class="highlight_red">如果是父节点,则没有子节点被勾选</span>。鼠标移到该节点上显示为:<button type="button" class="chk radio_false_full_focus"></button></p>
<p><button type="button" class="chk radio_false_part"></button>未勾选;(只有父节点存在此状态)<span class="highlight_red">且存在被勾选的子节点</span>。鼠标移到该节点上显示为:<button type="button" class="chk radio_false_part_focus"></button></p>
<p><button type="button" class="chk radio_true_full"></button>被勾选;<span class="highlight_red">如果是父节点,则没有子节点被勾选</span>。鼠标移到该节点上显示为:<button type="button" class="chk radio_true_full_focus"></button></p>
<p><button type="button" class="chk radio_true_part"></button>被勾选;(只有父节点存在此状态)<span class="highlight_red">且存在被勾选的子节点</span>。鼠标移到该节点上显示为:<button type="button" class="chk radio_true_part_focus"></button></p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 设置选择框为 radio</h4>
<pre xmlns=""><code>var setting = {
check: {
enable: true,
chkStyle: "radio"
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>JSON</span><span class="path">setting.check.</span>chkboxType</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>勾选 checkbox 对于父子节点的关联关系。<span class="highlight_red">[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]</span></p>
<p>默认值:{ "Y": "ps", "N": "ps" }</p>
</div>
</div>
<h3>JSON 格式说明</h3>
<div class="desc">
<p>Y 属性定义 checkbox 被勾选后的情况;
<br/>N 属性定义 checkbox 取消勾选后的情况;
<br/>"p" 表示操作会影响父级节点;
<br/>"s" 表示操作会影响子级节点。</p>
<p class="highlight_red">请注意大小写,不要改变</p>
</div>
<h3>setting 举例</h3>
<h4>1. checkbox 勾选操作,只影响父级节点;取消勾选操作,只影响子级节点</h4>
<pre xmlns=""><code>var setting = {
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "p", "N": "s" }
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.check.</span>enable</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>设置 zTree 的节点上是否显示 checkbox / radio</p>
<p>默认值: false</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true / false 分别表示 显示 / 不显示 复选框或单选框</p>
</div>
<h3>setting 举例</h3>
<h4>1. 需要显示 checkbox</h4>
<pre xmlns=""><code>var setting = {
check: {
enable: true
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.check.</span>nocheckInherit</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>当父节点设置 nocheck = true 时,设置子节点是否自动继承 nocheck = true 。<span class="highlight_red">[setting.check.enable = true 时生效]</span></p>
<p class="highlight_red">1、只使用于初始化节点时,便于批量操作。 对于已存在的节点请利用 updateNode 方法单个节点设置。</p>
<p>默认值: false</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true 表示 新加入子节点时,自动继承父节点 nocheck = true 的属性。</p>
<p> false 表示 新加入子节点时,不继承父节点 nocheck 的属性。</p>
</div>
<h3>setting 举例</h3>
<h4>1. 需要子节点自动继承 nocheck = true</h4>
<pre xmlns=""><code>var setting = {
check: {
enable: true,
nocheckInherit: true
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.check.</span>radioType</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>radio 的分组范围。<span class="highlight_red">[setting.check.enable = true 且 setting.check.chkStyle = "radio" 时生效]</span></p>
<p>默认值:"level"</p>
</div>
</div>
<h3>String 格式说明</h3>
<div class="desc">
<p>radioType = "level" 时,在每一级节点范围内当做一个分组。
<br/>radioType = "all" 时,在整棵树范围内当做一个分组。</p>
<p class="highlight_red">请注意大小写,不要改变</p>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 radio 的判别规则为整棵树内</h4>
<pre xmlns=""><code>var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.data.keep.</span>leaf</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree 的节点叶子节点属性锁,是否始终保持 isParent = false</p>
<p>默认值:false</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true / false 分别表示 锁定 / 不锁定 叶子节点属性</p>
<p class="highlight_red">如果设置为 true,则所有 isParent = false 的节点,都无法添加子节点。</p>
</div>
<h3>setting 举例</h3>
<h4>1. 需要锁定叶子节点状态</h4>
<pre xmlns=""><code>var setting = {
data: {
keep: {
leaf: true
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.data.keep.</span>parent</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree 的节点父节点属性锁,是否始终保持 isParent = true</p>
<p>默认值:false</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true / false 分别表示 锁定 / 不锁定 父节点属性</p>
<p class="highlight_red">如果设置为 true,则所有 isParent = true 的节点,即使该节点的子节点被全部删除或移走,依旧保持父节点状态。</p>
</div>
<h3>setting 举例</h3>
<h4>1. 需要锁定父节点状态</h4>
<pre xmlns=""><code>var setting = {
data: {
keep: {
parent: true
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.data.key.</span>checked</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.excheck</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree 节点数据中保存 check 状态的属性名称。</p>
<p>默认值:"checked"</p>
<p class="highlight_red">请勿与 zTree 节点数据的其他参数冲突,例如:checkedOld</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 zTree 显示节点时,将 treeNode 的 isChecked 属性当做节点名称</h4>
<pre xmlns=""><code>var setting = {
data: {
key: {
checked: "isChecked"
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.data.key.</span>children</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree 节点数据中保存子节点数据的属性名称。</p>
<p>默认值:"children"</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 zTree 显示节点时,将 treeNode 的 nodes 属性当做节点名称</h4>
<pre xmlns=""><code>var setting = {
data: {
key: {
children: "nodes"
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.data.key.</span>name</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree 节点数据保存节点名称的属性名称。</p>
<p>默认值:"name"</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 zTree 显示节点时,将 treeNode 的 ename 属性当做节点名称</h4>
<pre xmlns=""><code>var setting = {
data: {
key: {
name: "ename"
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.data.key.</span>title</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree 节点数据保存节点提示信息的属性名称。<span class="highlight_red">[setting.view.showTitle = true 时生效]</span></p>
<p class="highlight_red">如果设置为 "" ,则自动与 setting.data.key.name 保持一致,避免用户反复设置</p>
<p>默认值:""</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 zTree 显示节点时,将 treeNode 的 fullName 属性当做节点名称</h4>
<pre xmlns=""><code>var setting = {
data: {
key: {
title: "fullName"
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.data.key.</span>url</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>zTree 节点数据保存节点链接的目标 URL 的属性名称。</p>
<p class="highlight_red">特殊用途:当后台数据只能生成 url 属性,又不想实现点击节点跳转的功能时,可以直接修改此属性为其他不存在的属性名称</p>
<p>默认值:"url"</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 设置 zTree 显示节点时,将 treeNode 的 xUrl 属性当做节点链接的目标 URL</h4>
<pre xmlns=""><code>var setting = {
data: {
key: {
url: "xUrl"
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.data.simpleData.</span>enable</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 <span class="highlight_red">addNodes</span> 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)</p>
<p>不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式</p>
<p>默认值:false</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true / false 分别表示 使用 / 不使用 简单数据模式</p>
<p class="highlight_red">如果设置为 true,请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId,并且让数据满足父子关系。</p>
</div>
<h3>setting 举例</h3>
<h4>1. 使用简单 Array 格式的数据</h4>
<pre xmlns=""><code>var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.data.simpleData.</span>idKey</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>节点数据中保存唯一标识的属性名称。<span class="highlight_red">[setting.data.simpleData.enable = true 时生效]</span></p>
<p>默认值:"id"</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 使用简单 Array 格式的数据</h4>
<pre xmlns=""><code>var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String</span><span class="path">setting.data.simpleData.</span>pIdKey</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>节点数据中保存其父节点唯一标识的属性名称。<span class="highlight_red">[setting.data.simpleData.enable = true 时生效]</span></p>
<p>默认值:"pId"</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 使用简单 Array 格式的数据</h4>
<pre xmlns=""><code>var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>String / Number</span><span class="path">setting.data.simpleData.</span>rootPId</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>用于修正根节点父节点数据,即 pIdKey 指定的属性值。<span class="highlight_red">[setting.data.simpleData.enable = true 时生效]</span></p>
<p>默认值:null</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 使用简单 Array 格式的数据</h4>
<pre xmlns=""><code>var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.edit.drag.</span>autoExpandTrigger</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>拖拽时父节点自动展开是否触发 onExpand 事件回调函数。<span class="highlight_red">[setting.edit.enable = true 时生效]</span></p>
<p>默认值:false</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true / false 分别表示 触发 / 不触发 onExpand 事件回调函数。</p>
</div>
<h3>setting 举例</h3>
<h4>1. 设置拖拽时父节点自动展开触发 onExpand 事件回调函数</h4>
<pre xmlns=""><code>var setting = {
edit: {
enable: true,
drag: {
autoExpandTrigger: true
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Number</span><span class="path">setting.edit.drag.</span>autoOpenTime</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>拖拽时父节点自动展开的延时间隔。 (单位:ms)<span class="highlight_red">[setting.edit.enable = true 时生效]</span></p>
<p>默认值:500</p>
<p class="highlight_red">请根据自己的需求适当调整此值</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 设置拖拽到父节点上立刻自动展开</h4>
<pre xmlns=""><code>var setting = {
edit: {
enable: true,
drag: {
autoOpenTime: 0
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Number</span><span class="path">setting.edit.drag.</span>borderMax</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>拖拽节点成为根节点时的 Tree 内边界范围 (单位:px)。<span class="highlight_red">[setting.edit.enable = true 时生效]</span></p>
<p>默认值:10</p>
<p class="highlight_red">请根据自己的需求适当调整此值</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 更改拖拽操作节点成为根节点时的 Tree 内边界范围为20px</h4>
<pre xmlns=""><code>var setting = {
edit: {
enable: true,
drag: {
borderMax: 20
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Number</span><span class="path">setting.edit.drag.</span>borderMin</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>拖拽节点成为根节点时的 Tree 外边界范围 (单位:px)。<span class="highlight_red">[setting.edit.enable = true 时生效]</span></p>
<p>默认值:-5</p>
<p class="highlight_red">请根据自己的需求适当调整此值</p>
</div>
</div>
<h3>setting 举例</h3>
<h4>1. 更改拖拽操作节点成为根节点时的 Tree 外边界范围为10px</h4>
<pre xmlns=""><code>var setting = {
edit: {
enable: true,
drag: {
borderMin: -10
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean / Function(treeId, treeNodes, targetNode)</span><span class="path">setting.edit.drag.</span>inner</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>拖拽到目标节点时,设置是否允许成为目标节点的子节点。<span class="highlight_red">[setting.edit.enable = true 时生效]</span></p>
<p class="highlight_red">拖拽目标是 根 的时候,不触发 prev 和 next,只会触发 inner</p>
<p class="highlight_red">此功能主要作用是对拖拽进行适当限制(辅助箭头),需要结合 prev、next 一起使用,才能实现完整功能。</p>
<p>默认值:true</p>
</div>
</div>
<h3>Boolean 格式说明</h3>
<div class="desc">
<p> true / false 分别表示 允许 / 不允许 成为目标节点的子节点</p>
</div>
<h3>Function 参数说明</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>对应 zTree 的 <b class="highlight_red">treeId</b>,便于用户操控(多棵树拖拽时,是目标节点所在树的 treeId)</p>
<h4 class="topLine"><b>treeNodes</b><span>Array(JSON)</span></h4>
<p>被拖拽的节点 JSON 数据集合</p>
<h4 class="topLine"><b>targetNode</b><span>JSON</span></h4>
<p>拖拽时的目标节点 JSON 数据对象</p>
<p class="highlight_red">如果拖拽的节点要成为根节点,则 targetNode = null</p>
<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
<p>返回值同 Boolean 格式的数据</p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 禁止拖拽成为目标节点的子节点</h4>
<pre xmlns=""><code>var setting = {
edit: {
enable: true,
drag: {
prev: true,
next: true,
inner: false
}
}
};
......</code></pre>
<h4>2. 禁止拖拽成为根节点的子节点</h4>
<pre xmlns=""><code>function canInner(treeId, nodes, targetNode) {
return !(targetNode && targetNode.level === 0);
}
var setting = {
edit: {
enable: true,
drag: {
prev: true,
next: true,
inner: canInner
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.edit.drag.</span>isCopy</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>拖拽时, 设置是否允许复制节点。<span class="highlight_red">[setting.edit.enable = true 时生效]</span></p>
<p>默认值:true</p>
</div>
</div>
<h3>规则说明</h3>
<div class="desc">
<p>1、isCopy = true; isMove = true 时,拖拽节点按下 Ctrl 或 Cmd 键表示 copy; 否则为 move</p>
<p>2、isCopy = true; isMove = false 时,所有拖拽操作都是 copy</p>
<p>3、isCopy = false; isMove = true 时,所有拖拽操作都是 move</p>
<p>4、isCopy = false; isMove = false 时,禁止拖拽操作</p>
</div>
<h3>setting 举例</h3>
<h4>1. 设置所有拖拽操作都是 copy</h4>
<pre xmlns=""><code>var setting = {
edit: {
enable: true,
drag: {
isCopy: true,
isMove: false
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
<div class="apiDetail">
<div>
<h2><span>Boolean</span><span class="path">setting.edit.drag.</span>isMove</h2>
<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.exedit</span> 扩展 js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>拖拽时, 设置是否允许移动节点。<span class="highlight_red">[setting.edit.enable = true 时生效]</span></p>
<p>默认值:true</p>
</div>
</div>
<h3>规则说明</h3>
<div class="desc">
<p>1、isCopy = true; isMove = true 时,拖拽节点按下 Ctrl 或 Cmd 键表示 copy; 否则为 move</p>
<p>2、isCopy = true; isMove = false 时,所有拖拽操作都是 copy</p>
<p>3、isCopy = false; isMove = true 时,所有拖拽操作都是 move</p>
<p>4、isCopy = false; isMove = false 时,禁止拖拽操作</p>
</div>
<h3>setting 举例</h3>
<h4>1. 设置所有拖拽操作都是 move</h4>
<pre xmlns=""><code>var setting = {
edit: {
enable: true,
drag: {
isCopy: false,
isMove: true
}
}
};
......</code></pre>
</div>
</div>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment