XML to tree XML tree

I sent an HTML to tree and then an XML to tree.

 

The following code is used:

/* Copyright: Copyright (c) 2009 system name: tree control file name: xml2tree. JS Author: Devin completion date: 2009-12-22 compression mode: jspacker Main Page: http://www.chaige.net */var xml2tree = function (INI) {var $ = Document, _ this = This, $ = 'documentelement'; this. gettitle = ini. gettitle | string; this. click = ini. click | string; this. box = ini. shell. big? $. Getelementbyid (INI. Shell): ini. Shell; this. Edit = ini. Edit? True: false; this. Color = ini. color? INI. Color: '# V'; this. Row = ini. Row? Ini. row: ''; this. box. innerhtml = '<P style = "margin-left: 10px">  loading... <p> '; this. getvalue = ini. getvalue | string;/* asynchronously download XML (chrome cannot create xmldoc, constructed using Ajax) */This. xml = !! $. All? (New activexobject ('Microsoft. xmldom '): (New XMLHttpRequest (); this. XML. onreadystatechange = function () {If (_ this. XML. readystate = 4) {_ this. box. innerhtml = ''; _ this. addsub ($. all? _ This. xml [$]: _ this. xml. responsexml [$], _ this. Box) }}if (!! $. All) {This. XML. async = true; this. XML. load (INI. URL)} else {This. XML. open ("get", ini. URL, true); this. XML. send (null) };}/* shared interface */xml2tree. prototype = {Folder: function (node) {var UI = function (_) {return document. createelement (_)}, caption = UI ('dt'), shell = UI ('dl '), body = UI ('dd'), $ = xml2tree. INI; shell. appendchild (Caption); shell. appendchild (body); var folderico = This. selectico ($. f Older, $. node, xml2tree. haschild (node); caption. innerhtml = (this. Edit? '<Label>' + this. expand (this. getvalue. call (node) + '</label>': '') + this. getlineico (node) + this. gethasico (node) + folderico + '<a href = "javascript: //"> <span>' + this. gettitle. call (node) + '</span> </a>'; caption. mapnode = node; var CO = This. color; caption. onmouseover = function () {This. style. backgroundcolor = Co;} caption. onmouseout = function () {This. style. backgroundcolor = '';} return {'Shell': shell, 'caption ': caption} ;}, addsub: function (node, shell) {If (node = NULL) return; var nodes = node. childnodes, _ tree = this; for (VAR I = 0; I <nodes. length; I ++) {If (nodes [I]. nodetype! = 1) continue;/* for FF find textnode */VaR _ = This. folder (nodes [I]); shell. appendchild (_. shell );_. caption. onclick = function (e) {var $ = xml2tree, childshell = $. next (this); If (this. mapnode) {var wrap = This. parentnode. getelementsbytagname ('dd') [0]; If (xml2tree. haschild (this. mapnode) {_ tree. addsub (this. mapnode, wrap); $. toggle (this, true)}; this. mapnode = NULL;} else {If (! Childshell) return; If (xml2tree. haschild (childshell) {var hide = childshell. style. Display = 'none'; childshell. style. Display = hide? '': 'None'; $. toggle (this, hide) ;};}; E = E | window. event; var Se = E. srcelement | e.tar get; If (SE. tagname. touppercase () = 'span ') {var Title = Se. innerhtml; If (! Xml2tree. haschild (childshell) {_ tree. click. call (SE, title, false);/* click the leaf node. This is reset to span */} else {_ tree. click. call (childshell, title, true);/* click the folder node. This is reset to the sub-node's shell dd */}};}, getlineico: function (node) {var ICOS = [], root = node. ownerdocument; If (! Root) return NULL; node = node. parentnode; while (node. parentnode! = Root) {var $ = xml2tree, IMG = This. selectico ($. ini. Line, $. ini. Empty ,!! $. Next (node); ICOS = [img]. concat (ICOS); node = node. parentnode;} return ICOS. join ('') ;}, gethasico: function (node) {var last = !! Xml2tree. Next (node), $ = xml2tree. ini; return xml2tree. haschild (node )? This. selectico ($. plus, $. plusbottom, last): This. selectico ($. join, $. joinbottom, last)}, expand: function (I) {var r = This. row, S = []; for (var k = 0; k <R. length; k ++) {var url = R [k] [0]. replace ('{0}', I); S. push ('<a href = "' + URL + '">' + R [k] [1] + '</a>' + (k = R. length-1? '': '|');} Return S. join ('') ;}, selectico: function (_ 1, _ 2, bool) {return ''};/* static interface */xml2tree. INI = {root: 'ui/base.gif ', folder: 'ui/folder.gif', folderopen: 'ui/folderopen.gif ', node: 'ui/page.gif', empty: 'ui/empty.gif ', line: 'ui/line.gif', join: 'ui/join.gif ', joinbottom: 'ui/joinbottom.gif', plus: 'ui/plus.gif ', plusbottom: 'ui/plusbottom.gif ', minus: 'ui/minus.gif', minusbottom: 'ui/minusbottom.gif ', nlplus: 'ui/nolines_plus.g If ', nlminus: 'ui/nolines_minus.gif'};/* icon preload */xml2tree. prevload = function () {for (var key in this. INI) {var $ = new image (); $. src = This. INI [Key] ;}}; xml2tree. next = function (node) {var $ = node, _ = 'nextsibling'; For ($ = $ [_]; $ = $ [_]) {if ($. nodetype = 1) {return $ }}; return NULL ;}; xml2tree. haschild = function (node) {var $ = node. childnodes; For (VAR I = 0; I <$. length; I + +) If ($ [I]. nodetype = 1) return true; return false ;}; xml2tree. toggle = function (node, isopen) {var IMGs = node. getelementsbytagname ('img '), F = IMGs. length-1, $ = xml2tree. INI; IMGs [f]. src = isopen? $. Folderopen: $. folder; If (this. Next (node. parentnode) {IMGs [f-1]. src = isopen? $. Minus: $. Plus;} else {IMGs [f-1]. src = isopen? $. Minusbottom: $. plusbottom ;}};/* generate the instance tree parameter: URL: XML address shell: Tree container loading: Download effect htmlgettitle: Title source attribute operation this reset to XML nodechick: click events of nodes or leaf nodes (you can get the title parameter, isfolder, and reset this) */xml2tree. prevload ();

HTML code

<Div id = "treeviewtreeview1"> </div> <Div class = "xmltotree"> 
JS call
New xml2tree ({URL: 'city. xml', shell: 'treeview1', EDIT: True, color: '# e9f5ff', row: [['city. aspx? Action = add & I = {0} & language = Chinese ', 'add'], ['city. aspx? Action = edit & I = {0} & language = Chinese ', 'modify'], ['city. aspx? Action = Delete & I = {0} & language = Chinese ', 'delete'], gettitle: function () {return this. getattribute ('T')}, getvalue: function () {return this. getattribute ('V')}, click: function (title, isfolder ){}});
 

Click to download
~!~~~ Migrant workers' lives
Original Code. For reprint, please contact Chai Ge !!!