对 jstree 上的特定元素进行排序
Sort specific elements on jstree
我可以使用 jstree 的 "sort" 插件仅对特定元素而不是所有节点进行排序吗?
这就是我目前所知道的。
$('#container').jstree({
"plugins" : ["sort"]
});
<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.3.5/jstree.min.js"></script>
<div id="container">
<ul>
<li class="hm" data-jstree='{"opened":true}'>BCD
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn<a></li>
<li><a>sne<a></li>
</ul>
</li>
<li class="hm" data-jstree='{"opened":false}'>FSA
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn<a></li>
<li><a>sne<a></li>
</ul>
</li>
<li class="hm" data-jstree='{"opened":false}'>DSA
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn<a></li>
<li><a>sne<a></li>
</ul>
</li>
</ul>
</div>
我只想对 BCD、FSA 和 DSA 中的列表进行排序,但它们也已排序。
在 "a" 标签下排序如何?
默认排序函数会对所有节点进行排序。因此,您必须创建排序功能。
这是一个演示:
$('#container').jstree({
"plugins": ["sort"],
// your custom sorting function
"sort": function(a, b) {
// find the parent node of elements that being sorted
var parent = this.get_node(a).parent
// check if parent node has data attribute or not
var data = this.get_node(parent).data
if (data) {
// check if is the node that you attempt to sort or not
if (data.sort === true) {
// sort with their text
return this.get_node(a).text > this.get_node(b).text ? 1 : -1
}
}
}
});
<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.3.5/jstree.min.js"></script>
<div id="container">
<ul>
<li class="hm" data-sort=true data-jstree='{"opened":true}'>BCD
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn</a></li>
<li><a>sne</a></li>
</ul>
</li>
<li class="hm" data-jstree='{"opened":false}'>FSA
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn</a></li>
<li><a>sne</a></li>
</ul>
</li>
<li class="hm" data-jstree='{"opened":false}'>DSA
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn</a></li>
<li><a>sne</a></li>
</ul>
</li>
</ul>
</div>
我可以使用 jstree 的 "sort" 插件仅对特定元素而不是所有节点进行排序吗?
这就是我目前所知道的。
$('#container').jstree({
"plugins" : ["sort"]
});
<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.3.5/jstree.min.js"></script>
<div id="container">
<ul>
<li class="hm" data-jstree='{"opened":true}'>BCD
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn<a></li>
<li><a>sne<a></li>
</ul>
</li>
<li class="hm" data-jstree='{"opened":false}'>FSA
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn<a></li>
<li><a>sne<a></li>
</ul>
</li>
<li class="hm" data-jstree='{"opened":false}'>DSA
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn<a></li>
<li><a>sne<a></li>
</ul>
</li>
</ul>
</div>
我只想对 BCD、FSA 和 DSA 中的列表进行排序,但它们也已排序。
在 "a" 标签下排序如何?
默认排序函数会对所有节点进行排序。因此,您必须创建排序功能。
这是一个演示:
$('#container').jstree({
"plugins": ["sort"],
// your custom sorting function
"sort": function(a, b) {
// find the parent node of elements that being sorted
var parent = this.get_node(a).parent
// check if parent node has data attribute or not
var data = this.get_node(parent).data
if (data) {
// check if is the node that you attempt to sort or not
if (data.sort === true) {
// sort with their text
return this.get_node(a).text > this.get_node(b).text ? 1 : -1
}
}
}
});
<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.3.5/jstree.min.js"></script>
<div id="container">
<ul>
<li class="hm" data-sort=true data-jstree='{"opened":true}'>BCD
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn</a></li>
<li><a>sne</a></li>
</ul>
</li>
<li class="hm" data-jstree='{"opened":false}'>FSA
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn</a></li>
<li><a>sne</a></li>
</ul>
</li>
<li class="hm" data-jstree='{"opened":false}'>DSA
<ul>
<li><a>hjw</a></li>
<li><a>16bsdnj</a></li>
<li><a>bsa</a></li>
<li><a>vbn</a></li>
<li><a>sne</a></li>
</ul>
</li>
</ul>
</div>