You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A Reset Button that clears the cached data and deselects all elements.
Lazy loading for tree nodes.
A restriction that prevents selecting elements if they contain unloaded descendants.
Request
I'm not sure if there are any built-in functions that could accomplish this more efficiently. Any feedback or suggestions for improvement would be appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.1/js.cookie.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.fancytree-all-deps.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/modules/jquery.fancytree.persist.js"></script>
<!-- Initialize the tree when page is loaded -->
<script defer type="text/javascript">
$(document).ready(function() {
var isResetting = false;
$("#tree").fancytree({
extensions: ["edit", "filter", "persist"],
checkbox: true,
selectMode: 3,
source: [
{ id: 9, title: "dir1", lazy: true },
{ id: 11, title: "dir2", lazy: true },
{ id: 12, title: "file1" }
],
lazyLoad: function(event, data) {
var dfd = new $.Deferred();
data.result = dfd.promise();
window.setTimeout(function() {
var lazyData;
var id = data.node.data.id;
if (id === 9) {
lazyData = [
{ id: 101, title: "lazy_file" },
{ id: 102, title: "lazy_dir", lazy: true }
];
} else {
lazyData = [
{ id: 301, title: "default_file" },
{ id: 302, title: "default_dir", lazy: true }
];
}
dfd.resolve(lazyData);
}, 200);
},
persist: {
cookieDelimiter: "~",
cookiePrefix: undefined,
cookie: {
raw: false,
expires: "",
path: "",
domain: "",
secure: false
},
expandLazy: true,
expandOpts: undefined,
overrideSource: true,
store: "auto",
types: "active expanded focus selected"
},
beforeSelect: function(event, data) {
if (isResetting) {
return true;
}
function hasLazyDescendants(node) {
if (node.lazy && !node.isLoaded()) {
return true;
}
var children = node.getChildren();
if (children) {
for (var i = 0; i < children.length; i++) {
if (hasLazyDescendants(children[i])) {
return true;
}
}
}
return false;
}
if (hasLazyDescendants(data.node)) {
alert("You cannot select this node because it contains unloaded child nodes.");
return false;
}
},
init: function(event, data) {
if ($("#resetBtn").length === 0) {
$("<button/>", {
id: "resetBtn",
text: "Reset Cache and selection",
click: function() {
var tree = data.tree;
isResetting = true;
tree.clearPersistData();
tree.selectAll(false);
setTimeout(function() {
isResetting = false;
}, 0);
}
}).appendTo("#resetBtnContainer");
}
}
});
});
</script>
</head>
<body>
<div id="resetBtnContainer"></div>
<div id="tree"></div>
</body>
</html>
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Scope
Here's what I've implemented:
Request
I'm not sure if there are any built-in functions that could accomplish this more efficiently. Any feedback or suggestions for improvement would be appreciated.
Beta Was this translation helpful? Give feedback.
All reactions