- 开始
经常看见一些javascript实现的treeview,很多人都觉得比较复杂,后面我将用javascript通过一些例子,从简到繁,从易到难,带大家实现一个完整,有应用价值的treeview. - 我们开始吧
下面是一个简单的例子:
<html>
<head>
<title>tree view test</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta name="KEYWORDS" content="html,xml,javascript"/>
</head>
<style>
body {font-size:12px}
.{font-family:arial;font-size:12px}
h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
.hdr{
background-color:lightgrey;
margin-bottom:10px;
padding-left:10px;
}
</style>
<script>
var imgpath = "../imgs/";
function PopItem(itemid,mark)
{
if(document.all[itemid].style.display=='none')
{
document.all[itemid].style.display="block";
//变+号为-号
if(document.all[mark].innerHTML=='+')
document.all[mark].innerHTML='-';
//document.all[itemid].style.display="yes";
}
else
{
document.all[itemid].style.display="none";
//变-号为+号
if(document.all[mark].innerHTML=='-')
document.all[mark].innerHTML='+';
}
}
<!--οncοntextmenu="return false"-->
</script>
<body >
<div>放飞梦想 JavaScript Tree sample 1</div>
<p>
<h4>在html页面上显示树视图,其实就识用一些div原始,进行层叠,隐藏或者显示下一层div</h4>
<h4>1.用table按照树形排列</h4>
<h4>2.在每一层添加隐藏和显示脚本</h4>
<h4>3.总之,动态的树也是通过在服务器端生成这样的树状结构的数据,显示在页面上.</h4>
</p>
<div id="treeview" style="width:250; height:300;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;">
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0 >
<tbody>
<tr height="18" onClick="return PopItem('item02','mark1')" style="FONT-SIZE: 10pt; CURSOR: hand">
<td id="mark1" width="18">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Books</td>
</tr>
</tbody>
<tbody id="item02" Style="display:none">
<tr Style="display:block">
<td > </td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item03','mark2')" >
<td id="mark2">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Mystery & Thrillers</td>
</tr>
</tbody>
<tbody id="item03" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item04','mark3')">
<td width="18" id="mark3">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Lawrence Block</td>
</tr>
</tbody>
<tbody id="item04" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>All the Flowers Are Dying</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Burglar on the Prowl</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Plot Thickens</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Grifter's Game</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Burglar Who Thought He Was Bogart</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item05','mark4')">
<td id="mark4">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Robert Crais</td>
</tr>
</tbody>
<tbody id="item05" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Forgotten Man</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Stalking the Angel</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Free Fall</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Sunset Express</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Hostage</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Ian Rankin</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>James Patterson</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Nancy Atherton</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr Style="display:block">
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item06','mark5')">
<td id="mark5">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>History</td>
</tr>
</tbody>
<tbody id="item06" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>John Mack Faragher</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Jim Dwyer</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Larry Schweikart</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>R. Lee Ermey</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr Style="display:block">
<td > </td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item07','mark6')">
<td id="mark6">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Horror</td>
</tr>
</tbody>
<tbody id="item07" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Stephen King</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item08','mark7')">
<td id="mark7">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Dan Brown</td>
</tr>
</tbody>
<tbody id="item08" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Angels & Demons</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Deception Point</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Digital Fortress</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Da Vinci Code</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Deception Point</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tobdy>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Mary Janice Davidson</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Katie Macalister</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr >
<td > </td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item09','mark8')">
<td id="mark8">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Science Fiction & Fantasy</td>
</tr>
</tbody>
<tbody id="item09" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Audrey Niffenegger</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Philip Roth</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr Style="display:block">
<td > </td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item10','mark9')">
<td id="mark9">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Sport</td>
</tr>
</tbody>
<tbody id="item10" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Bill Reynolds</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr Style="display:block">
<td > </td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item11','mark10')">
<td id="mark10">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Teens</td>
</tr>
</tbody>
<tbody id="item11" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="18" onClick="return PopItem('item12','mark11')">
<td id="mark11">+</td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Joss Whedon</td>
</tr>
</tbody>
<tbody id="item12" Style="display:none">
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Astonishing X-Men</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Joss Whedon: The Genius Behind Buffy</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Fray</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Tales Of The Vampires</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Harvest</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Meg Cabot</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Garth Nix</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="18"></td>
<td colSpan=2>
<table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="18"></td>
<td style="DISPLAY:none"><input type="checkbox"/></td>
<td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Ann Brashares</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</head>
</html> - 总结
上面这个treeview很丑陋,实现很简单.就是通过一些表格嵌套来实现,在节点上通过添加onclick事件函数来控制下一级所有节点的显示.
相信大家能够很容易看懂这个例子.
但是,怎样动态显示treeview呢?其实动态页面的显示,最后都是静态的html显示在ie上,可以在服务端,不管是asp,还是jsp,将树的内容写到页面上,根据不同的情况显示tree的内容.
比如:一个公司的组织架构,可以在服务器端程序把公司的组织架构查询出来,然后out.print在页面上,返回给客户端ie;商品的类目也可以动态的查询出来,显示在treeview上.
javascript实现tree视图(一).简单静态树
最新推荐文章于 2024-06-29 10:00:00 发布