天天看點
傳回

XML to tree XML 樹

前面發了一個 html to tree 再發一個 xml to tree

XML to tree XML 樹

以下為代碼

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183

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"><img src="/load3.gif" /> loading...<p>'

;

this

.getValue = ini.getValue || String;

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

)

};

}

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($.folder, $.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

;

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.target;

if

(sE.tagName.toUpperCase() ==

'SPAN'

) {

var

title = sE.innerHTML;

if

(!XML2Tree.hasChild(childShell)) {

_tree.click.call(sE, title,

false

);

}

else

{

_tree.click.call(childShell, title,

true

);

}

}

};

};

},

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

'<img src="'

+ (bool ? _1 : _2) +

'" align="absimddle" />'

}

};

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.gif'

,

nlMinus:

'ui/nolines_minus.gif'

};

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;

}

};

XML2Tree.prevLoad();

HTML代碼

?

1 2 3 4 5

<

div

id

=

"TreeViewTreeView1"

></

div

>

<

div

class

=

"xmlToTree"

>  

<

h3

>省市</

h3

>

<

div

id

=

"TreeView1"

></

div

>

</

div

>

JS調用

?

1 2 3 4 5 6 7 8 9 10 11

new

XML2Tree({

url:

'city.xml'

,

shell:

'TreeView1'

,

edit:

true

,

color:

'#E9F5FF'

,

row: [[

'city.aspx?action=add&i={0}&Language=Chinese'

,

'添加'

], [

'city.aspx?action=edit&i={0}&Language=Chinese'

,

'修改'

], [

'city.aspx?action=delete&i={0}&Language=Chinese'

,

'删除'

]],

getTitle:

function

() {

return

this

.getAttribute(

't'

) },

getValue:

function

() {

return

this

.getAttribute(

'v'

) },

click:

function

(title, isFolder) {

}

});

下載下傳位址

點我下載下傳

~!~~~ 民工的命

原創代碼,轉載請聯系 柴哥!!!

.net SharePoint MOSS
上一篇: Microsoft Office SharePoint Server 2007案例實戰開發 一書出版
下一篇: 步步為營 SharePoint 開發學習筆記系列 三、建立Web Application和建立Site

繼續閱讀