jstree - 阻止单个扩展节点折叠
jstree - stop single expanded node from collapsing
使用jstree是否可以阻止单个特定节点的崩溃?
我有一个树结构,可以 expanded/collapsed 随意......但我有一些节点应该始终打开并且不允许用户折叠它们。
有没有办法阻止折叠(也许通过 <li>
上的 data-jstree
属性)...如果可能的话,有办法同时删除项目上的三角形吗?
我已经尝试连接到 close_node.jstree
事件,但使用 return false
或 e.preventDefault()
都无法阻止它发生。
在下面的示例中,我希望 "Item 2 - Must Keep Open" 始终打开,并且不允许用户隐藏 "Always Visible" 项目...
$(function() {
$("#treeRoot").jstree({
core: {
themes: {
variant: "small"
}
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
<ul>
<li data-jstree='{"opened":true}'>Root
<ul>
<li>Item 1</li>
<li data-jstree='{"opened":true}'>Item 2 - Must keep open
<ul>
<li>Always Visible</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</div>
除了覆盖 jstree 代码的 close_node
函数的选项外,我找不到任何防止节点关闭的选项。
这是一个例子:
$(function() {
$.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
$.jstree.core.prototype.close_node = function(obj, animation) {
node_obj = this.get_node(obj);
// in case the flag exists - don't continue to with the original function.
if (node_obj.state.prevent_close) {
return;
}
this.old_close_node(obj, animation);
}
$("#treeRoot").on('loaded.jstree', function() {
$('#treeRoot li').each((index, el) => {
if ($(el).data('jstree') && $(el).data('jstree').prevent_close) {
$(el).addClass('prevent-close');
}
})
}).jstree({
core: {
themes: {
variant: "small"
}
}
})
});
.jstree-default-small .jstree-open.prevent-close>.jstree-ocl {
background-position: -71px -7px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
<ul>
<li data-jstree='{"opened":true}'>Root
<ul>
<li>Item 1</li>
<!-- v-- this is the flag to prevent the close -->
<li data-jstree='{"opened":true, "prevent_close": true}'>Item 2 - Must keep open
<ul>
<li>Always Visible</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</div>
我没有时间处理三角形,如果您在这方面有问题,请告诉我,我也会尝试找到解决这个问题的方法。
使用jstree是否可以阻止单个特定节点的崩溃?
我有一个树结构,可以 expanded/collapsed 随意......但我有一些节点应该始终打开并且不允许用户折叠它们。
有没有办法阻止折叠(也许通过 <li>
上的 data-jstree
属性)...如果可能的话,有办法同时删除项目上的三角形吗?
我已经尝试连接到 close_node.jstree
事件,但使用 return false
或 e.preventDefault()
都无法阻止它发生。
在下面的示例中,我希望 "Item 2 - Must Keep Open" 始终打开,并且不允许用户隐藏 "Always Visible" 项目...
$(function() {
$("#treeRoot").jstree({
core: {
themes: {
variant: "small"
}
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
<ul>
<li data-jstree='{"opened":true}'>Root
<ul>
<li>Item 1</li>
<li data-jstree='{"opened":true}'>Item 2 - Must keep open
<ul>
<li>Always Visible</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</div>
除了覆盖 jstree 代码的 close_node
函数的选项外,我找不到任何防止节点关闭的选项。
这是一个例子:
$(function() {
$.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
$.jstree.core.prototype.close_node = function(obj, animation) {
node_obj = this.get_node(obj);
// in case the flag exists - don't continue to with the original function.
if (node_obj.state.prevent_close) {
return;
}
this.old_close_node(obj, animation);
}
$("#treeRoot").on('loaded.jstree', function() {
$('#treeRoot li').each((index, el) => {
if ($(el).data('jstree') && $(el).data('jstree').prevent_close) {
$(el).addClass('prevent-close');
}
})
}).jstree({
core: {
themes: {
variant: "small"
}
}
})
});
.jstree-default-small .jstree-open.prevent-close>.jstree-ocl {
background-position: -71px -7px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
<ul>
<li data-jstree='{"opened":true}'>Root
<ul>
<li>Item 1</li>
<!-- v-- this is the flag to prevent the close -->
<li data-jstree='{"opened":true, "prevent_close": true}'>Item 2 - Must keep open
<ul>
<li>Always Visible</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</div>
我没有时间处理三角形,如果您在这方面有问题,请告诉我,我也会尝试找到解决这个问题的方法。