zoukankan      html  css  js  c++  java
  • DataList实现折叠效果

    先看图:

    这个功能可以用后台管理中(区域的绑定,商品大类,商品小类,商品信息的管理);

    实现原理如下:

    先建设一个数据表如:高校栏目表

    截图如下:

    ParentID保存父ID的节点,ChildID保存子ID的节点,

    如果某一行中的ParentID不为空,子节点为空,说明此行为父节点;而子节点的ParentID对应相应的父节点。

    前台代码
    1 <div>
    2 <asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList1_ItemDataBound" >
    3 <HeaderTemplate>
    4 <table>
    5 <thead style="background-color:Silver">
    6 <td width="50px">
    7 操作</td>
    8 <td width="100px">
    9 名称</td>
    10 <td >
    11 时间</td>
    12 </thead>
    13 </HeaderTemplate>
    14 <ItemTemplate>
    15 <tr style="background-color:#cccccc">
    16 <td align="left" width="50px">
    17 <img src="expand.gif" onclick="expand('id1_<%#Eval("id") %>')" />
    18 </td>
    19 <td align="left" width="100px">
    20 <%#Eval("Name") %>
    21 </td>
    22 <td align="left" width="100px">
    23 <%#Eval("DataOf", "{0:yyyy-MM-dd}")%>
    24 </td>
    25 </tr>
    26 <tr id="id1_<%#Eval("id") %>" style="display:none; background-color:InfoBackground" >
    27 <td colspan="3">
    28 <asp:DataList ID="DataList2" runat="server">
    29 <ItemTemplate>
    30 <tr>
    31 <td align="left" width="50px">
    32 <img src="collapse.gif" />
    33 </td>
    34 <td align="left" width="100px">
    35 <%#Eval("Name") %>
    36 </td>
    37 <td align="left" width="100px">
    38 <%#Eval("DataOf","{0:yyyy-MM-dd}") %>
    39 </td>
    40 </tr>
    41 </ItemTemplate>
    42 </asp:DataList>
    43 </td>
    44 </tr>
    45 </ItemTemplate>
    46 <FooterTemplate>
    47 </table>
    48 </FooterTemplate>
    49 </asp:DataList>
    50 </div>
     
    可以看到 用到了两个DataList数据控件,且用table布局(用DIV布局也可以);
    最主要的一点 可以看到 第二个<tr>标签中 设置其id="id1_<%#Eval("id")%>",这是因为符合条件的数据可能显示多行,只能给其起一个不同的名字作为id,
    为方便操作,所以就用这种方式。
     
    //js代码如下:
     

    function expand(a)
        {

        if(document.getElementById(a).style.display=='none')
        {document.getElementById(a).style.display='block';
        }
        else
        {document.getElementById(a).style.display='none';
        }
        }
       

     

    后台代码就很平常啦!,在OnItemDataBound事件中,做了对第二个datalist数据控件的绑定操作。

    这个不会出现展开或折叠节点是,发生数据的回发。

     

     

     

     

  • 相关阅读:
    【干货分享】流程DEMO-制度发文和干部任免
    如何让流程表单禁用选人控件,但可以通过代码赋值?
    让任正非愤怒的到底是华为财管团队还是流程本身?
    品牌营销:不要Beat,要逼格!
    流程再造:以信息化管理解救“中国制造”
    三星Note 7停产,原来是吃了流程的亏
    BAT“搅局”B2B市场,CIO们准备好了吗?
    胡理辉:风电王国里的流程管控人
    周义:建设流程管理系统 我还在不停努力
    步步高彭雄:弄潮“互联网+零售”从端到端流程开始
  • 原文地址:https://www.cnblogs.com/hfliyi/p/2040024.html
Copyright © 2011-2022 走看看