Test jsTree pour Locale

by Bruno G.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/misc.min.js"></script>
<div><input class="search-input"/><input type="button" value="GET" onclick="getVals('jstree')"></div>
<div id="jstree" class="demo"></div>
<hr>
<select>
<option value="ENG">Anglais (tout)</option>
<option value="ENG|en">Anglais (neutre)</option>
<option value="ENG|en-AU">Anglais (Australie)</option>
<option value="ENG|en-BZ">Anglais (Belize)</option>
<option value="ENG|en-CA">Anglais (Canada)</option>
<option value="FRA">Français (tout)</option>
<option value="FRA|fr">Français (neutre)</option>
<option value="FRA|fr-MC">Français (Monaco)</option>
<option value="FRA|fr-LU">Français (Luxembourg)</option>
<option value="FRA|fr-CA">Français (Canada)</option>
<option value="FRA|fr-CH">Français (Suisse)</option>
</select>
<hr>
<div><input class="search-input2"/><input type="button" value="GET" onclick="getVals('jstree2')"></div>
<div id="jstree2" class="demo"></div>
<hr>
<select>
<option value="ENG">Anglais</option>
<option value="FRA">Français</option>
</select>
<hr>
<div><input class="search-input3"/><input type="button" value="GET" onclick="getVals('jstree3')"></div>
<div id="jstree3" class="demo">
  <ul>
    <li id="ENG">Anglais [ENG]
    <ul>
      <li id="ENG|en">Neutre [en]</li>
      <li id="ENG|en-AU">Australie [en-AU]</li>
      <li id="ENG|en-BZ">Belize [en-BZ]</li>
      <li id="ENG|en-CA">Canada [en-CA]</li>
    </ul>
    </li>
    <li id="FRA" class=""><a href="#" class="jstree-clicked jstree-close">Français [FRA]</a>
    <ul>
      <li id="FRA|fr">Neutre [fr]</li>
      <li id="FRA|fr-CA">Canada [fr-CA]</li>
      <li id="FRA|fr-LU">Luxembourg <span...

CSS

/*#jstree .jstree-open > .jstree-anchor > .jstree-checkbox,
#jstree .jstree-closed > .jstree-anchor > .jstree-checkbox { display:none; }*/

JavaScript

function getVals(eID) {
	var checked_ids = $('#'+eID).jstree("get_selected");
	var partial_ids = $('#'+eID).jstree("get_undetermined");
	
  alert(checked_ids.concat(partial_ids).join(","));

}

$('.search-input').keyup(function() {
  $('#jstree').jstree('search', $(this).val());
});

$('.search-input2').keyup(function() {
  $('#jstree2').jstree('search', $(this).val());
});

$('.search-input3').keyup(function() {
  $('#jstree3').jstree('search', $(this).val());
});

$('#jstree').jstree({
  'core': {
    'data' : [
      { "id" : "ENG", "parent" : "#", "text" : "Anglais [ENG]" },
      { "id" : "ENG|en", "parent" : "ENG", "text" : "Neutre [en]" },
      { "id" : "ENG|en-AU", "parent" : "ENG", "text" : "Australie [en-AU]" },
      { "id" : "ENG|en-BZ", "parent" : "ENG", "text" : "Belize [en-BZ]" },
      { "id" : "ENG|en-CA", "parent" : "ENG", "text" : "Canada [en-CA]" },
      { "id" : "FRA", "parent" : "#", "text" : "Français [FRA]"/*, "state" : { 'disabled' : true }*/ },
      { "id" : "FRA|fr", "parent" : "FRA", "text" : "Neutre [fr]" },
      { "id" : "FRA|fr-CA", "parent" : "FRA", "text" : "Canada [fr-CA]" },
      { "id" : "FRA|fr-LU", "parent" : "FRA", "text" : "Luxembourg <span style=\"color:red\">[fr-LU]</span>", "state" : { 'selected' : true } },
      { "id" : "FRA|fr-MC", "parent" : "FRA", "text" : "Monaco [fr-MC]" },
      { "id" : "FRA|fr-CH", "parent" : "FRA", "text" : "Suisse [fr-CH]" },
    ],
    'themes': {
      //'name' : 'logiterm',
      'icons' : false,
      //'dots' : false
    }
  },
  'checkbox' : {
    'keep_selected_style' : false,
    //'three_state' : false,
    //'cascade' : 'down',
  },
  'search': {
    'case_insensitive': true,
    'show_only_matches' : true,
    'show_only_matches_children' : true
  },
  'plugins' : [ 'checkbox', 'search' ]
});

$('#jstree2').jstree({
  'core': {
    'data' : [
      { "id" : "FRA", "text" : "Français"/*, "state" : { 'disabled' : true }*/ },
      { "id" : "ENG", "text" : "English" }
    ],
   ...