web-dev-qa-db-fra.com

obtenir des valeurs vérifiées pour jsTree - soumettre avec le formulaire post

J'utilise le plugin jsTree jQuery avec le thème de case à cocher. Est-ce que quelqu'un sait comment obtenir les valeurs sélectionnées avec un formulaire?

Je vous remercie!

jqueryjquery-pluginsjstree
15
dzm

Avez-vous eu votre réponse? Sinon, en voici un qui apparaît dans les groupes jstree google

 function submitMe () {
 var checked_ids = []; 
 $ ("# server_tree"). jstree ("get_checked", null, true) .each 
 (function () {
 check_ids.Push (this.id); 
}); 
 doStuff (check_ids);
18
soumya

Dans la dernière version (3.0), l'API a été modifiée.

Si vous avez juste besoin d'un tableau d'ID sélectionnés (comme dans les exemples de ce nœud), c'est maintenant très simple: 

var selectedElmsIds = $('#tree').jstree("get_selected");

Si vous devez parcourir les éléments sélectionnés, il vous suffit de passer un paramètre "true" supplémentaire.

var selectedElmsIds = [];
var selectedElms = $('#tree').jstree("get_selected", true);
$.each(selectedElms, function() {
    selectedElmsIds.Push(this.id);
});
24
Lukas Jelinek

Tous ceux qui ont travaillé avec Jstree peuvent être confrontés à cette question: Comment obtenir les ID vérifiés de Jstree sous forme? voici la solution:

function submitMe() {
    var checked_ids = [];
    $('#your-tree-id').jstree("get_checked",null,true).each(function(){
        checked_ids.Push(this.id);
    });
    //setting to hidden field
    document.getElementById('jsfields').value = checked_ids.join(",");
}

Maintenant, nous le plaçons dans un champ caché:

<input type="hidden" name="jsfields" id="jsfields" value="" />
14
Jamshid Hashimi

La solution suggérée par les groupes Google n'a toutefois pas fonctionné pour les nœuds partiellement vérifiés, dans mon cas. Je devais laisser get_checked et procéder comme suit pour obtenir des nœuds entièrement sélectionnés et partiellement sélectionnés.

$(".sector-tree").find(".jstree-undetermined").each(function(i,element){            
    checked_ids.Push($(element).attr("id"));

    if ($(this).find(".jstree-undetermined").length == 0) {  
        $(this).find(".jstree-checked").each(function(i, element){          
            checked_ids.Push({$(element).attr("id"));
        });         
    }
});

// collect the rest of the checked nodes that exist under checked parents
$(".sector-tree").find(".jstree-checked").each(function(i, element){ //also includes the ones below 'undetermined' parent

    var selectedElement = $(element).attr("id");
    if ( hasItem(selectedElement, checked_ids ) < 0 ) {             
        checked_ids.Push(selectedElement);
    }

});
3
soumya

Avec jQuery vous pouvez simplement faire:

$('.jstree-checked,.jstree-undetermined').each(function(){
    var rawCheckedID = $(this).find('a').attr('id');
});

Cela permettra d'obtenir l'indéterminé et vérifié en même temps. La solution de soumya ci-dessus peut être plus efficace.

3
Fostah

Vous pouvez utiliser ceci:

var result = $('#your_tree').jstree('get_selected');

https://stackoverflow.com/a/22499278/1883345

1
Majid Basirati

var selectedElmsIds = [];
$("#jstree2").find("li").each(function(i, element) { //also includes the ones below 'undetermined' parent
  if ($(this).attr("aria-selected") == "true") {
    selectedElmsIds.Push($(this).attr('id'));
  }
});
console.log(selectedElmsIds);

0
Qiol Noon
$(document).ready(function(){
var jsfields = $('#myTree').jstree('get_selected');
$('.jsfields').val(JSON.stringify([jsfields]));
})

<input type="hidden" class="jsfields" value=""/>

Changez la valeur de $('#myTree') en votre arbre respectif, cela fonctionne mieux pour moi dans un appel ajax. une légère modification peut être nécessaire pour renseigner le champ de saisie de forme simple.

0
Waqas Bukhary

Ce que j'ai fait:

function getSelectedItems()
{
    var checked_ids = [];

    checkedNodes = $("#MyTree").jstree("get_checked", null, true); 

    for(var i = 0; i < checkedNodes.length; i++)
    {
        var id = $(checkedNodes[i].outerHTML)[0].id;

        checked_ids.Push(id);
    }

     // Do whatever you want with the checked_ids 
}

Cela vous donnera un tableau de tous les noeuds sélectionnés et de leurs sous-noeuds et feuilles; ainsi que des feuilles simples sélectionnées sous d'autres nœuds.

0
t_plusplus
//click button show nodes checked
$(document).on('click','#showme',function() {
    var checked_ids = [];
    var checked_ids_meta = [];
    $('#demo_0').jstree("get_checked",null,true).each(function(i, e){
        checked_ids.Push($(this).data("param")); // json metadata
        checked_ids_meta.Push($(this).attr("href")); // json attr
    });     
    console.log(checked_ids)
    console.log(checked_ids_meta)       
});
0
Malcon