Skip to content

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

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

通知 180912
Star 1063
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 jQuery Tree Plugin ---- zTree
============ ============
last verson : 3.5.42 last verson : 3.5.43
**Donate to zTree** : http://www.treejs.cn/v3/donate.php **Donate to zTree** : http://www.treejs.cn/v3/donate.php
......
api/API_cn.html
浏览文件 @ 85a182c0
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<div class="ieSuggest">浏览本网站建议您使用 Chrome、FireFox、Opera、IE9 等浏览器（只要不是 IE6 7 8 就行）, 速度会更快，画面会更炫！</div> <div class="ieSuggest">浏览本网站建议您使用 Chrome、FireFox、Opera、IE9 等浏览器（只要不是 IE6 7 8 就行）, 速度会更快，画面会更炫！</div>
<div class="google_plus"><g:plusone></g:plusone></div> <div class="google_plus"><g:plusone></g:plusone></div>
<div class="header-text"> <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> <p>all.js = core + excheck + exedit ( 不包括 exhide ); 发现错误请及时通知，谢谢。</p>
</div> </div>
<ul class="shortcuts language" style="top:0;"> <ul class="shortcuts language" style="top:0;">
......
api/API_en.html
浏览文件 @ 85a182c0
...@@ -34,7 +34,7 @@ ...@@ -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="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="google_plus"><g:plusone></g:plusone></div>
<div class="header-text"> <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> <p>all.js = core + excheck + exedit ( without exhide ); if you found some mistakes please contact me.</p>
</div> </div>
<ul class="shortcuts language" style="top:0;"> <ul class="shortcuts language" style="top:0;">
......
api/apiCss/api.js
浏览文件 @ 85a182c0
...@@ -181,7 +181,8 @@ var apiContent = { ...@@ -181,7 +181,8 @@ var apiContent = {
{id:7004, pId:70, t:"dblClickExpand", name:"dblClickExpand : true,", iconSkin:"core", showAPI:true}, {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: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: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: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: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}, {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 @@ ...@@ -3,15 +3,54 @@
<HEAD> <HEAD>
<TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE> <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <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/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.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-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.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script> <!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>--> <script type="text/javascript" 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"> <SCRIPT type="text/javascript">
<!-- <!--
var setting = { var setting = {
callback:
{
onCollapse: clickButton,
onExpand: clickButton
},
data: { data: {
key: { key: {
title: "t" title: "t"
...@@ -21,7 +60,8 @@ ...@@ -21,7 +60,8 @@
} }
}, },
view: { view: {
fontCss: getFontCss fontCss: getFontCss,
// nodeClasses: getNodeClasses
} }
}; };
...@@ -51,11 +91,16 @@ ...@@ -51,11 +91,16 @@
key.addClass("empty"); key.addClass("empty");
} }
} }
var lastValue = "", nodeList = [], fontCss = {}; var lastValue = "", nodeList = [], fontCss = {}, nodeClasses = [];
function clickRadio(e) { function clickRadio(e) {
lastValue = ""; lastValue = "";
searchNode(e); searchNode(e);
} }
function clickButton(e, treeId, treeNode) {
if ( $("#styleNodesByCSS").attr('checked') ) return;
updateNodes(false, treeNode);
updateNodes(true, treeNode)
}
function searchNode(e) { function searchNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (!$("#getNodesByFilter").attr("checked")) { if (!$("#getNodesByFilter").attr("checked")) {
...@@ -75,8 +120,8 @@ ...@@ -75,8 +120,8 @@
} }
if (lastValue === value) return; if (lastValue === value) return;
lastValue = value; lastValue = value;
if (value === "") return;
updateNodes(false); updateNodes(false);
if (value === "") return;
if ($("#getNodeByParam").attr("checked")) { if ($("#getNodeByParam").attr("checked")) {
var node = zTree.getNodeByParam(keyType, value); var node = zTree.getNodeByParam(keyType, value);
...@@ -97,23 +142,81 @@ ...@@ -97,23 +142,81 @@
updateNodes(true); updateNodes(true);
} }
function updateNodes(highlight) { function updateNodes(highlight, node = null) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 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].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]); zTree.updateNode(nodeList[i]);
} }
} }
function getFontCss(treeId, treeNode) { 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) { function filter(node) {
return !node.isParent && node.isFirstNode; 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; var key;
$(document).ready(function(){ $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes); initTree();
key = $("#key"); key = $("#key");
key.bind("focus", focusKey) key.bind("focus", focusKey)
.bind("blur", blurKey) .bind("blur", blurKey)
...@@ -126,6 +229,9 @@ ...@@ -126,6 +229,9 @@
$("#getNodesByParam").bind("change", clickRadio); $("#getNodesByParam").bind("change", clickRadio);
$("#getNodesByParamFuzzy").bind("change", clickRadio); $("#getNodesByParamFuzzy").bind("change", clickRadio);
$("#getNodesByFilter").bind("change", clickRadio); $("#getNodesByFilter").bind("change", clickRadio);
$("#styleNodesByCSS").bind("change", resetTree);
$("#styleNodesByClasses").bind("change", resetTree);
// $(".ztree li > span.button").bind("click", clickButton);
}); });
//--> //-->
</SCRIPT> </SCRIPT>
...@@ -152,6 +258,8 @@ ...@@ -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="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="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="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> </p>
</li> </li>
</ul> </ul>
......
demo/en/core/searchNodes.html
浏览文件 @ 85a182c0
...@@ -3,42 +3,82 @@ ...@@ -3,42 +3,82 @@
<HEAD> <HEAD>
<TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE> <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <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/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.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-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.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script> <!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>--> <script type="text/javascript" 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"> <SCRIPT type="text/javascript">
<!-- <!--
var setting = { var setting = {
callback:
{
onCollapse: clickButton,
onExpand: clickButton
},
data: { data: {
key: { key: {
title: "t" title: "t"
}, },
simpleData: { simpleData: {
enable: true enable: true
} }
}, },
view: { view: {
fontCss: getFontCss fontCss: getFontCss,
// nodeClasses: getNodeClasses
} }
}; };
var zNodes =[ var zNodes =[
{ id:1, pId:0, name:"search node demo 1", t:"id=1", open:true}, { id:1, pId:0, name:"节点搜索演示 1", t:"id=1", open:true},
{ id:11, pId:1, name:"can search 'name'", t:"id=11"}, { id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
{ id:12, pId:1, name:"can search 'level'", t:"id=12"}, { id:12, pId:1, name:"关键字可以是level", t:"id=12"},
{ id:13, pId:1, name:"can search 'id'", t:"id=13"}, { id:13, pId:1, name:"关键字可以是id", t:"id=13"},
{ id:14, pId:1, name:"can search other attr", t:"id=14"}, { id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
{ id:2, pId:0, name:"search node demo 2", t:"id=2", open:true}, { id:2, pId:0, name:"节点搜索演示 2", t:"id=2", open:true},
{ id:21, pId:2, name:"can search single node", t:"id=21"}, { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
{ id:22, pId:2, name:"can search nodes array", t:"id=22"}, { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
{ id:23, pId:2, name:"search me", t:"id=23"}, { id:23, pId:2, name:"搜我吧", t:"id=23"},
{ id:3, pId:0, name:"search node demo 3", t:"id=3", open:true }, { id:3, pId:0, name:"节点搜索演示 3", t:"id=3", open:true },
{ id:31, pId:3, name:"My id is : 31", t:"id=31"}, { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
{ id:32, pId:31, name:"My id is : 32", t:"id=32"}, { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
{ id:33, pId:32, name:"My id is : 33", t:"id=33"} { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
]; ];
function focusKey(e) { function focusKey(e) {
...@@ -51,11 +91,16 @@ ...@@ -51,11 +91,16 @@
key.addClass("empty"); key.addClass("empty");
} }
} }
var lastValue = "", nodeList = [], fontCss = {}; var lastValue = "", nodeList = [], fontCss = {}, nodeClasses = [];
function clickRadio(e) { function clickRadio(e) {
lastValue = ""; lastValue = "";
searchNode(e); searchNode(e);
} }
function clickButton(e, treeId, treeNode) {
if ( $("#styleNodesByCSS").attr('checked') ) return;
updateNodes(false, treeNode);
updateNodes(true, treeNode)
}
function searchNode(e) { function searchNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (!$("#getNodesByFilter").attr("checked")) { if (!$("#getNodesByFilter").attr("checked")) {
...@@ -75,8 +120,8 @@ ...@@ -75,8 +120,8 @@
} }
if (lastValue === value) return; if (lastValue === value) return;
lastValue = value; lastValue = value;
if (value === "") return;
updateNodes(false); updateNodes(false);
if (value === "") return;
if ($("#getNodeByParam").attr("checked")) { if ($("#getNodeByParam").attr("checked")) {
var node = zTree.getNodeByParam(keyType, value); var node = zTree.getNodeByParam(keyType, value);
...@@ -97,23 +142,81 @@ ...@@ -97,23 +142,81 @@
updateNodes(true); updateNodes(true);
} }
function updateNodes(highlight) { function updateNodes(highlight, node = null) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 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].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]); zTree.updateNode(nodeList[i]);
} }
} }
function getFontCss(treeId, treeNode) { 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) { function filter(node) {
return !node.isParent && node.isFirstNode; 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; var key;
$(document).ready(function(){ $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes); initTree();
key = $("#key"); key = $("#key");
key.bind("focus", focusKey) key.bind("focus", focusKey)
.bind("blur", blurKey) .bind("blur", blurKey)
...@@ -126,6 +229,9 @@ ...@@ -126,6 +229,9 @@
$("#getNodesByParam").bind("change", clickRadio); $("#getNodesByParam").bind("change", clickRadio);
$("#getNodesByParamFuzzy").bind("change", clickRadio); $("#getNodesByParamFuzzy").bind("change", clickRadio);
$("#getNodesByFilter").bind("change", clickRadio); $("#getNodesByFilter").bind("change", clickRadio);
$("#styleNodesByCSS").bind("change", resetTree);
$("#styleNodesByClasses").bind("change", resetTree);
// $(".ztree li > span.button").bind("click", clickButton);
}); });
//--> //-->
</SCRIPT> </SCRIPT>
...@@ -152,6 +258,9 @@ ...@@ -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="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="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="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> </p>
</li> </li>
</ul> </ul>
......
demo/js/keyboard_navigation.js
浏览文件 @ 85a182c0
...@@ -13,6 +13,13 @@ ...@@ -13,6 +13,13 @@
( function ($) ( function ($)
{ {
/**
* Dummy function to provide a placeholder for the destroy function
*/
$.fn.zTreeKeyboardNavigationDestroy = function()
{
}
/** /**
* Creates a function that adds keyboard navigation: * Creates a function that adds keyboard navigation:
* Home: home key (keycode 36) Goes to the first root element is visible * Home: home key (keycode 36) Goes to the first root element is visible
...@@ -22,8 +29,11 @@ ...@@ -22,8 +29,11 @@
* Up: up cursor key (keycode 37) Goes to the prior visible node at the same level * 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 * 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 * 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) if (typeof element === 'string' || element instanceof String)
{ {
...@@ -41,7 +51,18 @@ ...@@ -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 selectedNodes = zTree.getSelectedNodes();
var selectedNode = selectedNodes.length ? selectedNodes[0] : null; var selectedNode = selectedNodes.length ? selectedNodes[0] : null;
...@@ -248,8 +269,16 @@ ...@@ -248,8 +269,16 @@
focusSelectedNode(); focusSelectedNode();
} ); } );
if ( selectedNodes && selectedNodes.length )
{
zTree.selectNode( selectedNodes[0] );
focusSelectedNode();
}
else
{
$(element).trigger({ type : 'keydown', which : 36, keyCode: 36 }); $(element).trigger({ type : 'keydown', which : 36, keyCode: 36 });
focusSelectedNode(); }
} }
} )(jQuery); } )(jQuery);
\ No newline at end of file
index.d.ts
浏览文件 @ 85a182c0
interface JQuery { interface JQuery {
zTree: IzTree; zTree: IzTree;
} }
interface IJSON { interface IJSON {
[key: string]: any [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 ApplicationType = 'application/x-www-form-urlencoded' | 'application/json';
type AjaxType = 'get' | 'post'; type AjaxType = 'get' | 'post';
type dataType = 'text' | 'json' | 'jsonp' | 'html' | 'xml' | 'script'; type DataType = 'text' | 'json' | 'jsonp' | 'html' | 'xml' | 'script';
interface IAsync { interface IAsync {
autoParam?: string[]; autoParam?: string[];
contentType?: ApplicationType; contentType?: ApplicationType;
dataFilter?: (treeId: string, parentNode: object, responseData: IJSON[] | IJSON | string) => IJSON[] | IJSON; dataFilter?: (treeId: string, parentNode: ITreeNode, responseData: IJSON[] | IJSON | string) => IJSON[] | IJSON;
dataType?: dataType; dataType?: DataType;
enable?: boolean; enable?: boolean;
otherParam?: string[] | IJSON; otherParam?: string[] | IJSON;
type?: AjaxType; type?: AjaxType;
headers?: object; headers?: object;
xhrFields?: object; xhrFields?: object;
url: string; url: ((treeId: string, treeNode: ITreeNode) => string) | string;
} }
type CallBackBeforeFn = (treeId: string, treeNode: object) => boolean; type CallBackBeforeFn = (treeId: string, treeNode: ITreeNode) => boolean | Promise<boolean>;
type CallBackOnFn = (event: Event, treeId: string, treeNode: IJSON) => void; type CallBackOnFn = (event: Event, treeId: string, treeNode: ITreeNode) => void | Promise<void>;
interface ICallback { interface ICallback {
beforeAsync?: CallBackBeforeFn; beforeAsync?: CallBackBeforeFn;
beforeCheck?: CallBackBeforeFn; beforeCheck?: CallBackBeforeFn;
beforeClick?: (treeId: string, treeNode: object, clickFlag: number) => boolean; beforeClick?: (treeId: string, treeNode: ITreeNode, clickFlag: number) => boolean | Promise<boolean>;
beforeCollapse?: CallBackBeforeFn; beforeCollapse?: CallBackBeforeFn;
beforeDblClick?: CallBackBeforeFn; beforeDblClick?: CallBackBeforeFn;
beforeDrag?: (treeId: string, treeNode: IJSON[]) => boolean; beforeDrag?: (treeId: string, treeNode: ITreeNode[]) => boolean | Promise<boolean>;
beforeDragOpen?: CallBackBeforeFn; 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; beforeEditName?: CallBackBeforeFn;
beforeExpand?: CallBackBeforeFn; beforeExpand?: CallBackBeforeFn;
beforeMouseDown?: CallBackBeforeFn; beforeMouseDown?: CallBackBeforeFn;
beforeMouseUp?: CallBackBeforeFn; beforeMouseUp?: CallBackBeforeFn;
beforeRemove?: 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; beforeRightClick?: CallBackBeforeFn;
onAsyncError?: (event: Event, treeId: string, treeNode: object, XMLHttpRequest: any, textStatus: string, errorThrown: string) => void; onAsyncError?: (event: Event, treeId: string, treeNode: ITreeNode, XMLHttpRequest: any, textStatus: string, errorThrown: string) => void | Promise<void>;
onAsyncSuccess?: (event: Event, treeId: string, treeNode: object, msg: string | object) => void; onAsyncSuccess?: (event: Event, treeId: string, treeNode: ITreeNode, msg: string | object) => void | Promise<void>;
onCheck?: (event: Event, treeId: string, treeNode: object) => void; onCheck?: (event: Event, treeId: string, treeNode: ITreeNode) => void | Promise<void>;
onClick?: (event: Event, treeId: string, treeNode: object, clickFlag: number) => void; onClick?: (event: Event, treeId: string, treeNode: ITreeNode, clickFlag: number) => void | Promise<void>;
onCollapse?: (event: Event, treeId: string, treeNode: object) => void; onCollapse?: (event: Event, treeId: string, treeNode: ITreeNode) => void | Promise<void>;
onDblClick?: (event: Event, treeId: string, treeNode: object) => void; onDblClick?: (event: Event, treeId: string, treeNode: ITreeNode) => void | Promise<void>;
onDrag?: (event: Event, treeId: string, treeNodes: IJSON[]) => void; onDrag?: (event: Event, treeId: string, treeNodes: ITreeNode[]) => void | Promise<void>;
onDragMove?: (event: Event, treeId: string, treeNodes: IJSON[]) => void; onDragMove?: (event: Event, treeId: string, treeNodes: ITreeNode[]) => void | Promise<void>;
onDrop?: (event: Event, treeId: string, treeNodes: IJSON[], targetNode: object, moveType: string, isCopy: boolean) => void; onDrop?: (event: Event, treeId: string, treeNodes: ITreeNode[], targetNode: object, moveType: string, isCopy: boolean) => void | Promise<void>;
onExpand?: CallBackOnFn; onExpand?: CallBackOnFn;
onMouseDown?: CallBackOnFn; onMouseDown?: CallBackOnFn;
onMouseUp?: CallBackOnFn; onMouseUp?: CallBackOnFn;
onNodeCreated?: CallBackOnFn; onNodeCreated?: CallBackOnFn;
onRemove?: 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; onRightClick?: CallBackOnFn;
} }
...@@ -97,7 +133,7 @@ interface IData { ...@@ -97,7 +133,7 @@ interface IData {
} }
type removeFnType<T> = (treeId: string, treeNode: object) => T; type removeFnType<T> = (treeId: string, treeNode: ITreeNode) => T;
interface IEdit { interface IEdit {
drag?: { drag?: {
...@@ -122,7 +158,7 @@ interface IEdit { ...@@ -122,7 +158,7 @@ interface IEdit {
} }
type dblClickExpandFn<T> = (treeId: string, treeNode: object) => T; type dblClickExpandFn<T> = (treeId: string, treeNode: ITreeNode) => T;
interface IView { interface IView {
addDiyDom?: dblClickExpandFn<void>; addDiyDom?: dblClickExpandFn<void>;
...@@ -150,51 +186,52 @@ interface ISetting { ...@@ -150,51 +186,52 @@ interface ISetting {
} }
type filterFnType = (node: IJSON) => boolean; type filterFnType = (node: ITreeNode) => boolean;
interface IzTreeObj { interface IzTreeObj {
setting: ISetting; 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; cancelEditName: (newName?: string) => void;
cancelSelectedNode: (treeNode?: object) => void; cancelSelectedNode: (treeNode?: ITreeNode) => void;
checkAllNodes: (checked: boolean) => void; checkAllNodes: (checked: boolean) => void;
checkNode: (treeNode: IJSON, checked?: boolean, checkTypeFlag?: boolean, callbackFlag?: boolean) => void; checkNode: (treeNode: ITreeNode, checked?: boolean, checkTypeFlag?: boolean, callbackFlag?: boolean) => void;
copyNode: (targetNode: object, treeNode: IJSON, moveType: string, isSilent: boolean) => IJSON; copyNode: (targetNode: object, treeNode: ITreeNode, moveType: string, isSilent: boolean) => ITreeNode;
destroy: () => void; destroy: () => void;
editName: (treeNode: IJSON) => void; editName: (treeNode: ITreeNode) => void;
expandAll: (expandFlag: boolean) => boolean | null; expandAll: (expandFlag: boolean) => boolean | null;
expandNode: (treeNode: IJSON, expandFlag?: boolean, sonSign?: boolean, focus?: boolean, callbackFlag?: boolean) => boolean | null; expandNode: (treeNode: ITreeNode, expandFlag?: boolean, sonSign?: boolean, focus?: boolean, callbackFlag?: boolean) => boolean | null;
getChangeCheckedNodes: () => IJSON[]; getChangeCheckedNodes: () => ITreeNode[];
getCheckedNodes: (checked?: boolean) => IJSON[]; getCheckedNodes: (checked?: boolean) => ITreeNode[];
getNodeByParam: (key: string, value: any, parentNode?: object) => object; getNodeByParam: (key: string, value: any, parentNode?: object) => object;
getNodeByTId: (tId: string) => object; getNodeByTId: (tId: string) => ITreeNode;
getNodeIndex: (treeNode: IJSON) => number; getNodeIndex: (treeNode: ITreeNode) => number;
getNodes: () => IJSON[]; getNodes: () => ITreeNode[];
getNodesByFilter: (filter: filterFnType, isSingle?: boolean, parentNode?: IJSON, invokeParam?: any) => object; getNodesByFilter: (filter: filterFnType, isSingle?: boolean, parentNode?: ITreeNode, invokeParam?: any) => any;
getNodesByParam: (key: string, value: any, parentNode?: object) => object; getNodesByParam: (key: string, value: any, parentNode?: object) => object;
getNodesByParamFuzzy: (key: string, value: string, parentNode?: object) => object; getNodesByParamFuzzy: (key: string, value: string, parentNode?: object) => object;
getSelectedNodes: () => any; getSelectedNodes: (isTure: boolean) => any;
hideNode: (treeNode: IJSON) => void; hideNode: (treeNode: ITreeNode) => void;
hideNodes: (treeNodes: IJSON[]) => void; hideNodes: (treeNodes: ITreeNode[]) => void;
moveNode: (targetNode: object, treeNode: IJSON, moveType: string, isSilent?: boolean) => IJSON; moveNode: (targetNode: object, treeNode: ITreeNode, moveType: string, isSilent?: boolean) => ITreeNode;
reAsyncChildNodes: (parentNode: IJSON, reloadType: string, isSilent?: boolean, callback?: any) => void; reAsyncChildNodes: (parentNode: ITreeNode, reloadType: string, isSilent?: boolean, callback?: any) => void;
reAsyncChildNodesPromise: (parentNode: IJSON, reloadType: string, isSilent?: boolean) => any; // ps: return Promise object reAsyncChildNodesPromise: (parentNode: ITreeNode, reloadType: string, isSilent?: boolean) => any; // ps: return Promise object
refresh: () => void; refresh: () => void;
removeChildNodes: (parentNode: IJSON) => IJSON[]; removeChildNodes: (parentNode: ITreeNode) => ITreeNode[];
removeNode: (treeNode: IJSON, callbackFlag?: boolean) => void; removeNode: (treeNode: ITreeNode, callbackFlag?: boolean) => void;
selectNode: (treeNode: IJSON, addFlag?: boolean, isSilent?: boolean) => void; selectNode: (treeNode: ITreeNode, addFlag?: boolean, isSilent?: boolean) => void;
setChkDisabled: (treeNode: IJSON, disabled?: boolean, inheritParent?: boolean, inheritChildren?: boolean) => void; setChkDisabled: (treeNode: ITreeNode, disabled?: boolean, inheritParent?: boolean, inheritChildren?: boolean) => void;
setEditable: (editable: boolean) => void; setEditable: (editable: boolean) => void;
showNode: (treeNode: IJSON) => void; showNode: (treeNode: ITreeNode) => void;
showNodes: (treeNodes: IJSON[]) => void; showNodes: (treeNodes: ITreeNode[]) => void;
transformToArray: (treeNodes: IJSON[] | IJSON) => IJSON[]; transformToArray: (treeNodes: ITreeNode[] | ITreeNode) => ITreeNode[];
transformTozTreeNodes: (simpleNodes: IJSON[] | IJSON) => IJSON[]; transformTozTreeNodes: (simpleNodes: ITreeNode[] | ITreeNode) => ITreeNode[];
updateNode: (treeNode: IJSON, checkTypeFlag?: boolean) => void; updateNode: (treeNode: ITreeNode, checkTypeFlag?: boolean) => void;
updateNodeIconSkin: (treeNode: ITreeNode) => void;
} }
interface IzTree { interface IzTree {
init?: (dom: any, setting: ISetting, zNodes: IJSON[] | object) => IzTreeObj; init?: (dom: any, setting: ISetting, zNodes: ITreeNode[] | object) => IzTreeObj;
getZTreeObj?: (treeId: string) => IzTreeObj; getZTreeObj?: (treeId: string) => IzTreeObj;
destroy?: (treeId: string) => void; destroy?: (treeId: string) => void;
_z?: any; _z?: any;
} }
\ No newline at end of file
js/jquery.ztree.all.js
浏览文件 @ 85a182c0
/* /*
* JQuery zTree core * JQuery zTree core
* v3.5.42 * v3.5.43
* http://treejs.cn/ * http://treejs.cn/
* *
* Copyright (c) 2010 Hunter.z * Copyright (c) 2010 Hunter.z
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License * Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* *
* Date: 2020-01-19 * Date: 2020-04-04
*/ */
(function ($) { (function ($) {
...@@ -67,6 +67,7 @@ ...@@ -67,6 +67,7 @@
dblClickExpand: true, dblClickExpand: true,
expandSpeed: "fast", expandSpeed: "fast",
fontCss: {}, fontCss: {},
nodeClasses: {},
nameIsHTML: false, nameIsHTML: false,
selectedMulti: true, selectedMulti: true,
showIcon: true, showIcon: true,
...@@ -1323,11 +1324,14 @@ ...@@ -1323,11 +1324,14 @@
var title = data.nodeTitle(setting, node), var title = data.nodeTitle(setting, node),
url = view.makeNodeUrl(setting, node), url = view.makeNodeUrl(setting, node),
fontcss = view.makeNodeFontCss(setting, node), fontcss = view.makeNodeFontCss(setting, node),
nodeClasses = view.makeNodeClasses(setting, node),
fontStyle = []; fontStyle = [];
for (var f in fontcss) { for (var f in fontcss) {
fontStyle.push(f, ":", fontcss[f], ";"); 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(''), "\" ", ((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) { if (tools.apply(setting.view.showTitle, [setting.treeId, node], setting.view.showTitle) && title) {
...@@ -1339,6 +1343,10 @@ ...@@ -1339,6 +1343,10 @@
var fontCss = tools.apply(setting.view.fontCss, [setting.treeId, node], setting.view.fontCss); var fontCss = tools.apply(setting.view.fontCss, [setting.treeId, node], setting.view.fontCss);
return (fontCss && ((typeof fontCss) != "function")) ? 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) { makeNodeIcoClass: function (setting, node) {
var icoCss = ["ico"]; var icoCss = ["ico"];
if (!node.isAjaxing) { if (!node.isAjaxing) {
...@@ -1641,6 +1649,16 @@ ...@@ -1641,6 +1649,16 @@
aObj.css(fontCss); 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) { setNodeLineIcos: function (setting, node) {
if (!node) return; if (!node) return;
var switchObj = $$(node, consts.id.SWITCH, setting), var switchObj = $$(node, consts.id.SWITCH, setting),
...@@ -1966,6 +1984,7 @@ ...@@ -1966,6 +1984,7 @@
view.setNodeUrl(setting, node); view.setNodeUrl(setting, node);
view.setNodeLineIcos(setting, node); view.setNodeLineIcos(setting, node);
view.setNodeFontCss(setting, node); view.setNodeFontCss(setting, node);
view.setNodeClasses(setting, node);
} }
} }
}; };
...@@ -1987,7 +2006,7 @@ ...@@ -1987,7 +2006,7 @@
})(jQuery); })(jQuery);
/* /*
* JQuery zTree excheck * JQuery zTree excheck
* v3.5.42 * v3.5.43
* http://treejs.cn/ * http://treejs.cn/
* *
* Copyright (c) 2010 Hunter.z * Copyright (c) 2010 Hunter.z
...@@ -1995,7 +2014,7 @@ ...@@ -1995,7 +2014,7 @@
* Licensed same as jquery - MIT License * Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* *
* Date: 2020-01-19 * Date: 2020-04-04
*/ */
(function ($) { (function ($) {
...@@ -2639,7 +2658,7 @@ ...@@ -2639,7 +2658,7 @@
})(jQuery); })(jQuery);
/* /*
* JQuery zTree exedit * JQuery zTree exedit
* v3.5.42 * v3.5.43
* http://treejs.cn/ * http://treejs.cn/
* *
* Copyright (c) 2010 Hunter.z * Copyright (c) 2010 Hunter.z
...@@ -2647,7 +2666,7 @@ ...@@ -2647,7 +2666,7 @@
* Licensed same as jquery - MIT License * Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* *
* Date: 2020-01-19 * Date: 2020-04-04
*/ */
(function ($) { (function ($) {
......
js/jquery.ztree.all.min.js
浏览文件 @ 85a182c0
此差异已折叠。
js/jquery.ztree.core.js
浏览文件 @ 85a182c0
/* /*
* JQuery zTree core * JQuery zTree core
* v3.5.42 * v3.5.43
* http://treejs.cn/ * http://treejs.cn/
* *
* Copyright (c) 2010 Hunter.z * Copyright (c) 2010 Hunter.z
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License * Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* *
* Date: 2020-01-19 * Date: 2020-04-04
*/ */
(function ($) { (function ($) {
...@@ -67,6 +67,7 @@ ...@@ -67,6 +67,7 @@
dblClickExpand: true, dblClickExpand: true,
expandSpeed: "fast", expandSpeed: "fast",
fontCss: {}, fontCss: {},
nodeClasses: {},
nameIsHTML: false, nameIsHTML: false,
selectedMulti: true, selectedMulti: true,
showIcon: true, showIcon: true,
...@@ -1323,11 +1324,14 @@ ...@@ -1323,11 +1324,14 @@
var title = data.nodeTitle(setting, node), var title = data.nodeTitle(setting, node),
url = view.makeNodeUrl(setting, node), url = view.makeNodeUrl(setting, node),
fontcss = view.makeNodeFontCss(setting, node), fontcss = view.makeNodeFontCss(setting, node),
nodeClasses = view.makeNodeClasses(setting, node),
fontStyle = []; fontStyle = [];
for (var f in fontcss) { for (var f in fontcss) {
fontStyle.push(f, ":", fontcss[f], ";"); 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(''), "\" ", ((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) { if (tools.apply(setting.view.showTitle, [setting.treeId, node], setting.view.showTitle) && title) {
...@@ -1339,6 +1343,10 @@ ...@@ -1339,6 +1343,10 @@
var fontCss = tools.apply(setting.view.fontCss, [setting.treeId, node], setting.view.fontCss); var fontCss = tools.apply(setting.view.fontCss, [setting.treeId, node], setting.view.fontCss);
return (fontCss && ((typeof fontCss) != "function")) ? 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) { makeNodeIcoClass: function (setting, node) {
var icoCss = ["ico"]; var icoCss = ["ico"];
if (!node.isAjaxing) { if (!node.isAjaxing) {
...@@ -1641,6 +1649,16 @@ ...@@ -1641,6 +1649,16 @@
aObj.css(fontCss); 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) { setNodeLineIcos: function (setting, node) {
if (!node) return; if (!node) return;
var switchObj = $$(node, consts.id.SWITCH, setting), var switchObj = $$(node, consts.id.SWITCH, setting),
...@@ -1966,6 +1984,7 @@ ...@@ -1966,6 +1984,7 @@
view.setNodeUrl(setting, node); view.setNodeUrl(setting, node);
view.setNodeLineIcos(setting, node); view.setNodeLineIcos(setting, node);
view.setNodeFontCss(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 * JQuery zTree excheck
* v3.5.42 * v3.5.43
* http://treejs.cn/ * http://treejs.cn/
* *
* Copyright (c) 2010 Hunter.z * Copyright (c) 2010 Hunter.z
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License * Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* *
* Date: 2020-01-19 * Date: 2020-04-04
*/ */
(function ($) { (function ($) {
......
js/jquery.ztree.exedit.js
浏览文件 @ 85a182c0
/* /*
* JQuery zTree exedit * JQuery zTree exedit
* v3.5.42 * v3.5.43
* http://treejs.cn/ * http://treejs.cn/
* *
* Copyright (c) 2010 Hunter.z * Copyright (c) 2010 Hunter.z
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License * Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* *
* Date: 2020-01-19 * Date: 2020-04-04
*/ */
(function ($) { (function ($) {
......
js/jquery.ztree.exhide.js
浏览文件 @ 85a182c0
/* /*
* JQuery zTree exHideNodes * JQuery zTree exHideNodes
* v3.5.42 * v3.5.43
* http://treejs.cn/ * http://treejs.cn/
* *
* Copyright (c) 2010 Hunter.z * Copyright (c) 2010 Hunter.z
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
* Licensed same as jquery - MIT License * Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* *
* Date: 2020-01-19 * Date: 2020-04-04
*/ */
(function ($) { (function ($) {
......
log v3.x.txt
浏览文件 @ 85a182c0
...@@ -14,8 +14,14 @@ ...@@ -14,8 +14,14 @@
</font> </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 *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 *2020.01.19* v3.5.42
* merge PullRequest(fixed 'HTMLElement undefined' error) Thanks @ChangJin0520 * merge PullRequest(fixed 'HTMLElement undefined' error) Thanks @ChangJin0520
......
package.json
浏览文件 @ 85a182c0
{ {
"name": "@ztree/ztree_v3", "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.", "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", "homepage": "http://www.treejs.cn/v3/main.php",
"author": "zTree (https://github.com/zTree)", "author": "zTree (https://github.com/zTree)",
"licenses": [ "licenses": [
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或