Comment générer Treeview à partir de données JSON à l'aide de javascript

Je suis en train de créer une arborescence comme la structure d' données JSON. La Structure est assez simple, mais le problème que je reçois est, lors du regroupement des enfants par les parents.

Par exemple,

D'entrée de données JSON est : {"enregistrement": [{"sn": la Démo de la Feuille 1','vn': la Démo de Vue de 1'},{'sn':'Démo Fiche 11','vn': la Démo de Vue 12'},{'sn':'Démo Feuille 2','vn': la Démo de Vue 21'},{'sn': la Démo de la Feuille 1','vn':'Démo de Vue 13'}],'recordcount':'4'}

Maintenant, je veux afficher ces données dans le format ci-dessous :

  • De Démonstration De La Feuille 1
    • Démo Vue 11
    • Démo Vue 12
    • Démo De Vue 13
  • De Démonstration De La Feuille 2
    • Démo Vue 21

En HTML, j'ai créé un div comme <div id="treeview"></div>.

Maintenant à l'aide de javascript, j'ai pour remplir cette div est innerHTML avec l'arborescence de la liste.

Mise à JOUR : Comptage du Nombre d'Éléments enfant doit être affiché dans les supports de l'Élément Parent, par exemple de Démonstration de la Feuille 1 (3)

Toute contribuer à atteindre cet objectif sera très appréciée.

Merci,

manishekhawat

  • Est-il une raison pour laquelle vous souhaitez utiliser un <div>? Je pense que imbriquée <ul> éléments pourrait faire beaucoup plus de sens sémantique.
  • Pas de raison particulière, j'ai divisé la page de la division et de la pensée de mettre de côté gauche de la section de contrôle treeview. Nous pouvons utiliser ul trop.
InformationsquelleAutor manishekhawat | 2011-12-19
  1. 1

    Il semble que vous voulez aller à partir de cette structure:

    {
    'record': [
        {'sn':'Demo Sheet 1','vn':'Demo View 11'},
        {'sn':'Demo Sheet 1','vn':'Demo View 12'},
        {'sn':'Demo Sheet 2','vn':'Demo View 21'},
        {'sn':'Demo Sheet 1','vn':'Demo View 13'}
    ],
    'recordcount':'4'
}

    à celui-ci:

    {
    'Demo Sheet 1': [
        'Demo View 11',
        'Demo View 12',
        'Demo View 13'
    ],
    'Demo Sheet 2': [
        'Demo View 21'
    ]
}

    Je pense que le premier endroit pour commencer est de dé-sérialiser votre chaîne JSON dans le premier objet, puis itérer sur les "enregistrement" de la matrice de sortir chaque élément et de la création d'un nouveau tableau pour chaque clé unique, ou l'ajouter à un groupe existant si cette clé existe déjà (par exemple, la Démo de la Feuille 1'). Une fois que vous avez fait et mis au rebut de toutes les données supplémentaires, vous devriez vous retrouver avec une structure de données similaire à la seconde au-dessus, qui devrait être très facile de générer des mark-up pour.

    MODIFIER
    Comme un exemple de la ci-dessus (à l'aide de Douglas Crockford de JSON2 bibliothèque, quelque chose comme ceci:

    var jsonObject = JSON.parse(jsonString /* your original json data */);
var newArrays = {};
var records = jsonObject.record;

for (var i = 0; i < records.length; i++) {
    if (!newArrays[records[i].sn]) {
        newArrays[records[i].sn] = [];
    }
    newArrays[records[i].sn].push(records[i].vn);
}

    Vous avez maintenant la nouvelle structure de données - comment vous marquez est entièrement à vous! Voir ce violon pour un exemple.

    Mot d'avertissement: je vous recommande l'ajout d'une gestion d'erreur pour le scénario ci-dessus, que vous ne devez jamais supposer que les données JSON vous recevez va analyser correctement.

    EDIT 2 j'ai mis à jour le violon pour donner un exemple de l'affichage dans les DOM. La fonction qui ajoute à la DOM est récursive (fonctionnera pour n'importe quelle profondeur de tableaux imbriqués) juste parce que je me sentais comme à l'écrit comme ça, mais la fonction qui transforme l'initiale des données JSON n'est pas le cas, donc il n'a pas vraiment d'importance. 🙂

    • Merci pour la réponse de Chris, j'avais déjà essayé de faire la même chose en utilisant l'une de l'exemple de code, mais peut-être perdu quelque part. Si vous pouviez s'il vous plaît poster rapidement un morceau de code pour aller de l'avant, je serai reconnaissant à vous.
    • Ajout d'un exemple de la façon de transformer la structure de données, le balisage doit être très simple.
    • Merci beaucoup. C'est grand, a résolu mon problème 🙂
    • comment avez-vous lier votre jsonObject <div>
    • J'ai mis à jour la réponse à fournir un exemple - ont un regard qui, espérons-le, c'est un peu logique.
    InformationsquelleAutor chrisf