不看会后悔的Windows XP之经验谈	简单快捷DIY实用家庭影院

如何实现树形列表（不是树形控件，是多列的列表），并且一次不是显示整个列表，需要层层展开

楼主zhoudesheng（zds）2006-03-22 09:46:33 在 .NET技术 / ASP.NET 提问

如何实现树形列表（不是树形控件，是多列的列表），并且一次不是显示整个列表，需要层层展开问题点数：20、回复次数：12Top

1 楼sun8087（.Net@ChangZhou）回复于 2006-03-22 22:24:32 得分 0

能给一个示例图看看呢Top

2 楼boy_north（北方的豹子）回复于 2006-03-22 22:55:29 得分 10

用JAVASCRIPT生成树
<script language="JavaScript">
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;

if (ver4) {
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}
else {
write(".child {display:none}")
}
write("</STYLE>");
}
}

function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}

function arrange() {
nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}

function initIt(){
if (!ver4) return;
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
whichEl = divColl(i);
if (whichEl.className == "child") whichEl.style.display = "none";
}
}
}

function expandIt(el) {
if (!ver4) return;
if (IE4) {
whichEl = eval(el + "Child");
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
}
else {
whichEl.style.display = "none";
}
}
else {
whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
}
else {
whichEl.visibility = "hide";
}
arrange();
}
}
onload = initIt;
</script>
</font></p>
<div id="KB1Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB1'); return false" ><img src="img/plus.gif" border=0>文件夹一</a></div>
<div id="KB1Child" class="child">　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面一</a><br>
　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15" height="11"><img src="img/open.gif" border=0>页面二</a><br>
　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15" height="11"><img src="img/open.gif" border=0>页面三</a></div>
<div id="KB2Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB2'); return false" ><img src="img/plus.gif" border=0>文件夹二</a></div>
<div id="KB2Child" class="child">　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15" height="11"><img src="img/open.gif" border=0>页面一</a><br>
　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面二</a><br>
　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15" height="11"><img src="img/open.gif" border=0>页面三</a></div>
<div id="KB3Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB3'); return false" ><img src="img/plus.gif" border=0>文件夹三</a></div>
<div id="KB3Child" class="child"> 　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面一</a><br>
　　　　　　<a href="sample.htm" target="_blank" ><img src="img/open.gif" border=0>页面二</a><br>
　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面三</a></div>
<script language="JavaScript">
if (NS4) {
firstEl = "KB1Parent";
firstInd = getIndex(firstEl);
arrange();
}
</script>
Top

3 楼boy_north（北方的豹子）回复于 2006-03-22 22:55:59 得分 0

你用这个代码看看是不是你想的效果,如果是自己再改吧
哈哈Top

4 楼mail_ricklee（NickLee）回复于 2006-03-23 09:44:07 得分 0

NickLee.Web.UI.TreeView可以嵌套模版列，里面嵌一个dataGrid,循环绑定Top

5 楼zhoudesheng（zds）回复于 2006-03-23 11:35:52 得分 0

多谢了，我调试一下Top

6 楼zhoudesheng（zds）回复于 2006-03-23 17:32:23 得分 0

boy_north,你好，我看了你的脚本，实现树是没有问题的，但是我要求的是一个多列的结构
比如：
名称日期作者
a 2005-09-12 p
b 2005-09-12 q

单击 a 时，将张开b的数据Top

7 楼zhoudesheng（zds）回复于 2006-03-24 10:54:09 得分 0

大家帮忙看看Top

8 楼ysdxfhb（学习总得有个态度吧）回复于 2006-03-31 11:39:13 得分 10

可以还是使用树形控件给你代码看看记住 ShowLines="false" 然后用模板这个用的是ComponentArt的Web.UI 2006.1 for ASP.NET第三方控件
<ComponentArt:TreeView id="TreeView1" Width="430" Height="500"
CssClass="TreeView"
ExpandCollapseImageWidth="15"
ExpandCollapseImageHeight="15"
NodeIndent="16"
ItemSpacing="3"
SpacerImageUrl="images/spacer.gif"
CollapseImageUrl="images/exp.gif"
ExpandImageUrl="images/col.gif"
ShowLines="false"
EnableViewState="false"
SiteMapXmlFile="ObjectModel.xml"
RenderRootNodeInclude="true"
runat="server">
<ClientTemplates>
<ComponentArt:ClientTemplate id="ClassTemplate">
<table class="ClassBox" title="## DataItem.GetProperty('description') ##" cellpadding="0" cellspacing="0" border="0">
<tr>
<td nowrap class="PropertyLabel">## DataItem.GetProperty('name') ## :</td>
<td class="TypeLabel">## DataItem.GetProperty('class') ##</td>
</tr>
</table>
</ComponentArt:ClientTemplate>

<ComponentArt:ClientTemplate id="CollectionTemplate">
<table class="CollectionBox" title="## DataItem.GetProperty('description') ##" cellpadding="0" cellspacing="0" border="0">
<tr>
<td nowrap class="PropertyLabel">## DataItem.GetProperty('name') ## :</td>
<td class="TypeLabel">## DataItem.GetProperty('class') ##</td>
</tr>
</table>
</ComponentArt:ClientTemplate>

<ComponentArt:ClientTemplate id="ValueTemplate">
<Template>
<table class="ValueBox" title="## DataItem.GetProperty('description') ##" cellpadding="0" cellspacing="0" border="0">
<tr>
<td nowrap class="PropertyLabel">## DataItem.GetProperty('name') ## :</td>
<td class="TypeLabel">## DataItem.GetProperty('class') ##</td>
</tr>
</table>
</Template>
</ComponentArt:ClientTemplate>

<ComponentArt:ClientTemplate id="GroupTemplate">
<Template>
<table width="100%" class="GroupBox" title="## DataItem.GetProperty('description') ##" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="PropertyLabel">## DataItem.GetProperty('name') ##</td>
</tr>
</table>
</Template>
</ComponentArt:ClientTemplate>
</ClientTemplates>
</ComponentArt:TreeView>

ObjectModel.xml里面随便自己写吧给你一点参照的
<items>
<item name="WebChart" class="WebChart" description="" ClientTemplateId="ClassTemplate" Expanded="true">
<item name="Chart Styles" description="" ClientTemplateId="GroupTemplate" ExtendNodeCell="true">
<item name="DataPointLabelStyles" class="DataPointLabelStyleCollection" description="Collection of predefined and user defined data point label styles " ClientTemplateId="CollectionTemplate">
<item class="DataPointLabelStyle" ClientTemplateId="ClassTemplate">
<item name="Pie Specific Style" description="" ClientTemplateId="GroupTemplate" ExtendNodeCell="true">
<item name="LineStyle" class="String" description="Line style for external labels" ClientTemplateId="ClassTemplate" />
<item name="PieLabelPosition" class="PieLabelPositionKind" description="Label position within pie slice" ClientTemplateId="ValueTemplate" />
<item name="PixelsToLabel" class="Double" description="Distance between line and label" ClientTemplateId="ValueTemplate" />
<item name="RelativeLine1Length" class="Double" description="Relative length of the first line segment" ClientTemplateId="ValueTemplate" />
<item name="RelativeLine1Start" class="Double" description="Relative starting point of the first line segment (between 0 and 2)" ClientTemplateId="ValueTemplate" />
<item name="RelativeLine2Length" class="Double" description="Relative length of the second line segment" ClientTemplateId="ValueTemplate" />
<item name="RelativeOffsetOfAlignedLabels" class="Double" description="obsolete" ClientTemplateId="ValueTemplate" />
</item>
<item name="General" description="" ClientTemplateId="GroupTemplate" ExtendNodeCell="true">
<item name="DataPointLabelKind" class="DataPointLabelKind" description="Data point category" ClientTemplateId="ValueTemplate" />
<item name="FormattingString" class="String" description="The formatting string of the label." ClientTemplateId="ClassTemplate" />
<item name="LabelPosition" class="LabelPositionKind" description="Label position" ClientTemplateId="ValueTemplate" />
<item name="LocalRefPoint" class="Vector3D" description="Reference point of label in relative item coordinates" ClientTemplateId="ValueTemplate" />
<item name="Name" class="String" description="Name of the text style." ClientTemplateId="ClassTemplate" />
</item>Top

9 楼zhoudesheng（zds）回复于 2006-04-03 10:04:08 得分 0

楼上的朋友，谢谢你的帮助，ComponentArt 是开源的吗，我去找找Top

10 楼zhoudesheng（zds）回复于 2006-04-11 09:17:32 得分 0

大家有没有更好的办法呀，ComponentArt 这个控件不是免费的呀Top

11 楼zhoudesheng（zds）回复于 2006-04-20 16:33:21 得分 0

找到解决办法了Top

12 楼chenlq4251（小龙）回复于 2006-04-27 10:54:42 得分 0

什么办法，能否告知？我也想要。Top