nicht angemeldet
Danke Mathias,
Ich habe nach eine dynamische Lösung (rekursion) die alle xml Formate einlesen kann unabhängig von der Tiefe außerdem sollte das ausgegebene xml wie beim Mozilla zu/aufklappbar.
Ich habe auch nichts weiteres gefunden musste also eigene Klassen dafür schreiben.
Rausgekommen ist eine Klasse MyXml die nach der Instantierung( "new MyXml(transport.responseXML)" ) eine Funktion zur Verfügung sellt ( "parse2html" )
mit dem man das XML Onject in HTML Text umwandeln kann (TABLE oder DIV).
Die Funktion erwartet 2 Parameter:
- nr 1: xml Child ab wo die Ausgabe erfolgen soll. Man muss also nicht den kompletten Baum anzeigen.
- nr 2: Ausgabeformat als html Tabelle oder mit div's analog xml Ansicht in Mozilla.
Hier ist mein Ergebnis für anderen die auch sowas brauchen können.
Wiel spass damit. Es ist möglicherweise nicht die schönste Lösung aber es funktioniert.
den Ajax Teil:
new Ajax.Request(url, { method:'get',
onSuccess: function(transport){
var xmlData = new MyXml(transport.responseXML);
$(divContent_1).innerHTML( xmlData.parse2html('A','TABLE') );
$(divContent_2).innerHTML( xmlData.parse2html('XRF','DIV') );
},
onFailure: function(){},
onUninitialized: function(){},
onLoading: function(){},
onLoaded: function(){},
onInteractive: function(){},
onComplete: function(){},
onException: function(){}
});
##############################################
// Die Klassen über eine .js Datei laden
*-------------------------- Class MyObject -----------------------------*/
var MyObject = Class.create({
initialize: function(varName) {
this.varName = varName;
},
toString: function() {
return this.getObject(this, this.name, '');
},
showDebug: function() {
document.write( this.getObject(this, this.name, 'html') );
return ;
},
getContent: function() {
return 'empty MyObject';
},
getObject: function(MyObject, name, mode) {
sOut = '';
if (mode == 'html') {
sOut = sOut+"<table border='1'>\n";
sOut = sOut+" <tr>\n";
sOut = sOut+" <td colspan='3'><b>'"+name+"' properties:</b></td>\n";
sOut = sOut+" </tr>\n";
for (var item in MyObject) {
sOut = sOut+"<tr>\n";
sOut = sOut+" <td> </td>\n";
sOut = sOut+" <td valign='top'>"+item+": </td>\n";
sOut = sOut+" <td>"+this.newline2br(MyObject[item])+"</td>\n";
sOut = sOut+"</tr>\n";
}
sOut = sOut+"</table>\n";
} else {
sOut = sOut+"'"+name+"' properties:\n";
for (var item in MyObject) {
sOut = sOut+item+":";
sOut = sOut+" "+MyObject[item]+"\n";
}
}
return sOut;
},
newline2br: function(sTmp) {
var sInt = ""+sTmp;
var sOut = sInt.replace(/\n/g, "<br> ");
return sOut;
}
});
*--------------------- class MyXml ----------------------------*/
function x(e) {
if (e.parentNode.className != 'expander-closed') {
e.parentNode.className = 'expander-closed';
e.innerHTML = '+';
} else {
e.parentNode.className = 'expander-open';
e.innerHTML = '-';
}
return true;
}
var MyXml = Class.create(MyObject, {
initialize: function($super,xmlObj) {
$super('xmlObj');
this.debug = false;
this.XMLDocument = xmlObj;
this.maxColSpan = 0;
if (this.debug) alert('002: MyXml.initialize');
},
setDocument: function( newXmlObj ) {
this.XMLDocument = newXmlObj;
return ;
},
calcColspan: function(oParent, iColSpan ) {
var iTmp = iColSpan+1;
if ( this.maxColSpan < iTmp ) {
this.maxColSpan = iTmp;
}
var iChd = oParent.childNodes.length;
for (var i=0; i<iChd; i++ ) {
this.calcColspan( oParent.childNodes[i],iTmp );
}
return;
},
getDocument: function( newXmlObj ) {
return this.XMLDocument;
},
parse2html: function( tagName, sView ) {
var sOut = '';
if (this.debug) alert('003 MyXml.parse2html -> tagName:'+tagName);
var data = this.XMLDocument.getElementsByTagName(tagName);
var iTag= data.length;
if (this.debug) alert('003 MyXml.parse2html -> iTag:'+iTag);
for ( var i=0; i<iTag; i++ ) {
this.calcColspan( data[i],0 );
}
for ( var i=0; i<iTag; i++ ) {
sOut = sOut+this.child2html( data[i],-1,data[i].nodeName,sView );;
}
if ( sOut != '' ) {
if ( sView == 'TABLE' ) {
sOut = '<table border="1">'+sOut+'</table>';
} else {
sOut = sOut;
}
}
if (this.debug) alert('003 MyXml.parse2html -> sOut:'+sOut);
return sOut;
},
child2html: function(oParent, iSpan, sTmp, sView ) {
var sOut = '';
iSpan++;
var iChd = oParent.childNodes.length;
if (this.debug) alert('003-1 child2html -> nodeName:'+oParent.nodeName+' nodeType:'+oParent.nodeType+'\n sTmp:'+sTmp+' iChd:'+iChd);
var sChd = '';
for (var i=0; i<iChd; i++ ) {
var sTmp2 = sTmp+'->'+oParent.childNodes[i].nodeName;
sChd = sChd+this.child2html( oParent.childNodes[i],iSpan,sTmp2,sView );
}
if ( sView != 'TABLE' && oParent.nodeType != 3 && this.maxColSpan-iSpan > 1 ) {
sChd = '<div class="expander-content">\n'+sChd+'</div>\n';
}
var sAtr = '';
if ( oParent.nodeType != 3 && oParent.attributes.length > 0 ) {
sAtr = this.attrib2html( oParent );
} else if ( oParent.nodeType != 3 ) {
sAtr = '<<span class="start-tag">'+oParent.nodeName+'</span>>\n';
}
if ( sAtr != '' ) {
if ( sView == 'TABLE' ) {
sAtr = '<tr>'+this.getTdSpan(iSpan)+'<td colspan="'+(this.maxColSpan-iSpan)+'">'+sAtr+'</td></tr>';
}
}
sOut = sOut+sAtr;
sOut = sOut+sChd;
if ( sView != 'TABLE' && oParent.nodeType != 3 && iChd > 0 ) {
var sTmpDivs = '<div class="expander" onclick="x(this);">-</div>\n';
if ( iSpan != 0 && (this.maxColSpan-iSpan ) >= 2 ) {
sTmpDivs = '<div class="expander-open">\n'+sTmpDivs;
}
sOut = sTmpDivs+sOut+'\n';
} else if ( sView != 'TABLE' && oParent.nodeType != 3 && iChd == 0 ) {
sOut = '<div>'+sOut+'</div>\n';
}
if ( iChd > 0 ) {
if ( sView == 'TABLE' ) {
sOut = sOut+'<tr>'+this.getTdSpan(iSpan)+'<td colspan="'+(this.maxColSpan-iSpan)+'"></<span class="start-tag">'+oParent.nodeName+'</span>></td></tr>\n';
} else {
if ( iSpan == 0 ) {
sOut = sOut+'</<span class="end-tag">'+oParent.nodeName+'</span>>\n';
} else {
sOut = sOut+'</<span class="end-tag">'+oParent.nodeName+'</span>>\n</div>\n';
}
}
}
return sOut;
},
attrib2html: function( oParent ) {
var sOut = '';
var sNode = '';
var nodeName = oParent.nodeName;
var iAttr = oParent.attributes.length;
var attName = '';
var attVal = '';
sNode = sNode+'<<span class="start-tag">'+nodeName+'</span>';
for ( j=0; j<iAttr; j++ ) {
attName = oParent.attributes[j].nodeName;
attVal = oParent.attributes[j].nodeValue;
sNode = sNode+' <span class="attribute-name">'+attName+'</span>="<span class="attribute-value">'+attVal+'</span>"';
}
if ( oParent.childNodes.length > 0 ) {
sNode = sNode+'>\n';
} else {
sNode = sNode+'/>';
}
sOut = sOut+sNode;
return sOut;
},
getTdSpan: function( iSpan ) {
var sOut = '';
for ( var i=0; i<iSpan; i++ ) {
sOut = sOut+'<td> </td>';
}
return sOut;
}
});
################# style.css ########################
@import "resource://gre/res/viewsource.css";
#header {
background-color:#CCCCCC;
border-bottom:3px solid black;
margin-bottom:1em;
padding:0.5em;
}
.expander-content {
padding-left:1em;
}
.expander {
-moz-user-select:none;
cursor:pointer;
display:inline-block;
margin-left:-1em;
text-align:center;
vertical-align:top;
width:1em;
}
#top .expander-open, #top .expander-closed {
margin-left:1em;
}
.expander-closed .expander-content {
display:none;
}
.comment {
font-family:monospace;
white-space:pre;
}