J'utilise le plug-in Jstree JQuery pour afficher un arbre de profondeur de 5 niveaux. Je voudrais ne pas montrer des cases à cocher au dernier niveau. Y a-t-il un moyen de le faire dans le cadre ou un traitement de jQuery que je peux faire ensuite pour supprimer ces cases à cocher? Je suis capable de les désactiver à l'aide de leur plugin, mais je veux vraiment qu'ils ne soient pas visibles.
Voici un exmple de mon arbre "[x]" = une case à cocher P>
$("#right-tree2").bind("loaded.jstree", function(event, data) {
$('.lvl4').find('ins.jstree-checkbox').hide();
})
.jstree({....});
6 Réponses :
Vous pouvez également empêcher le plugin de la case à cocher à partir de l'ajouter:
Essayez ceci,
$("#right-tree2").bind("loaded.jstree", function(e, data) {
var currentNode = data.rslt.obj.attr("id");
var nodeLevel = data.inst.get_path().length;
if(nodeLevel == 4){
$('#'+currentNode).find('> a > .jstree-checkbox').remove();
}
})
Si vous créez l'arbre de JSON, j'ai trouvé le moyen le plus simple de supprimer les nœuds utilise des CSS.
Dans le JSON réel, définissez le champ A_ATTR des nœuds que vous souhaitez être désactivé sur "no_checkbox" comme ci-dessous. Cela ajoutera la classe "no_checkbox" à l'élément dans le CSS, créez un sélecteur comme celui-ci: p>
fait! P>
li>
ol> Ceci sélectionnera uniquement des cases à cocher directement à l'intérieur de l'élément Bien sûr que si vous êtes Entraînement des données à l'aide de HTML au lieu de JSON, vous pouvez simplement ajouter la classe CSS dans le code HTML manuellement ou en utilisant la langue latérale PHP / Autre serveur, et fonctionnera exactement la même. P> P> code> contenant le texte du nœud, les icônes et les cases à cocher. P>
.no_checkbox>i.jstree-checkbox
{
display:none
}
node = {
text: "foo",
a_attr: {
class: "no_checkbox"
}
}
code> avec la classe no_checkbox code>, et il les supprimera de la mise en page. L'avantage de cette méthode sur les autres réponses est que vous pouvez ramener la case à cocher en supprimant la classe no_checkbox code> dans l'élément code>. Par exemple, vous pouvez le faire dans les gestionnaires de l'événement pour l'événement select_node.jstree code>, puis obtenez le nœud DOM qui est transmis comme un argument. P>
J'ai trouvé une autre solution à l'aide de CSS. Ce code simple masque la case à cocher dans la première couche
Pour masquer complètement la case à cocher à partir du nœud spécifique Donnant que les données de noeud provenaient du serveur, ajoutez-le après le code JS
p>
.no_checkbox > i.jstree-checkbox {
display: none;
}J'ai ajouté à la réponse de @ Migwell pour mon propre développement dans lequel j'ai utilisé le plugin "Types 'Jstree"
pour l'affaire d'utilisation de l'OP, il pourrait simplement ajouter un type à chaque niveau, ou juste un au dernier niveau, selon ce qui est le plus facile. Le niveau qu'il ne veut pas ne veut pas que les cases à cocher obtiennent la classe ajoutée à son A_ATTR. Les types plugin's a_attr acceptent un objet. P>
"types": {
"lvl5": {
"a_attr": {class: "no_checkbox"}
}
Vous devez vérifier le dernier chemin de votre arbre. Le dernier élément n'a ni le sœur suivant ni un enfant. Si oui, vous lisez le nœud parent et supprimez ou masquez les cases à cocher Childrens. Je pense que vous devez externaliser ce code dans une fonction supplémentaire et l'appeler une fois que l'arbre a été généré. Je sais que cela n'est pas très efficace, mais une manière qui peut fonctionner.
OK, j'ai pu supprimer les nœuds mais avec un petit problème. Si j'appelle $ ('. Lvl4'). Trouver ('INS.JStree-Cochez la case'). Masquer (); Sur un bouton, cliquez dessus, mais pas juste après l'appel .jstree. Y a-t-il un moyen d'exécuter une commande après que l'arbre ait effectué le rendu?
Je ne connais pas votre code source, je ne peux donc pas dire si c'est possible.