Skip to content

Commit

Permalink
Core change allows classes to be used like fontCSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@bseddon
bseddon committed Mar 25, 2020
1 parent 9e59d08 commit efdc332
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 7 deletions.
103 changes: 97 additions & 6 deletions demo/en/core/searchNodes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,48 @@
<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 src="https://use.fontawesome.com/952447aaab.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 > a.highlight_alt
{
color: #00A600 !important;
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;
margin-right: 4px;
position: absolute;
background-color: white;
margin-left: -9px;
}
.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"
Expand All @@ -21,7 +58,8 @@
}
},
view: {
fontCss: getFontCss
fontCss: getFontCss,
nodeClasses: getNodeClasses
}
};

Expand Down Expand Up @@ -51,11 +89,17 @@
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")) {
Expand All @@ -75,8 +119,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);
Expand All @@ -97,15 +141,57 @@
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;
Expand All @@ -126,6 +212,9 @@
$("#getNodesByParam").bind("change", clickRadio);
$("#getNodesByParamFuzzy").bind("change", clickRadio);
$("#getNodesByFilter").bind("change", clickRadio);
$("#styleNodesByCSS").bind("change", clickRadio);
$("#styleNodesByClasses").bind("change", clickRadio);
// $(".ztree li > span.button").bind("click", clickButton);
});
//-->
</SCRIPT>
Expand All @@ -152,6 +241,8 @@ <h6>[ File Path: core/searchNodes.html ]</h6>
<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/>
<input type="radio" id="styleNodesByClasses" name="styleType" class="radio" style="margin-left:36px;" /><span>styleNodesByClasses (see source: function filter)</span><br/>
</p>
</li>
</ul>
Expand Down
19 changes: 18 additions & 1 deletion js/jquery.ztree.core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
dblClickExpand: true,
expandSpeed: "fast",
fontCss: {},
nodeClasses: {},
nameIsHTML: false,
selectedMulti: true,
showIcon: true,
Expand Down Expand Up @@ -1323,11 +1324,12 @@
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, ( 'add' in nodeClasses && 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) {
Expand All @@ -1339,6 +1341,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) {
Expand Down Expand Up @@ -1641,6 +1647,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),
Expand Down Expand Up @@ -1966,6 +1982,7 @@
view.setNodeUrl(setting, node);
view.setNodeLineIcos(setting, node);
view.setNodeFontCss(setting, node);
view.setNodeClasses(setting, node);
}
}
};
Expand Down

0 comments on commit efdc332

Please sign in to comment.