la création dynamique jstree aide d'un autre format JSON stockées dans la gamme

Je suis en mesure de créer jstree aide d'un autre format JSON comme ci-dessous: 

$('#using_json_2').jstree({ 'core' : {
'data' : [
   { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
   { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
   { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
   { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
} });

Mais il est assez statique. Je veux qu'il soit dynamique, dans le sens que, le nombre de lignes peut être variable et la ligne de propriétés à lire à partir d'un tableau. Je ne veux pas utiliser ajax que les données sont déjà disponibles dans la gamme.

InformationsquelleAutor Jenson | 2014-10-09
  1. 12

    Si vous voulez que vos données soient dynamiques, vous pouvez utiliser le code suivant pour initialiser votre jstree:

    $('#jstree').jstree({
    'core': {
        'data': arrayCollection
    }
});

    où de type arraycollection est une variable qui contient votre tableau dynamique. Par Exemple, votre type arraycollection peut ressembler à ceci:

    var arrayCollection = [
{"id": "animal", "parent": "#", "text": "Animals"},
{"id": "device", "parent": "#", "text": "Devices"},
{"id": "dog", "parent": "animal", "text": "Dogs"},
{"id": "lion", "parent": "animal", "text": "Lions"},
{"id": "mobile", "parent": "device", "text": "Mobile Phones"},
{"id": "lappy", "parent": "device", "text": "Laptops"},
{"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
{"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "/"},
{"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
{"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
{"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
{"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
{"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
{"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
];

    Enfin, votre fichier html doit ressembler à:

    <html>
<head>
<title>JSTree</title>
<link rel="stylesheet" href="dist/themes/default/style.css" />
<script src="dist/libs/jquery.js"></script>
<script src="dist/jstree.js"></script>
<script>
$(function() {
var arrayCollection = [
{"id": "animal", "parent": "#", "text": "Animals"},
{"id": "device", "parent": "#", "text": "Devices"},
{"id": "dog", "parent": "animal", "text": "Dogs"},
{"id": "lion", "parent": "animal", "text": "Lions"},
{"id": "mobile", "parent": "device", "text": "Mobile Phones"},
{"id": "lappy", "parent": "device", "text": "Laptops"},
{"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
{"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "/"},
{"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
{"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
{"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
{"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
{"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
{"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
];
$('#jstree').jstree({
'core': {
'data': arrayCollection
}
});
});
</script>
</head>
<body>
<div id="jstree"></div>
</body>
</html>

    À chaque fois que votre type arraycollection est modifié, vous devez ré-attribuer le type arraycollection à votre jstree et d'actualisation de la jstree par programmation.

    • Merci ! Il a bien fonctionné et c'est ce dont j'avais besoin. Très bien expliqué.
    InformationsquelleAutor Quick_Silver
  2. 0
    var fullMenuList = [
{"id": "1000", "parent": "#", "text": "PARENT"}
];
$http({
method: 'POST',
url: 'Jtree.do',
params: {}  //pass in data as strings 
}).then(function (response) {
console.log(response.data[0].Code1);
console.log(response.data[0].Menu);
console.log(response.data[0].Groupcode);
for (var i = 0; i < response.data.length; i++) {
fullMenuList.push({id: response.data[i].Code1,
parent: response.data[i].Groupcode,
text: response.data[i].Menu
});
}
$('#jstree').jstree({
"checkbox": {
"keep_selected_style": false
},
//"plugins": ["checkbox"],
'core': {
'data': fullMenuList
}
});
});
    InformationsquelleAutor Akhil Babu