javascript - 对 jstree 上的特定元素进行排序

Question

我可以使用 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”标签下排序怎么样？

Answer 1

默认的排序函数会对所有节点进行排序。因此，您必须创建排序函数。

这是一个演示:

$('#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>