JSFiddle - React, Tailwind, and code Playground

by thapar

HTML

<script src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div class="colors">

  <ul style="padding-left:20px">
    <li id="tree_1" class="tree" data-cb-id="1"><a>Blue</a>
  
    </li>
  </ul>

  <ul style="padding-left:20px">
    <li id="tree_2" class="tree" data-cb-id="2"><a>Yellow</a>
  
    </li>
  </ul>

  <ul style="padding-left:20px">
    <li id="tree_3" class="tree" data-cb-id="3"><a>Red</a>
  
    
  <ul style="padding-left:20px">
    <li id="tree_4" class="tree" data-cb-id="4"><a>Magenta</a>
  
    </li>
  </ul>

  <ul style="padding-left:20px">
    <li id="tree_5" class="tree" data-cb-id="5"><a>Maroon</a>
  
    
  <ul style="padding-left:20px">
    <li id="tree_6" class="tree" data-cb-id="6"><a>Dark maroon</a>
  
    </li>
  </ul>

  
    </li>
  </ul>

  
    </li>
  </ul>

</div>

JavaScript

var urldata = {"checked_nodes":["Blue", "Yellow", "Dark maroon"],
               "open_nodes":["Red", "Maroon"]};

function buildtree() {
  $('.colors').jstree({
                     "core":{"animation":0},
                     "checkbox":{"real_checkboxes":"true"},
                     "plugins":["themes","html_data","checkbox"],
                     })
}

function renderPage() {
  $('.colors').bind({
    "loaded.jstree": function(e,data){
      setTree(urldata) //set the tree using the URL
    }
  })
}
    
function setTree(urldata){
  // close all nodes
  $('.colors').jstree('close_all')

  if (urldata['checked_nodes'])
  {
    $.each(urldata['checked_nodes'], function(i,item) {
      $('.colors').find("a:contains('" + item + "')").parent('li')
          .removeClass('jstree-unchecked')
          .addClass('jstree-checked')
    });
  }

  if (urldata['open_nodes'])
  {
    $.each(urldata['open_nodes'], function(i,item) {
      $('.colors').find("a:contains('" + item + "')").parent('li')
          .removeClass('jstree-closed')
          .addClass('jstree-open')
    });
  }

  $('.colors').checkbox_repair() //supposed to add undetermined class as necessary
//$('.colors').each(function(i,el){$(this).checkbox_repair($(el))}) <-- also doesn't work
};

$(function(){
  buildtree();
  renderPage();
})