[Résolu] urgent svp Filtre exposé js tree

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Bonjour,
Depuis quelques jours je galère pour transformer un filtre exposé checkbox dans views 3 levels je veux la transformer en checkbox tree collapsible et expandable comment je dois faire svp une fois que j'ai mis en place la libraire Jstree.

Vous trouverez ci-joint deux images : image 1 : ce que j ai fait "filtre exposé parent et enfant sur 3 niveaux"
Et l'image 2 : le résultat que je veux réaliser

J'ai vraiment besoin de votre aide merci

Forum : 
Version de Drupal : 

Je vous rajoute le code générer par Better exposed filter que j'utilise pour créer les filtres :
/**
* Themes a taxonomy-based exposed filter as a nested unordered list.
*
* Note: this routine depends on the '-' char prefixed on the term names by
* Views to determine depth.
*
* @param array $vars
* An array of arrays, the 'element' item holds the properties of the element.
*
* @return string
* Nested, unordered list of filter options
*/
function theme_select_as_tree($vars) {
$element = $vars['element'];

// The selected keys from #options.
$selected_options = empty($element['#value']) ? $element['#default_value'] : $element['#value'];

// Build a bunch of nested unordered lists to represent the hierarchy based
// on the '-' prefix added by Views or optgroup structure.
$output = '

<

ul class="bef-tree">';
$curr_depth = -1;
foreach ($element['#options'] as $option_value => $option_label) {

// Check for Taxonomy-based filters.
if (is_object($option_label)) {
$slice = array_slice($option_label->option, 0, 1, TRUE);
list($option_value, $option_label) = each($slice);
}

// Check for optgroups -- which is basically a two-level deep tree.
if (is_array($option_label)) {
// TODO:
}
else {
// Build hierarchy based on prefixed '-' on the element label.
if (t('- Any -') == $option_label) {
$depth = -1;
}
else {
preg_match('/^(-*).*$/', $option_label, $matches);
$depth = strlen($matches[1]);
$option_label = ltrim($option_label, '-');
}

// Build either checkboxes or radio buttons, depending on Views' settings.
$html = '';
if (!empty($element['#multiple'])) {
$html = bef_checkbox(
$element,
$option_value,
$option_label,
(array_search($option_value, $selected_options) !== FALSE)
);
}
else {
$element[$option_value]['#title'] = $option_label;
$element[$option_value]['#children'] = theme('radio', array('element' => $element[$option_value]));
$html .= theme('form_element', array('element' => $element[$option_value]));
}

if ($depth > $curr_depth) {
// We've moved down a level: create a new nested <ul>.
// TODO: Is there is a way to jump more than one level deeper at a time?
// I don't think so...
$output .= "<ul class='bef-tree-child bef-tree-depth-$depth'><li>$html";
$curr_depth = $depth;
}
elseif ($depth < $curr_depth) {
// We've moved up a level: finish previous <ul> and <li> tags, once for
// each level, since we can jump multiple levels up at a time.
while ($depth < $curr_depth) {
$output .= '</li></ul>';
$curr_depth--;
}
$output .= "</li><li>$html";
}
else {
if (-1 == $curr_depth) {
// No </li> needed -- this is the first element.
$output .= "<li>$html";
$curr_depth = 0;
}
else {
// Remain at same level as previous entry.
$output .= "</li><li>$html";
}
}
}

} // foreach ($element['#options'] as $option_value => $option_label)

if (!$curr_depth) {
// Close last

  • tag.
    $output .= '
  • ';
    }
    else {
    // Finish closing

      and
    • tags.
      while ($curr_depth) {
      $curr_depth--;
      $output .= '

    ';
    }
    }

    // Close the opening

      tag.
      $output .= '

    ';

    // Add exposed filter description.
    $description = '';
    if (!empty($element['#bef_description'])) {
    $description = '

    ' . $element['#bef_description'] . '

    ';
    }

    // Add the select all/none option, if needed.
    if (!empty($element['#bef_select_all_none'])) {
    if (empty($element['#attributes']['class'])) {
    $element['#attributes']['class'] = array();
    }
    $element['#attributes']['class'][] = 'bef-select-all-none';
    }
    // Add the select all/none nested option, if needed.
    if (!empty($element['#bef_select_all_none_nested'])) {
    if (empty($element['#attributes']['class'])) {
    $element['#attributes']['class'] = array();
    }
    $element['#attributes']['class'][] = 'bef-select-all-none-nested';
    }

    // Name and multiple attributes are not valid for

    's.
    if (isset($element['#attributes']['name'])) {
    unset($element['#attributes']['name']);
    }
    if (isset($element['#attributes']['multiple'])) {
    unset($element['#attributes']['multiple']);
    }

    return '$description$output

    ";
    }

    Après quelques recherches j'ai trouvé la solution ça va aider plusieurs personnes qui n'ont pas de compétences en php et en Js et qui veulent profiter de la puissance et la flexibilité de drupal pour développer un tel projet d'ou l’intérêt de cms drupal et de sa communauté très active franchement merci à tous ceux qui partagent leurs contributions et qui participent dans le développement des modules (bug, amélioration des performances )
    La solution :
    j ai télécharger le module JS injector :

    et j'ai rajouter ce script :
    (function ($) {
    Drupal.behaviors.betterExposedFiltersExpandCollapseNested = {
    attach:function (context, settings) {
    if (!('$befSetupDone' in window)) {
    $('ul.bef-tree-child.bef-tree-depth-1').css('display', 'none');
    var $expander = $('+');
    $('ul.bef-tree-child > li:has(ul) > div.form-item').prepend($expander);
    $('.expander')
    .click(function() {
    $ul = $(this).parents('li:first').find('ul');
    $ul.toggle('fast');
    })
    $befSetupDone = 1;
    }
    }
    }
    }) (jQuery);:

    ce script je l'ai trouvé sur ce site ça peut vous aider:
    http://drupal.stackexchange.com/questions/104452/with-bef-collapse-expan...
    et pour approfondir et améliorer les choses voiçi un node qui vous explique mieux les étapes :
    https://www.drupal.org/node/990080