jstree inline HTML demo

by Ivan Bozhanov

HTML

<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css">
<div id="container">
  <ul>
    <li data-jstree='{"opened":true}'>Root node
      <ul>
        <li data-jstree='{"selected":true}'>b</li>
        <li>a</li>
      </ul>
    </li>
  </ul>
</div>

JavaScript

// In this example the "a" node cannot be selected by clicking on it.

// conditional select
(function ($, undefined) {
  "use strict";
  $.jstree.defaults.conditionalselect = function () { return true; };
  $.jstree.plugins.conditionalselect = function (options, parent) {
    this.activate_node = function (obj, e) {
      if(this.settings.conditionalselect.call(this, this.get_node(obj))) {
        parent.activate_node.call(this, obj, e);
      }
    };
  };
})(jQuery);
$("#container").jstree({
  "conditionalselect" : function (node) {
    return node.text === "a" ? false : true;
  },
  "plugins" : ["conditionalselect"]
});