能否使用jstree的sort插件仅排序特定元素而非全部节点?
当然可以实现!jstree的sort插件提供了自定义排序函数的能力,完全能满足你只对特定元素排序、其余节点保持原顺序的需求。
实现思路
jstree的sort配置项支持传入一个自定义排序函数,这个函数接收两个节点作为参数,通过返回值控制节点顺序:
- 返回负数:节点a排在节点b前面
- 返回正数:节点b排在节点a前面
- 返回0:保持节点在原始DOM中的顺序
具体代码示例
结合你的现有代码,修改后的完整实现如下:
<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>普通内容1</a></li> <li class="hm"><a>XYZ</a></li> <li class="hm"><a>ABC</a></li> <li><a>普通内容2</a></li> </ul> </li> <li class="hm">AAA</li> <li>无需排序的节点</li> </ul> </div> <script> $(function() { $('#container').jstree({ "plugins": ["sort"], "sort": function(a, b) { // 获取节点对应的原始DOM元素 const nodeA = $(this.get_node(a).original); const nodeB = $(this.get_node(b).original); // 只对带有`hm`类的节点执行排序逻辑 if (nodeA.hasClass('hm') && nodeB.hasClass('hm')) { // 按文本内容升序排列,你可以根据需求改成数字排序、自定义规则等 return nodeA.text().trim().localeCompare(nodeB.text().trim()); } // 非目标节点保持原始DOM中的顺序 return 0; } }); }); </script>
代码说明
- 自定义排序函数中,我们先判断两个节点是否都带有你指定的
hm类(你可以换成其他标识,比如自定义data属性、节点类型等) - 只有当两个节点都是目标元素时,才执行排序逻辑(示例用了文本自然排序,可按需修改)
- 只要有一个节点不是目标元素,就返回0,保留它们的原始顺序
这样就能精准控制只对特定元素排序,其他节点不受影响啦!
内容的提问来源于stack exchange,提问作者user7937612
相关产品推荐
相关产品推荐

