Skip to content

1
1024程序员开源挑战赛（10.23-11.14）

GitCode / 1024程序员开源挑战赛（10.23-11.14）

通知 180868
Star 1064
Fork 1042
1
1024程序员开源挑战赛（10.23-11.14）
提交 85a182c0 编写于 作者: Z zTreeAPI
浏览文件
操作

* fixed TypeScript type definition Thanks @UtillYou 

  * Update demo 'super/keyboard_navigation.html' Thanks @bseddon
  * Update demo 'core/searchNodes.html' Thanks @bseddon
  * add setting.view.nodeClasses Thanks @bseddon
上级 ff299144
展开全部 显示空白变更内容
内联 并排
Showing with 541 addition and 111 deletion
README.md
浏览文件 @ 85a182c0
jQuery Tree Plugin ---- zTree
============
last verson : 3.5.42
last verson : 3.5.43
**Donate to zTree** : http://www.treejs.cn/v3/donate.php
......
api/API_cn.html
浏览文件 @ 85a182c0
......@@ -35,7 +35,7 @@
<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.42 API 文档</em></h1><p></p>
<h1><em>zTree v3.5.43 API 文档</em></h1><p></p>
<p>all.js = core + excheck + exedit ( 不包括 exhide ); 发现错误请及时通知，谢谢。</p>
</div>
<ul class="shortcuts language" style="top:0;">
......
api/API_en.html
浏览文件 @ 85a182c0
......@@ -34,7 +34,7 @@
<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.42 API Document</em></h1><p></p>
<h1><em>zTree v3.5.43 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;">
......
api/apiCss/api.js
浏览文件 @ 85a182c0
......@@ -181,7 +181,8 @@ var apiContent = {
{id:7004, pId:70, t:"dblClickExpand", name:"dblClickExpand : true,", iconSkin:"core", showAPI:true},
{id:7005, pId:70, t:"expandSpeed", name:"expandSpeed : \"fast\",", iconSkin:"core", showAPI:true},
{id:7006, pId:70, t:"fontCss", name:"fontCss : {},", iconSkin:"core", showAPI:true},
{id:7012, pId:70, t:"nameIsHTML", name:"nameIsHTML : false,", iconSkin:"core", showAPI:true},
{id:7014, pId:70, t:"nodeClasses", name:"nodeClasses : {},", iconSkin:"core", showAPI:true},
{id:7013, pId:70, t:"nameIsHTML", name:"nameIsHTML : false,", iconSkin:"core", showAPI:true},
{id:7007, pId:70, t:"removeHoverDom", name:"removeHoverDom : null,", iconSkin:"edit", showAPI:true},
{id:7008, pId:70, t:"selectedMulti", name:"selectedMulti : true,", iconSkin:"core", showAPI:true},
{id:7009, pId:70, t:"showIcon", name:"showIcon : true,", iconSkin:"core", showAPI:true},
......
api/apiCss/jquery.ztree.core.js
浏览文件 @ 85a182c0
此差异已折叠。
api/cn/setting.view.nodeClasses.html 0 → 100644
浏览文件 @ 85a182c0
<div class="apiDetail">
<div>
<h2><span>JSON / Function(treeId, treeNode)</span><span class="path">setting.view.</span>nodeClasses</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>使用 className 设置文字样式，只针对 zTree 在节点上显示的&lt;A&gt;对象。便于 css 与 js 解耦</p>
<p>默认值：{add: [], remove: []}</p>
<p class="highlight_red">v3.5.43+</p>
</div>
</div>
<h3>JSON 格式说明</h3>
<div class="desc">
<p>add: Array，需要添加的 className 集合 例如：<span class="highlight_red">{add: ['highlight']}</span></p>
<p>remove: Array，需要删除的 className 集合 例如：<span class="highlight_red">{remove: ['highlight']}</span></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>
<h4 class="topLine"><b>返回值</b><span>JSON</span></h4>
<p>返回值同 JSON 格式的数据，例如：<span class="highlight_red">{add: ['highlight'], remove: ['hide']}</span></p>
</div>
<h3>setting & function 举例</h3>
<h4>1. 设置全部节点 name 显示为红色</h4>
<pre xmlns=""><code><style>.ztree li > a.highlight { color: red; }</style>
var setting = {
view: {
nodeClasses : {add: ['highlight']}
}
};</code></pre>
<h4>2. 删除节点 name 指定的 className：highlight</h4>
<pre xmlns=""><code>var setting = {
view: {
nodeClasses : {remove: ['highlight']}
}
};</code></pre>
<h4>3. 设置 level=0 的节点 name 显示为红色</h4>
<pre xmlns=""><code>function setNodeClasses(treeId, treeNode) {
return treeNode.level == 0 ? {add: ['highlight']} : {remove: ['highlight']};
};
var setting = {
view: {
nodeClasses: setNodeClasses
}
};</code></pre>
</div>
</div>
\ No newline at end of file
api/en/setting.view.nodeClasses.html 0 → 100644
浏览文件 @ 85a182c0
<div class="apiDetail">
<div>
<h2><span>JSON / Function(treeId, treeNode)</span><span class="path">setting.view.</span>nodeClasses</h2>
<h3>Overview<span class="h3_info">[ depends on <span class="highlight_green">jquery.ztree.core</span> js ]</span></h3>
<div class="desc">
<p></p>
<div class="longdesc">
<p>Use className to set text style, only applies to &lt;A&gt; object in the node DOM. (Decoupling CSS from JavaScript)</p>
<p>Default: {add: [], remove: []}</p>
<p class="highlight_red">v3.5.43+</p>
</div>
</div>
<h3>JSON Format</h3>
<div class="desc">
<p>add: Array, The className collection to be added. e.g. <span class="highlight_red">{add: ['highlight']}</span></p>
<p>remove: Array, The className collection to be removed. e.g. <span class="highlight_red">{remove: ['highlight']}</span></p>
</div>
<h3>Function Parameter Descriptions</h3>
<div class="desc">
<h4><b>treeId</b><span>String</span></h4>
<p>zTree unique identifier: <b class="highlight_red">treeId</b>.</p>
<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
<p>JSON data object of the node which use the personalized text style</p>
<h4 class="topLine"><b>Return </b><span>JSON</span></h4>
<p>Return value is same as 'JSON Format'. e.g. <span class="highlight_red">{add: ['highlight'], remove: ['hide']}</span></p>
</div>
<h3>Examples of setting & function</h3>
<h4>1. Set the node name's color to red</h4>
<pre xmlns=""><code><style>.ztree li > a.highlight { color: red; }</style>
var setting = {
view: {
nodeClasses : {add: ['highlight']}
}
};</code></pre>
<h4>2. Remove the node name's special className: highlight</h4>
<pre xmlns=""><code>var setting = {
view: {
nodeClasses : {remove: ['highlight']}
}
};</code></pre>
<h4>3. Set the root node name's color to red</h4>
<pre xmlns=""><code>function setNodeClasses(treeId, treeNode) {
return treeNode.level == 0 ? {add: ['highlight']} : {remove: ['highlight']};
};
var setting = {
view: {
nodeClasses: setNodeClasses
}
};</code></pre>
</div>
</div>
\ No newline at end of file
demo/cn/core/searchNodes.html
浏览文件 @ 85a182c0
......@@ -3,15 +3,54 @@
<HEAD>
<TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<style>
.ztree li span {
position: relative;
}
.ztree li > a.highlight_alt
{
color: #00A600;
font-weight: bold;
}
.ztree li > a.highlight span.node_name:before,
.ztree li > a.highlight_hiddennodes span.node_name:before,
.ztree li > a.hiddennodes span.node_name:before
{
font-family: FontAwesome;
color: green;
font-size: 14px;
position: absolute;
left: 100%;
margin-left: 8px;
}
.ztree li > a.highlight span.node_name:before
{
content: '\f058';
}
.ztree li > a.hiddennodes span.node_name:before
{
content: '\f00e';
}
.ztree li > a.highlight.hiddennodes span.node_name:before
{
content: '\f058 \f00e';
}
</style>
<SCRIPT type="text/javascript">
<!--
var setting = {
callback:
{
onCollapse: clickButton,
onExpand: clickButton
},
data: {
key: {
title: "t"
......@@ -21,7 +60,8 @@
}
},
view: {
fontCss: getFontCss
fontCss: getFontCss,
// nodeClasses: getNodeClasses
}
};
......@@ -51,11 +91,16 @@
key.addClass("empty");
}
}
var lastValue = "", nodeList = [], fontCss = {};
var lastValue = "", nodeList = [], fontCss = {}, nodeClasses = [];
function clickRadio(e) {
lastValue = "";
searchNode(e);
}
function clickButton(e, treeId, treeNode) {
if ( $("#styleNodesByCSS").attr('checked') ) return;
updateNodes(false, treeNode);
updateNodes(true, treeNode)
}
function searchNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (!$("#getNodesByFilter").attr("checked")) {
......@@ -75,8 +120,8 @@
}
if (lastValue === value) return;
lastValue = value;
if (value === "") return;
updateNodes(false);
if (value === "") return;
if ($("#getNodeByParam").attr("checked")) {
var node = zTree.getNodeByParam(keyType, value);
......@@ -97,23 +142,81 @@
updateNodes(true);
}
function updateNodes(highlight) {
function updateNodes(highlight, node = null) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
for( var i=0, l=nodeList.length; i<l; i++) {
var applyClasses = $("#styleNodesByClasses").attr('checked');
var expanded = node && node.open;
// If expanding a node then it MUST be a parent
// in which case it cannot be hiding matched nodes
if ( applyClasses && expanded )
{
node.hiddenNodes = false;
zTree.updateNode(node);
}
for( var i=0, l=nodeList.length; i<l; i++ )
{
nodeList[i].highlight = highlight;
nodeList[i].hiddenNodes = false;
if ( applyClasses && highlight )
{
// Make parent nodes of matched nodes show the
// existence of hidden nodes if the parent is closed.
var node = nodeList[i];
while( true )
{
if ( ! node.parentTId ) break;
var parentNode = zTree.getNodeByTId( node.parentTId );
if ( parentNode.isParent && parentNode.open ) break;
parentNode.hiddenNodes = true;
zTree.updateNode( parentNode );
node = parentNode;
}
}
zTree.updateNode(nodeList[i]);
}
}
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
return $("#styleNodesByCSS").attr('checked')
? ((!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"})
: {color:"#333", "font-weight":"normal"};
}
function getNodeClasses(treeId, treeNode) {
var classes = $("#styleNodesByCSS").attr('checked') || ! ( !!treeNode.highlight || !!treeNode.hiddenNodes )
? {remove: ['highlight','highlight_alt','hiddennodes','highlight_hiddennodes']}
: ( !!treeNode.highlight
? ( (!!treeNode.hiddenNodes)
? {add:['highlight','highlight_alt','hiddennodes']}
: {add:['highlight','highlight_alt']}
)
: {add:['hiddennodes','highlight_alt']}
);
return classes;
}
function filter(node) {
return !node.isParent && node.isFirstNode;
}
function resetTree(e) {
if ($("#styleNodesByCSS").attr('checked')) {
delete setting.view.nodeClasses;
setting.view.fontCss = getFontCss;
} else {
delete setting.view.fontCss;
setting.view.nodeClasses = getNodeClasses;
}
initTree();
clickRadio(e);
}
function initTree() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
var key;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
initTree();
key = $("#key");
key.bind("focus", focusKey)
.bind("blur", blurKey)
......@@ -126,6 +229,9 @@
$("#getNodesByParam").bind("change", clickRadio);
$("#getNodesByParamFuzzy").bind("change", clickRadio);
$("#getNodesByFilter").bind("change", clickRadio);
$("#styleNodesByCSS").bind("change", resetTree);
$("#styleNodesByClasses").bind("change", resetTree);
// $(".ztree li > span.button").bind("click", clickButton);
});
//-->
</SCRIPT>
......@@ -152,6 +258,8 @@
<input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByParam</span><br/>
<input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked /><span>getNodesByParamFuzzy (only string)</span><br/>
<input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByFilter (参考本页源码中 function filter)</span><br/>
样式：<input type="radio" id="styleNodesByCSS" name="styleType" class="radio first" checked /><span>styleNodesByCSS</span><br/>
<input type="radio" id="styleNodesByClasses" name="styleType" class="radio" style="margin-left:36px;" /><span>styleNodesByClasses</span><br/>
</p>
</li>
</ul>
......
demo/en/core/searchNodes.html
浏览文件 @ 85a182c0
......@@ -3,15 +3,54 @@
<HEAD>
<TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<style>
.ztree li span {
position: relative;
}
.ztree li > a.highlight_alt
{
color: #00A600;
font-weight: bold;
}
.ztree li > a.highlight span.node_name:before,
.ztree li > a.highlight_hiddennodes span.node_name:before,
.ztree li > a.hiddennodes span.node_name:before
{
font-family: FontAwesome;
color: green;
font-size: 14px;
position: absolute;
left: 100%;
margin-left: 8px;
}
.ztree li > a.highlight span.node_name:before
{
content: '\f058';
}
.ztree li > a.hiddennodes span.node_name:before
{
content: '\f00e';
}
.ztree li > a.highlight.hiddennodes span.node_name:before
{
content: '\f058 \f00e';
}
</style>
<SCRIPT type="text/javascript">
<!--
var setting = {
callback:
{
onCollapse: clickButton,
onExpand: clickButton
},
data: {
key: {
title: "t"
......@@ -21,24 +60,25 @@
}
},
view: {
fontCss: getFontCss
fontCss: getFontCss,
// nodeClasses: getNodeClasses
}
};
var zNodes =[
{ id:1, pId:0, name:"search node demo 1", t:"id=1", open:true},
{ id:11, pId:1, name:"can search 'name'", t:"id=11"},
{ id:12, pId:1, name:"can search 'level'", t:"id=12"},
{ id:13, pId:1, name:"can search 'id'", t:"id=13"},
{ id:14, pId:1, name:"can search other attr", t:"id=14"},
{ id:2, pId:0, name:"search node demo 2", t:"id=2", open:true},
{ id:21, pId:2, name:"can search single node", t:"id=21"},
{ id:22, pId:2, name:"can search nodes array", t:"id=22"},
{ id:23, pId:2, name:"search me", t:"id=23"},
{ id:3, pId:0, name:"search node demo 3", t:"id=3", open:true },
{ id:31, pId:3, name:"My id is : 31", t:"id=31"},
{ id:32, pId:31, name:"My id is : 32", t:"id=32"},
{ id:33, pId:32, name:"My id is : 33", t:"id=33"}
{ id:1, pId:0, name:"节点搜索演示 1", t:"id=1", open:true},
{ id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
{ id:12, pId:1, name:"关键字可以是level", t:"id=12"},
{ id:13, pId:1, name:"关键字可以是id", t:"id=13"},
{ id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
{ id:2, pId:0, name:"节点搜索演示 2", t:"id=2", open:true},
{ id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
{ id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
{ id:23, pId:2, name:"搜我吧", t:"id=23"},
{ id:3, pId:0, name:"节点搜索演示 3", t:"id=3", open:true },
{ id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
{ id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
{ id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
];
function focusKey(e) {
......@@ -51,11 +91,16 @@
key.addClass("empty");
}
}
var lastValue = "", nodeList = [], fontCss = {};
var lastValue = "", nodeList = [], fontCss = {}, nodeClasses = [];
function clickRadio(e) {
lastValue = "";
searchNode(e);
}
function clickButton(e, treeId, treeNode) {
if ( $("#styleNodesByCSS").attr('checked') ) return;
updateNodes(false, treeNode);
updateNodes(true, treeNode)
}
function searchNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (!$("#getNodesByFilter").attr("checked")) {
......@@ -75,8 +120,8 @@
}
if (lastValue === value) return;
lastValue = value;
if (value === "") return;
updateNodes(false);
if (value === "") return;
if ($("#getNodeByParam").attr("checked")) {
var node = zTree.getNodeByParam(keyType, value);
......@@ -97,23 +142,81 @@
updateNodes(true);
}
function updateNodes(highlight) {
function updateNodes(highlight, node = null) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
for( var i=0, l=nodeList.length; i<l; i++) {
var applyClasses = $("#styleNodesByClasses").attr('checked');
var expanded = node && node.open;
// If expanding a node then it MUST be a parent
// in which case it cannot be hiding matched nodes
if ( applyClasses && expanded )
{
node.hiddenNodes = false;
zTree.updateNode(node);
}
for( var i=0, l=nodeList.length; i<l; i++ )
{
nodeList[i].highlight = highlight;
nodeList[i].hiddenNodes = false;
if ( applyClasses && highlight )
{
// Make parent nodes of matched nodes show the
// existence of hidden nodes if the parent is closed.
var node = nodeList[i];
while( true )
{
if ( ! node.parentTId ) break;
var parentNode = zTree.getNodeByTId( node.parentTId );
if ( parentNode.isParent && parentNode.open ) break;
parentNode.hiddenNodes = true;
zTree.updateNode( parentNode );
node = parentNode;
}
}
zTree.updateNode(nodeList[i]);
}
}
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
return $("#styleNodesByCSS").attr('checked')
? ((!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"})
: {color:"#333", "font-weight":"normal"};
}
function getNodeClasses(treeId, treeNode) {
var classes = $("#styleNodesByCSS").attr('checked') || ! ( !!treeNode.highlight || !!treeNode.hiddenNodes )
? {remove: ['highlight','highlight_alt','hiddennodes','highlight_hiddennodes']}
: ( !!treeNode.highlight
? ( (!!treeNode.hiddenNodes)
? {add:['highlight','highlight_alt','hiddennodes']}
: {add:['highlight','highlight_alt']}
)
: {add:['hiddennodes','highlight_alt']}
);
return classes;
}
function filter(node) {
return !node.isParent && node.isFirstNode;
}
function resetTree(e) {
if ($("#styleNodesByCSS").attr('checked')) {
delete setting.view.nodeClasses;
setting.view.fontCss = getFontCss;
} else {
delete setting.view.fontCss;
setting.view.nodeClasses = getNodeClasses;
}
initTree();
clickRadio(e);
}
function initTree() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
var key;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
initTree();
key = $("#key");
key.bind("focus", focusKey)
.bind("blur", blurKey)
......@@ -126,6 +229,9 @@
$("#getNodesByParam").bind("change", clickRadio);
$("#getNodesByParamFuzzy").bind("change", clickRadio);
$("#getNodesByFilter").bind("change", clickRadio);
$("#styleNodesByCSS").bind("change", resetTree);
$("#styleNodesByClasses").bind("change", resetTree);
// $(".ztree li > span.button").bind("click", clickButton);
});
//-->
</SCRIPT>
......@@ -152,6 +258,9 @@
<input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByParam</span><br/>
<input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked /><span>getNodesByParamFuzzy (only string)</span><br/>
<input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByFilter (see source: function filter)</span><br/>
<input type="radio" id="styleNodesByCSS" name="styleType" class="radio" style="margin-left:36px;" checked /><span>styleNodesByCSS (see source: function filter)</span><br/>
style:&nbsp; <input type="radio" id="styleNodesByCSS" name="styleType" class="radio first" checked /><span>styleNodesByCSS</span><br/>
<input type="radio" id="styleNodesByClasses" name="styleType" class="radio" style="margin-left:36px;" /><span>styleNodesByClasses</span><br/>
</p>
</li>
</ul>
......
demo/js/keyboard_navigation.js
浏览文件 @ 85a182c0
......@@ -13,6 +13,13 @@
( function ($)
{
/**
* Dummy function to provide a placeholder for the destroy function
*/
$.fn.zTreeKeyboardNavigationDestroy = function()
{
}
/**
* Creates a function that adds keyboard navigation:
* Home: home key (keycode 36) Goes to the first root element is visible
......@@ -22,8 +29,11 @@
* Up: up cursor key (keycode 37) Goes to the prior visible node at the same level
* Previous: left cursor key (keycode 38) Goes to the prior visible node following the hierarchy
* Toggle: space key (keycode 32) Toggles the expand/collapse state of a parent node
* @param {IxTreeObj} zTree
* @param {string|JQuery<HTMLElement} element
* @param {IJSON[]} selectedNodes
*/
$.fn.zTreeKeyboardNavigation = function(zTree, element)
$.fn.zTreeKeyboardNavigation = function(zTree, element, selectedNodes = null )
{
if (typeof element === 'string' || element instanceof String)
{
......@@ -41,7 +51,18 @@
}
}
$(element).bind( 'keydown', function( e )
// Clear the previous event handler (there may be none)
$.fn.zTreeKeyboardNavigationDestroy();
/**
* Make it possible to destroy (remove the event handlers)
*/
$.fn.zTreeKeyboardNavigationDestroy = function()
{
$(element).off( 'keydown' );
}
$(element).on( 'keydown', function( e )
{
var selectedNodes = zTree.getSelectedNodes();
var selectedNode = selectedNodes.length ? selectedNodes[0] : null;
......@@ -248,8 +269,16 @@
focusSelectedNode();
} );
$(element).trigger({ type : 'keydown', which : 36, keyCode: 36 });
if ( selectedNodes && selectedNodes.length )
{
zTree.selectNode( selectedNodes[0] );
focusSelectedNode();
}
else
{
$(element).trigger({ type : 'keydown', which : 36, keyCode: 36 });
}
}
} )(jQuery);
\ No newline at end of file
index.d.ts
浏览文件 @ 85a182c0
interface JQuery {
zTree: IzTree;
}
......@@ -7,60 +6,97 @@ interface IJSON {
[key: string]: any
}
interface ITreeNode {
checked?: boolean;
children?: Array<ITreeNode>;
chkDisabled?: boolean;
click?: CallBackOnFn;
getCheckStatus?: () => object;
getIndex?: () => number;
getNextNode?: () => ITreeNode;
getParentNode?: () => ITreeNode;
getPath?: () => Array<ITreeNode>;
getPrevNode?: () => ITreeNode;
halfCheck?: boolean;
icon?: string;
iconClose?: string;
iconOpen?: string;
iconSkin?: string;
isHidden?: boolean;
isParent?: boolean;
name?: string;
nocheck?: boolean;
open?: boolean;
target?: string;
url?: string;
check_Child_State?: number;
check_Focus?: boolean;
checkedOld?: boolean;
editNameFlag?: boolean;
isAjaxing?: boolean;
isFirstNode?: boolean;
isHover?: boolean;
isLastNode?: boolean;
level?: number;
parentTId?: string;
tId?: string;
[key: string]: any;
}
type ApplicationType = 'application/x-www-form-urlencoded' | 'application/json';
type AjaxType = 'get' | 'post';
type dataType = 'text' | 'json' | 'jsonp' | 'html' | 'xml' | 'script';
type DataType = 'text' | 'json' | 'jsonp' | 'html' | 'xml' | 'script';
interface IAsync {
autoParam?: string[];
contentType?: ApplicationType;
dataFilter?: (treeId: string, parentNode: object, responseData: IJSON[] | IJSON | string) => IJSON[] | IJSON;
dataType?: dataType;
dataFilter?: (treeId: string, parentNode: ITreeNode, responseData: IJSON[] | IJSON | string) => IJSON[] | IJSON;
dataType?: DataType;
enable?: boolean;
otherParam?: string[] | IJSON;
type?: AjaxType;
headers?: object;
xhrFields?: object;
url: string;
url: ((treeId: string, treeNode: ITreeNode) => string) | string;
}
type CallBackBeforeFn = (treeId: string, treeNode: object) => boolean;
type CallBackOnFn = (event: Event, treeId: string, treeNode: IJSON) => void;
type CallBackBeforeFn = (treeId: string, treeNode: ITreeNode) => boolean | Promise<boolean>;
type CallBackOnFn = (event: Event, treeId: string, treeNode: ITreeNode) => void | Promise<void>;
interface ICallback {
beforeAsync?: CallBackBeforeFn;
beforeCheck?: CallBackBeforeFn;
beforeClick?: (treeId: string, treeNode: object, clickFlag: number) => boolean;
beforeClick?: (treeId: string, treeNode: ITreeNode, clickFlag: number) => boolean | Promise<boolean>;
beforeCollapse?: CallBackBeforeFn;
beforeDblClick?: CallBackBeforeFn;
beforeDrag?: (treeId: string, treeNode: IJSON[]) => boolean;
beforeDrag?: (treeId: string, treeNode: ITreeNode[]) => boolean | Promise<boolean>;
beforeDragOpen?: CallBackBeforeFn;
beforeDrop?: (treeId: string, treeNode: IJSON[], targetNode: object, moveType: string, isCopy: boolean) => boolean;
beforeDrop?: (treeId: string, treeNode: ITreeNode[], targetNode: object, moveType: string, isCopy: boolean) => boolean | Promise<boolean>;
beforeEditName?: CallBackBeforeFn;
beforeExpand?: CallBackBeforeFn;
beforeMouseDown?: CallBackBeforeFn;
beforeMouseUp?: CallBackBeforeFn;
beforeRemove?: CallBackBeforeFn;
beforeRename?: (treeId: string, treeNode: object, newName: string, isCancel: boolean) => boolean;
beforeRename?: (treeId: string, treeNode: ITreeNode, newName: string, isCancel: boolean) => boolean | Promise<boolean>;
beforeRightClick?: CallBackBeforeFn;
onAsyncError?: (event: Event, treeId: string, treeNode: object, XMLHttpRequest: any, textStatus: string, errorThrown: string) => void;
onAsyncSuccess?: (event: Event, treeId: string, treeNode: object, msg: string | object) => void;
onCheck?: (event: Event, treeId: string, treeNode: object) => void;
onClick?: (event: Event, treeId: string, treeNode: object, clickFlag: number) => void;
onCollapse?: (event: Event, treeId: string, treeNode: object) => void;
onDblClick?: (event: Event, treeId: string, treeNode: object) => void;
onDrag?: (event: Event, treeId: string, treeNodes: IJSON[]) => void;
onDragMove?: (event: Event, treeId: string, treeNodes: IJSON[]) => void;
onDrop?: (event: Event, treeId: string, treeNodes: IJSON[], targetNode: object, moveType: string, isCopy: boolean) => void;
onAsyncError?: (event: Event, treeId: string, treeNode: ITreeNode, XMLHttpRequest: any, textStatus: string, errorThrown: string) => void | Promise<void>;
onAsyncSuccess?: (event: Event, treeId: string, treeNode: ITreeNode, msg: string | object) => void | Promise<void>;
onCheck?: (event: Event, treeId: string, treeNode: ITreeNode) => void | Promise<void>;
onClick?: (event: Event, treeId: string, treeNode: ITreeNode, clickFlag: number) => void | Promise<void>;
onCollapse?: (event: Event, treeId: string, treeNode: ITreeNode) => void | Promise<void>;
onDblClick?: (event: Event, treeId: string, treeNode: ITreeNode) => void | Promise<void>;
onDrag?: (event: Event, treeId: string, treeNodes: ITreeNode[]) => void | Promise<void>;
onDragMove?: (event: Event, treeId: string, treeNodes: ITreeNode[]) => void | Promise<void>;
onDrop?: (event: Event, treeId: string, treeNodes: ITreeNode[], targetNode: object, moveType: string, isCopy: boolean) => void | Promise<void>;
onExpand?: CallBackOnFn;
onMouseDown?: CallBackOnFn;
onMouseUp?: CallBackOnFn;
onNodeCreated?: CallBackOnFn;
onRemove?: CallBackOnFn;
onRename?: (event: Event, treeId: string, treeNode: IJSON, isCancel: boolean) => void;
onRename?: (event: Event, treeId: string, treeNode: ITreeNode, isCancel: boolean) => void | Promise<void>;
onRightClick?: CallBackOnFn;
}
......@@ -97,7 +133,7 @@ interface IData {
}
type removeFnType<T> = (treeId: string, treeNode: object) => T;
type removeFnType<T> = (treeId: string, treeNode: ITreeNode) => T;
interface IEdit {
drag?: {
......@@ -122,7 +158,7 @@ interface IEdit {
}
type dblClickExpandFn<T> = (treeId: string, treeNode: object) => T;
type dblClickExpandFn<T> = (treeId: string, treeNode: ITreeNode) => T;
interface IView {
addDiyDom?: dblClickExpandFn<void>;
......@@ -150,50 +186,51 @@ interface ISetting {
}
type filterFnType = (node: IJSON) => boolean;
type filterFnType = (node: ITreeNode) => boolean;
interface IzTreeObj {
setting: ISetting;
addNodes: (parentNode: object, index?: number, newNodes?: IJSON[] | IJSON, isSilentBoolean?: boolean) => IJSON[];
addNodes: (parentNode: object, index?: number, newNodes?: ITreeNode[] | ITreeNode, isSilentBoolean?: boolean) => ITreeNode[];
cancelEditName: (newName?: string) => void;
cancelSelectedNode: (treeNode?: object) => void;
cancelSelectedNode: (treeNode?: ITreeNode) => void;
checkAllNodes: (checked: boolean) => void;
checkNode: (treeNode: IJSON, checked?: boolean, checkTypeFlag?: boolean, callbackFlag?: boolean) => void;
copyNode: (targetNode: object, treeNode: IJSON, moveType: string, isSilent: boolean) => IJSON;
checkNode: (treeNode: ITreeNode, checked?: boolean, checkTypeFlag?: boolean, callbackFlag?: boolean) => void;
copyNode: (targetNode: object, treeNode: ITreeNode, moveType: string, isSilent: boolean) => ITreeNode;
destroy: () => void;
editName: (treeNode: IJSON) => void;
editName: (treeNode: ITreeNode) => void;
expandAll: (expandFlag: boolean) => boolean | null;
expandNode: (treeNode: IJSON, expandFlag?: boolean, sonSign?: boolean, focus?: boolean, callbackFlag?: boolean) => boolean | null;
getChangeCheckedNodes: () => IJSON[];
getCheckedNodes: (checked?: boolean) => IJSON[];
expandNode: (treeNode: ITreeNode, expandFlag?: boolean, sonSign?: boolean, focus?: boolean, callbackFlag?: boolean) => boolean | null;
getChangeCheckedNodes: () => ITreeNode[];
getCheckedNodes: (checked?: boolean) => ITreeNode[];
getNodeByParam: (key: string, value: any, parentNode?: object) => object;
getNodeByTId: (tId: string) => object;
getNodeIndex: (treeNode: IJSON) => number;
getNodes: () => IJSON[];
getNodesByFilter: (filter: filterFnType, isSingle?: boolean, parentNode?: IJSON, invokeParam?: any) => object;
getNodeByTId: (tId: string) => ITreeNode;
getNodeIndex: (treeNode: ITreeNode) => number;
getNodes: () => ITreeNode[];
getNodesByFilter: (filter: filterFnType, isSingle?: boolean, parentNode?: ITreeNode, invokeParam?: any) => any;
getNodesByParam: (key: string, value: any, parentNode?: object) => object;
getNodesByParamFuzzy: (key: string, value: string, parentNode?: object) => object;
getSelectedNodes: () => any;
hideNode: (treeNode: IJSON) => void;
hideNodes: (treeNodes: IJSON[]) => void;
moveNode: (targetNode: object, treeNode: IJSON, moveType: string, isSilent?: boolean) => IJSON;
reAsyncChildNodes: (parentNode: IJSON, reloadType: string, isSilent?: boolean, callback?: any) => void;
reAsyncChildNodesPromise: (parentNode: IJSON, reloadType: string, isSilent?: boolean) => any; // ps: return Promise object
getSelectedNodes: (isTure: boolean) => any;
hideNode: (treeNode: ITreeNode) => void;
hideNodes: (treeNodes: ITreeNode[]) => void;
moveNode: (targetNode: object, treeNode: ITreeNode, moveType: string, isSilent?: boolean) => ITreeNode;
reAsyncChildNodes: (parentNode: ITreeNode, reloadType: string, isSilent?: boolean, callback?: any) => void;
reAsyncChildNodesPromise: (parentNode: ITreeNode, reloadType: string, isSilent?: boolean) => any; // ps: return Promise object
refresh: () => void;
removeChildNodes: (parentNode: IJSON) => IJSON[];
removeNode: (treeNode: IJSON, callbackFlag?: boolean) => void;
selectNode: (treeNode: IJSON, addFlag?: boolean, isSilent?: boolean) => void;
setChkDisabled: (treeNode: IJSON, disabled?: boolean, inheritParent?: boolean, inheritChildren?: boolean) => void;
removeChildNodes: (parentNode: ITreeNode) => ITreeNode[];
removeNode: (treeNode: ITreeNode, callbackFlag?: boolean) => void;
selectNode: (treeNode: ITreeNode, addFlag?: boolean, isSilent?: boolean) => void;
setChkDisabled: (treeNode: ITreeNode, disabled?: boolean, inheritParent?: boolean, inheritChildren?: boolean) => void;
setEditable: (editable: boolean) => void;
showNode: (treeNode: IJSON) => void;
showNodes: (treeNodes: IJSON[]) => void;
transformToArray: (treeNodes: IJSON[] | IJSON) => IJSON[];
transformTozTreeNodes: (simpleNodes: IJSON[] | IJSON) => IJSON[];
updateNode: (treeNode: IJSON, checkTypeFlag?: boolean) => void;
showNode: (treeNode: ITreeNode) => void;
showNodes: (treeNodes: ITreeNode[]) => void;
transformToArray: (treeNodes: ITreeNode[] | ITreeNode) => ITreeNode[];
transformTozTreeNodes: (simpleNodes: ITreeNode[] | ITreeNode) => ITreeNode[];
updateNode: (treeNode: ITreeNode, checkTypeFlag?: boolean) => void;
updateNodeIconSkin: (treeNode: ITreeNode) => void;
}
interface IzTree {
init?: (dom: any, setting: ISetting, zNodes: IJSON[] | object) => IzTreeObj;
init?: (dom: any, setting: ISetting, zNodes: ITreeNode[] | object) => IzTreeObj;
getZTreeObj?: (treeId: string) => IzTreeObj;
destroy?: (treeId: string) => void;
_z?: any;
......
js/jquery.ztree.all.js
浏览文件 @ 85a182c0
/*
* JQuery zTree core
* v3.5.42
* v3.5.43
* http://treejs.cn/
*
* Copyright (c) 2010 Hunter.z
......@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php
*
* Date: 2020-01-19
* Date: 2020-04-04
*/
(function ($) {
......@@ -67,6 +67,7 @@
dblClickExpand: true,
expandSpeed: "fast",
fontCss: {},
nodeClasses: {},
nameIsHTML: false,
selectedMulti: true,
showIcon: true,
......@@ -1323,11 +1324,14 @@
var title = data.nodeTitle(setting, node),
url = view.makeNodeUrl(setting, node),
fontcss = view.makeNodeFontCss(setting, node),
nodeClasses = view.makeNodeClasses(setting, node),
fontStyle = [];
for (var f in fontcss) {
fontStyle.push(f, ":", fontcss[f], ";");
}
html.push("<a id='", node.tId, consts.id.A, "' class='", consts.className.LEVEL, node.level, "' treeNode", consts.id.A, " onclick=\"", (node.click || ''),
html.push("<a id='", node.tId, consts.id.A, "' class='", consts.className.LEVEL, node.level,
nodeClasses.add ? ' ' + nodeClasses.add.join(' ') : '',
"' treeNode", consts.id.A, " onclick=\"", (node.click || ''),
"\" ", ((url != null && url.length > 0) ? "href='" + url + "'" : ""), " target='", view.makeNodeTarget(node), "' style='", fontStyle.join(''),
"'");
if (tools.apply(setting.view.showTitle, [setting.treeId, node], setting.view.showTitle) && title) {
......@@ -1339,6 +1343,10 @@
var fontCss = tools.apply(setting.view.fontCss, [setting.treeId, node], setting.view.fontCss);
return (fontCss && ((typeof fontCss) != "function")) ? fontCss : {};
},
makeNodeClasses: function (setting, node) {
var classes = tools.apply(setting.view.nodeClasses, [setting.treeId, node], setting.view.nodeClasses);
return (classes && (typeof classes !== "function")) ? classes : {add:[], remove:[]};
},
makeNodeIcoClass: function (setting, node) {
var icoCss = ["ico"];
if (!node.isAjaxing) {
......@@ -1641,6 +1649,16 @@
aObj.css(fontCss);
}
},
setNodeClasses: function (setting, treeNode) {
var aObj = $$(treeNode, consts.id.A, setting),
classes = view.makeNodeClasses(setting, treeNode);
if ('add' in classes && classes.add.length) {
aObj.addClass(classes.add.join(' '));
}
if ('remove' in classes && classes.remove.length) {
aObj.removeClass(classes.remove.join(' '));
}
},
setNodeLineIcos: function (setting, node) {
if (!node) return;
var switchObj = $$(node, consts.id.SWITCH, setting),
......@@ -1966,6 +1984,7 @@
view.setNodeUrl(setting, node);
view.setNodeLineIcos(setting, node);
view.setNodeFontCss(setting, node);
view.setNodeClasses(setting, node);
}
}
};
......@@ -1987,7 +2006,7 @@
})(jQuery);
/*
* JQuery zTree excheck
* v3.5.42
* v3.5.43
* http://treejs.cn/
*
* Copyright (c) 2010 Hunter.z
......@@ -1995,7 +2014,7 @@
* Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php
*
* Date: 2020-01-19
* Date: 2020-04-04
*/
(function ($) {
......@@ -2639,7 +2658,7 @@
})(jQuery);
/*
* JQuery zTree exedit
* v3.5.42
* v3.5.43
* http://treejs.cn/
*
* Copyright (c) 2010 Hunter.z
......@@ -2647,7 +2666,7 @@
* Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php
*
* Date: 2020-01-19
* Date: 2020-04-04
*/
(function ($) {
......
js/jquery.ztree.all.min.js
浏览文件 @ 85a182c0
此差异已折叠。
js/jquery.ztree.core.js
浏览文件 @ 85a182c0
/*
* JQuery zTree core
* v3.5.42
* v3.5.43
* http://treejs.cn/
*
* Copyright (c) 2010 Hunter.z
......@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php
*
* Date: 2020-01-19
* Date: 2020-04-04
*/
(function ($) {
......@@ -67,6 +67,7 @@
dblClickExpand: true,
expandSpeed: "fast",
fontCss: {},
nodeClasses: {},
nameIsHTML: false,
selectedMulti: true,
showIcon: true,
......@@ -1323,11 +1324,14 @@
var title = data.nodeTitle(setting, node),
url = view.makeNodeUrl(setting, node),
fontcss = view.makeNodeFontCss(setting, node),
nodeClasses = view.makeNodeClasses(setting, node),
fontStyle = [];
for (var f in fontcss) {
fontStyle.push(f, ":", fontcss[f], ";");
}
html.push("<a id='", node.tId, consts.id.A, "' class='", consts.className.LEVEL, node.level, "' treeNode", consts.id.A, " onclick=\"", (node.click || ''),
html.push("<a id='", node.tId, consts.id.A, "' class='", consts.className.LEVEL, node.level,
nodeClasses.add ? ' ' + nodeClasses.add.join(' ') : '',
"' treeNode", consts.id.A, " onclick=\"", (node.click || ''),
"\" ", ((url != null && url.length > 0) ? "href='" + url + "'" : ""), " target='", view.makeNodeTarget(node), "' style='", fontStyle.join(''),
"'");
if (tools.apply(setting.view.showTitle, [setting.treeId, node], setting.view.showTitle) && title) {
......@@ -1339,6 +1343,10 @@
var fontCss = tools.apply(setting.view.fontCss, [setting.treeId, node], setting.view.fontCss);
return (fontCss && ((typeof fontCss) != "function")) ? fontCss : {};
},
makeNodeClasses: function (setting, node) {
var classes = tools.apply(setting.view.nodeClasses, [setting.treeId, node], setting.view.nodeClasses);
return (classes && (typeof classes !== "function")) ? classes : {add:[], remove:[]};
},
makeNodeIcoClass: function (setting, node) {
var icoCss = ["ico"];
if (!node.isAjaxing) {
......@@ -1641,6 +1649,16 @@
aObj.css(fontCss);
}
},
setNodeClasses: function (setting, treeNode) {
var aObj = $$(treeNode, consts.id.A, setting),
classes = view.makeNodeClasses(setting, treeNode);
if ('add' in classes && classes.add.length) {
aObj.addClass(classes.add.join(' '));
}
if ('remove' in classes && classes.remove.length) {
aObj.removeClass(classes.remove.join(' '));
}
},
setNodeLineIcos: function (setting, node) {
if (!node) return;
var switchObj = $$(node, consts.id.SWITCH, setting),
......@@ -1966,6 +1984,7 @@
view.setNodeUrl(setting, node);
view.setNodeLineIcos(setting, node);
view.setNodeFontCss(setting, node);
view.setNodeClasses(setting, node);
}
}
};
......
js/jquery.ztree.core.min.js
浏览文件 @ 85a182c0
此差异已折叠。
js/jquery.ztree.excheck.js
浏览文件 @ 85a182c0
/*
* JQuery zTree excheck
* v3.5.42
* v3.5.43
* http://treejs.cn/
*
* Copyright (c) 2010 Hunter.z
......@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php
*
* Date: 2020-01-19
* Date: 2020-04-04
*/
(function ($) {
......
js/jquery.ztree.exedit.js
浏览文件 @ 85a182c0
/*
* JQuery zTree exedit
* v3.5.42
* v3.5.43
* http://treejs.cn/
*
* Copyright (c) 2010 Hunter.z
......@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php
*
* Date: 2020-01-19
* Date: 2020-04-04
*/
(function ($) {
......
js/jquery.ztree.exhide.js
浏览文件 @ 85a182c0
/*
* JQuery zTree exHideNodes
* v3.5.42
* v3.5.43
* http://treejs.cn/
*
* Copyright (c) 2010 Hunter.z
......@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php
*
* Date: 2020-01-19
* Date: 2020-04-04
*/
(function ($) {
......
log v3.x.txt
浏览文件 @ 85a182c0
......@@ -14,8 +14,14 @@
</font>
*2020.04.04* v3.5.43
* fixed TypeScript type definition Thanks @UtillYou
* Update demo 'super/keyboard_navigation.html' Thanks @bseddon
* Update demo 'core/searchNodes.html' Thanks @bseddon
* add setting.view.nodeClasses Thanks @bseddon
*2020.03.02* v3.5.42
* add demo 'Keyboard Navigation' Thanks @bseddon
* add demo 'super/keyboard_navigation.html' Thanks @bseddon
*2020.01.19* v3.5.42
* merge PullRequest(fixed 'HTMLElement undefined' error) Thanks @ChangJin0520
......
package.json
浏览文件 @ 85a182c0
{
"name": "@ztree/ztree_v3",
"description": "zTree is a multi-functional 'tree plug-ins.' based on jQuery. The main advantages of zTree includes excellent performance, flexible configuration, and the combination of multiple functions.",
"version": "3.5.42",
"version": "3.5.43",
"homepage": "http://www.treejs.cn/v3/main.php",
"author": "zTree (https://github.com/zTree)",
"licenses": [
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或