Skip to content

Commit efdc332

Browse files
bseddonbseddon
committed
Core change allows classes to be used like fontCSS
1 parent 9e59d08 commit efdc332

File tree

2 files changed

+115
-7
lines changed

2 files changed

+115
-7
lines changed

‎demo/en/core/searchNodes.html‎

Lines changed: 97 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,48 @@
77
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
88
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
99
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
10+
<script src="https://use.fontawesome.com/952447aaab.js"></script>
1011
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
1112
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
13+
<style>
14+
.ztree li > a.highlight_alt
15+
{
16+
color: #00A600 !important;
17+
font-weight: bold;
18+
}
19+
.ztree li > a.highlight span.node_name:before,
20+
.ztree li > a.highlight_hiddennodes span.node_name:before,
21+
.ztree li > a.hiddennodes span.node_name:before
22+
{
23+
font-family: FontAwesome;
24+
color: green;
25+
font-size: 14px;
26+
margin-right: 4px;
27+
position: absolute;
28+
background-color: white;
29+
margin-left: -9px;
30+
}
31+
.ztree li > a.highlight span.node_name:before
32+
{
33+
content: '\f058';
34+
}
35+
.ztree li > a.hiddennodes span.node_name:before
36+
{
37+
content: '\f00e';
38+
}
39+
.ztree li > a.highlight.hiddennodes span.node_name:before
40+
{
41+
content: '\f058\f00e';
42+
}
43+
</style>
1244
<SCRIPT type="text/javascript">
1345
<!--
1446
var setting = {
47+
callback:
48+
{
49+
onCollapse: clickButton,
50+
onExpand: clickButton
51+
},
1552
data: {
1653
key: {
1754
title: "t"
@@ -21,7 +58,8 @@
2158
}
2259
},
2360
view: {
24-
fontCss: getFontCss
61+
fontCss: getFontCss,
62+
nodeClasses: getNodeClasses
2563
}
2664
};
2765

@@ -51,11 +89,17 @@
5189
key.addClass("empty");
5290
}
5391
}
54-
var lastValue = "", nodeList = [], fontCss = {};
92+
var lastValue = "", nodeList = [], fontCss = {}, nodeClasses = [];
5593
function clickRadio(e) {
5694
lastValue = "";
5795
searchNode(e);
5896
}
97+
function clickButton(e, treeId, treeNode)
98+
{
99+
if ( $("#styleNodesByCSS").attr('checked') ) return;
100+
updateNodes(false, treeNode);
101+
updateNodes(true, treeNode)
102+
}
59103
function searchNode(e) {
60104
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
61105
if (!$("#getNodesByFilter").attr("checked")) {
@@ -75,8 +119,8 @@
75119
}
76120
if (lastValue === value) return;
77121
lastValue = value;
78-
if (value === "") return;
79122
updateNodes(false);
123+
if (value === "") return;
80124

81125
if ($("#getNodeByParam").attr("checked")) {
82126
var node = zTree.getNodeByParam(keyType, value);
@@ -97,15 +141,57 @@
97141
updateNodes(true);
98142

99143
}
100-
function updateNodes(highlight) {
144+
function updateNodes(highlight, node = null) {
101145
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
102-
for( var i=0, l=nodeList.length; i<l; i++) {
146+
var applyClasses = $("#styleNodesByClasses").attr('checked');
147+
var expanded = node && node.open;
148+
149+
// If expanding a node then it MUST be a parent
150+
// in which case it cannot be hiding matched nodes
151+
if ( applyClasses && expanded )
152+
{
153+
node.hiddenNodes = false;
154+
zTree.updateNode(node);
155+
}
156+
157+
for( var i=0, l=nodeList.length; i<l; i++ )
158+
{
103159
nodeList[i].highlight = highlight;
160+
nodeList[i].hiddenNodes = false;
161+
if ( applyClasses && highlight )
162+
{
163+
// Make parent nodes of matched nodes show the
164+
// existence of hidden nodes if the parent is closed.
165+
var node = nodeList[i];
166+
while( true )
167+
{
168+
if ( ! node.parentTId ) break;
169+
var parentNode = zTree.getNodeByTId( node.parentTId );
170+
if ( parentNode.isParent && parentNode.open ) break;
171+
parentNode.hiddenNodes = true;
172+
zTree.updateNode( parentNode );
173+
node = parentNode;
174+
}
175+
}
104176
zTree.updateNode(nodeList[i]);
105177
}
106178
}
107179
function getFontCss(treeId, treeNode) {
108-
return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
180+
return $("#styleNodesByCSS").attr('checked')
181+
? ((!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"})
182+
: {color:"#333", "font-weight":"normal"};
183+
}
184+
function getNodeClasses(treeId, treeNode) {
185+
var classes = $("#styleNodesByCSS").attr('checked') || ! ( !!treeNode.highlight || !!treeNode.hiddenNodes )
186+
? {remove: ['highlight','highlight_alt','hiddennodes','highlight_hiddennodes']}
187+
: ( !!treeNode.highlight
188+
? ( (!!treeNode.hiddenNodes)
189+
? {add:['highlight','highlight_alt','hiddennodes']}
190+
: {add:['highlight','highlight_alt']}
191+
)
192+
: {add:['hiddennodes','highlight_alt']}
193+
);
194+
return classes;
109195
}
110196
function filter(node) {
111197
return !node.isParent && node.isFirstNode;
@@ -126,6 +212,9 @@
126212
$("#getNodesByParam").bind("change", clickRadio);
127213
$("#getNodesByParamFuzzy").bind("change", clickRadio);
128214
$("#getNodesByFilter").bind("change", clickRadio);
215+
$("#styleNodesByCSS").bind("change", clickRadio);
216+
$("#styleNodesByClasses").bind("change", clickRadio);
217+
// $(".ztree li > span.button").bind("click", clickButton);
129218
});
130219
//-->
131220
</SCRIPT>
@@ -152,6 +241,8 @@ <h6>[ File Path: core/searchNodes.html ]</h6>
152241
<input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByParam</span><br/>
153242
<input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked /><span>getNodesByParamFuzzy (only string)</span><br/>
154243
<input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByFilter (see source: function filter)</span><br/>
244+
<input type="radio" id="styleNodesByCSS" name="styleType" class="radio" style="margin-left:36px;" checked /><span>styleNodesByCSS (see source: function filter)</span><br/>
245+
<input type="radio" id="styleNodesByClasses" name="styleType" class="radio" style="margin-left:36px;" /><span>styleNodesByClasses (see source: function filter)</span><br/>
155246
</p>
156247
</li>
157248
</ul>

‎js/jquery.ztree.core.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
dblClickExpand: true,
6868
expandSpeed: "fast",
6969
fontCss: {},
70+
nodeClasses: {},
7071
nameIsHTML: false,
7172
selectedMulti: true,
7273
showIcon: true,
@@ -1323,11 +1324,12 @@
13231324
var title = data.nodeTitle(setting, node),
13241325
url = view.makeNodeUrl(setting, node),
13251326
fontcss = view.makeNodeFontCss(setting, node),
1327+
nodeClasses = view.makeNodeClasses(setting, node),
13261328
fontStyle = [];
13271329
for (var f in fontcss) {
13281330
fontStyle.push(f, ":", fontcss[f], ";");
13291331
}
1330-
html.push("<a id='", node.tId, consts.id.A, "' class='", consts.className.LEVEL, node.level, "' treeNode", consts.id.A, " onclick=\"", (node.click || ''),
1332+
html.push("<a id='", node.tId, consts.id.A, "' class='", consts.className.LEVEL, node.level, ( 'add' in nodeClasses && nodeClasses.add ? ' ' + nodeClasses.add.join(' ') : '' ), "' treeNode", consts.id.A, " onclick=\"", (node.click || ''),
13311333
"\" ", ((url != null && url.length > 0) ? "href='" + url + "'" : ""), " target='", view.makeNodeTarget(node), "' style='", fontStyle.join(''),
13321334
"'");
13331335
if (tools.apply(setting.view.showTitle, [setting.treeId, node], setting.view.showTitle) && title) {
@@ -1339,6 +1341,10 @@
13391341
var fontCss = tools.apply(setting.view.fontCss, [setting.treeId, node], setting.view.fontCss);
13401342
return (fontCss && ((typeof fontCss) != "function")) ? fontCss : {};
13411343
},
1344+
makeNodeClasses: function (setting, node) {
1345+
var classes = tools.apply(setting.view.nodeClasses, [setting.treeId, node], setting.view.nodeClasses);
1346+
return (classes && ((typeof classes) != "function")) ? classes : {add:[], remove:[]};
1347+
},
13421348
makeNodeIcoClass: function (setting, node) {
13431349
var icoCss = ["ico"];
13441350
if (!node.isAjaxing) {
@@ -1641,6 +1647,16 @@
16411647
aObj.css(fontCss);
16421648
}
16431649
},
1650+
setNodeClasses: function (setting, treeNode) {
1651+
var aObj = $$(treeNode, consts.id.A, setting),
1652+
classes = view.makeNodeClasses(setting, treeNode);
1653+
if ('add' in classes && classes.add.length) {
1654+
aObj.addClass(classes.add.join(' '));
1655+
}
1656+
if ('remove' in classes && classes.remove.length) {
1657+
aObj.removeClass(classes.remove.join(' '));
1658+
}
1659+
},
16441660
setNodeLineIcos: function (setting, node) {
16451661
if (!node) return;
16461662
var switchObj = $$(node, consts.id.SWITCH, setting),
@@ -1966,6 +1982,7 @@
19661982
view.setNodeUrl(setting, node);
19671983
view.setNodeLineIcos(setting, node);
19681984
view.setNodeFontCss(setting, node);
1985+
view.setNodeClasses(setting, node);
19691986
}
19701987
}
19711988
};

0 commit comments

Comments
 (0)