JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="campos" id="campos">
  <ul>
    <li><input type="checkbox" checked/><label>Campo 1</label></li>
    <li><input type="checkbox" checked/><label>Campo 2</label></li>
    <li><input type="checkbox" checked/><label>Campo 3</label></li>
    <li><input type="checkbox" checked/><label>Campo 4</label></li>
    <li><input type="checkbox" checked/><label>Campo 5</label></li>
    <li><input type="checkbox" checked/><label>Campo 6</label></li>
  </ul>
  <button id="gerarArvore">
  OK
  </button>
</div>
<button id="mostrarCampos">
Mostrar Campos
</button>
<div id="hierarquia">
</div>

CSS

body{
  font-family: sans-serif;
}

.campos{
  position:fixed;
  width:300px;
  border-radius:5px;
  box-shadow: 0 0 10px rgba(0,0,0,.3);
  padding:20px;
  box-sizing:border-box;
  background-color:white;
}
.campos ul{
  padding:0;
  margin:0;
  list-style:none;
}

.campos ul li{
  padding: 5px 10px;
  display:flex;
}
.campos ul li:nth-child(even){
  background-color: #eee;
}

.campos button{
  margin-top:10px;
  width:100%;
  border-radius:3px;
  text-align: center;
  color:white;
  background-color: darkgreen;
  border:none;
  padding:10px 5px;
  cursor: pointer;
}

JavaScript

function gerarArvore(campos){
  $("#hierarquia").jstree({
    "core" : {
      "check_callback" : true,
      "themes" : {
        "responsive" : false
      },
      'data' : campos
    },
    "types" : {
      "default" : {
        "icon" : "fa fa-file color-icon",
        "max_depth" : 0
      }
    },
    "plugins" : ["types","dnd"],
  })
    .bind("select_node.jstree", function (e, data) {
    //atualizaGrafico(data);
  });
}

function mostrarPainelCampos(bool){
	if(bool){
  	$("#campos").show();
  }else{
  	$("#campos").hide();
  }
}

function pegarCampos(){
	var campos = [];
	$("#campos ul li").each(function(){
  	var campo = {"text" : $(this).find("label").text(), "state":{"hidden" : !$(this).find("input").prop("checked")}};
    campos.push(campo);
  });
  console.log(campos);
  return campos;
}

function atualizarArvore(){
$('#hierarquia').jstree(true).settings.core.data = pegarCampos();
$('#hierarquia').jstree(true).refresh();
}

$("#mostrarCampos").click(function(){
	mostrarPainelCampos(true);
});


$("#gerarArvore").click(function(){
  atualizarArvore();
  mostrarPainelCampos(false);
});

gerarArvore(pegarCampos());
mostrarPainelCampos(false);