web-dev-qa-db-fra.com

Comment afficher du code XML dans une page HTML sous forme d'arborescence pliable et extensible à l'aide de Javascript?

Comment afficher un document XML dans une page HTML sous la forme d'une arborescence pliable et extensible?

J'aimerais afficher un document XML dans une page HTML sous la forme d'une jolie arborescence. J'aimerais pouvoir développer et réduire des branches d'arbres. Par exemple, le navigateur Firefox le fait lorsque vous chargez un fichier XML simple. Je cherche comment faire cela côté client avec JavaScript.

javascripthtmlxmltree
30
Juha Syrjälä

Création d'une visionneuse XML avec JScript - Exsead XML Power Scripting

Afficher les fichiers XML avec Javascript

Mettre à jour:

Il semble y avoir une alternative plus facile et plus facile à utiliser que ce que j'ai énuméré ci-dessus il y a plusieurs années:

https://www.jstree.com/

J'espère qu'ils aident.

15
Tarik

Cette bibliothèque fait tout le travail pour vous:

http://www.openjsan.org/doc/k/ka/kawasaki/XML/ObjTree/0.24/lib/XML/ObjTree.html

var js = (new XML.ObjTree).parse("<?xml version="1.0"?><response><error>0</error></response>");

Ensuite, vous avez un arbre JavaScript et vous pouvez l'afficher comme bon vous semble. Vous voudrez peut-être essayer le module YAHOO.widget.TreeView pour créer un "arbre extensible et pliable". Autrement dit, si vous aimez la bibliothèque YUI, il existe des bibliothèques Dojo et Ext qui peuvent créer une arborescence pour vous.

1
jhuni

http://ajaxian.com/archives/jstree-jquery-based-javascript-tree-component Ici vous pouvez trouver un tas de libs js avec des solutions

1
Eldar Djafarov

Bonjour, ajoutez simplement ceci à l'en-tête de votre page.

<?php

header("Content-type: text/xml");

$xml = new SimpleXMLElement('<xml/>');

for ($i = 1; $i <= 8; ++$i) {
    $track = $xml->addChild('track');
    $track->addChild('path', "song$i.mp3");
    $track->addChild('title', "Track $i - Track Title");
}

print($xml->asXML());
?>
0
Louwki

Si vous utilisez une application ASP.NET, les fonctionnalités côté client ne sont pas nécessaires. Vous pouvez utiliser la méthode spécifiée ci-dessous: -

//Populate the below varaible value from your business logic
string xmlContent = "<?xml version=\"1.0\"><root><emp><name>name 1</name></emp><emp><name>name 2</name></emp></root>";
Response.Clear();
Response.ContentType = "text/xml"; //Set the contenttype to text/xml so the browser automatically recognises and displays it in the hierarchical structure
Response.Write(xmlContent);
Response.Flush();
Response.End();
0
Anand Uchagawkar