javascriptjqueryhtmljstreejstree-search

JSTree font awesome check Box

I have a tree structure using jsTree, like this:

<div id="SampleContainer">
<ul> 
  <li>
    Top 1
    <ul>
      <li>
        Sub 1
        <ul>
          <li>
            A
          </li>
          <li>
            B
          </li>

        </ul>
      </li>
      <li>
        Sub 2
        <ul>
          <li>
            A
          </li>
          <li>
            B
          </li>

        </ul>
      </li>
    </ul>
  </li>

</ul>
</div>

I would like to put icons of font-awesome for the check-box:

I tried by doing this:

$(document).ready(function(){
   $("#SampleContainer").jstree({
    "plugins": ["checkbox"],
    core: {
      "themes": {
        "icons": false,
        "responsive": true
      }
    }
  });
    $('#SampleContainer').on('ready.jstree click', function (e, data) {     
        $('a > i.jstree-checkbox').removeClass('jstree-icon jstree-checkbox').addClass('fa fa-square-o');

    $('a > i.jstree-clicked').removeClass('jstree-icon jstree-checkbox').addClass('fa fa-check-square');
      });     
       });

and this icon 'fa fa-square-o' is coming. not able see the onclick 'fa fa-check-square'.!

sample Design: enter image description here

Developed Screen: enter image description here

Does anyone have an idea about this issue?

Solution

  • I added a new toggleCheckClasses function that adds / removes the right fa classes depending on the state of the checkbox. And I attached this function to the tree nodes in your treejs-ready / click handler.

    EDIT : I added the toggling of children elements classes

    $(document).ready(function() {
    $("#SampleContainer").jstree({
        "plugins": ["checkbox"],
        core: {
            "themes": {
                "icons": false,
                "responsive": true
            }
        }
    });
    $('#SampleContainer').on('ready.jstree click', function(e, data) {
        $('a > i.jstree-checkbox')
            .removeClass('jstree-icon jstree-checkbox') // removing jstree classes
            .addClass('fa fa-square-o') // adding the fa non-checked checkbox class
            .on('click', function() { // attaching the handler that toggles the checked / unchecked class
                toggleCheckClasses($(this), $(this).hasClass('fa-square-o'));
            });
    });

    function toggleCheckClasses(element, show) {
        if (show) {
            element.removeClass('fa-square-o');
            element.addClass('fa-check-square-o');
        } else {
            element.removeClass('fa-check-square-o');
            element.addClass('fa-square-o');
        }

        var children = element.parent().siblings(".jstree-children").find(".jstree-anchor .fa");

        children.each(function() {
            toggleCheckClasses($(this), show);
        });

    }

});
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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="SampleContainer">
<ul> 
  <li>
    Top 1
    <ul>
      <li>
        Sub 1
        <ul>
          <li>
            A
          </li>
          <li>
            B
          </li>

        </ul>
      </li>
      <li>
        Sub 2
        <ul>
          <li>
            A
          </li>
          <li>
            B
          </li>

        </ul>
      </li>
    </ul>
  </li>

</ul>
</div>