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

Question

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

Answer 1

用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>

Answer 2

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

Answer 3

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

Answer 4

可以还是使用树形控件 给你代码看看 记住 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>

Answer 5

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

Answer 6

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