CODEWITHSUNDEEP
javascriptjquerysortingjstree
user7937612
user7937612

Reputation:

Sort specific elements on jstree

Can I use the "sort" plugin of jstree on sorting specific elements only and not all the nodes?

This is what I've got so far.

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

I only want to sort the list inside BCD, FSA, and DSA but these are also sorted as well.

How about soring under "a" tag?

Upvotes: 1

Views: 1930

Answers (1)

Hikarunomemory
Hikarunomemory

Reputation: 4305

The default sort function would sort all the nodes. So, you have to create your sorting function.

Here's a demo:

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

Upvotes: 3

Related Questions