一步一步教你在GridView中实现可收缩的面板


1、创建一个TestDB数据库:

  添加一张表Table_1,并向其中添加一些数据,表结构如下图。

  2、新建一个asp.net网站。

  在Default.aspx上拖放一个GridView。在页面上加入下面切换层的js代码:

 function toggleLayer(whichLayer)
 {     
     if (document.getElementById)
     {
      // this is the way the standards work
      var style2 = document.getElementById(whichLayer).style;
      style2.display = style2.display? "":"block";
     }
     else if (document.all)
     {
      // this is the way old msie versions work
      var style2 = document.all[whichLayer].style;
      style2.display = style2.display? "":"block";
     }
     else if (document.layers)
     {
      // this is the way nn4 works
      var style2 = document.layers[whichLayer].style;
      style2.display = style2.display? "":"block";
     }
    }

  3、定义面板:

  面板的css样式:

.DivPanelTextBold
{
    font-size: 8pt;
    font-weight:bold;
    color: #000000;
    font-family: Verdana, Helvetica, sans;
}
.DivPanel
{
    display:none;
    background-color:#F5F5F5;
    white-space: nowrap;
    border-bottom: #0072b4 1px solid;
    border-left: #0072b4 1px solid;
    border-top: #0072b4 1px solid;
    border-right: #0072b4 1px solid;
    width:90%;
    vertical-align:middle;
    
}

面板的HTML代码如下:

 <div>
    <a href="javascript:toggleLayer('row1');" class=DivPanelTextBold>a</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <div id='row1' class='DivPanel'>
    <TABLE cellSpacing='2' cellPadding='2' width='100%' border='0'>
    <tr>
    <td class='La_Ma_Text'>&nbsp;</td>
    <td align=right>
    <a href="javascript:toggleLayer('row1');" class=La_Ma_Link>
    <img src='Close.gif' border=0 align='absmiddle'>
    </a>
    </td>
    </tr>
    <tr>
    <td class='DivPanelText' width='158px'>&nbsp;Cell Value: </td>
    <td class='DivPanelText' width='152px'>a</td>
    </tr>
    <tr>
    <td>
    <b> Something </b>
    </td>
    </tr>
    </TABLE>
    </div>

  收起的面板,如下图:

  缩放的面板,如下图:

  4、将面板绑定到GridView上。

  将面板的HTML代码绑定到Datatable的行上,并将Datatable绑定到GridView上,后台代码如下:

 private void LoadDT()
    {
        try
        {
            ds = new DataSet();
            sqlCMD = new SqlCommand("SELECT PKID,EmpId,SubModule FROM Table_1", sqlConn);
            sqlDA.SelectCommand = sqlCMD;
            sqlDA.Fill(ds);
            if (ds.Tables[0].Rows.Count > 0)
            {
                DataColumn dc1 = new DataColumn();
                dc1.DataType = System.Type.GetType("System.String");
                dc1.ColumnName = "PKID";
                DataColumn dc2 = new DataColumn();
                dc2.DataType = System.Type.GetType("System.String");
                dc2.ColumnName = "SubModule";
                dt.Columns.Add(dc1);
                dt.Columns.Add(dc2);

                foreach (DataRow dr in ds.Tables[0].Rows)
                {
                    myDr = dt.NewRow();
                    myDr[0] = dr[0].ToString();
                    myDr[1] = "<a href=\"javascript:toggleLayer('row" + count + "');\" class=DivPanelTextBold>" + dr["SubModule"].ToString() + "</a>"
                        + "&nbsp;&nbsp;&nbsp;&nbsp;<div id='row" + count + "' class='DivPanel'>"
                        + "<TABLE cellSpacing='2' cellPadding='2' width='100%' border='0'>"
                        + "<tr><td class='La_Ma_Text'>&nbsp;</td><td align=right><a href=\"javascript:toggleLayer('row" + count + "');\" class=La_Ma_Link><img src='Close.gif' border=0 align='absmiddle'></a></td></tr>";
                    myDr[1] = myDr[1] + "<tr><td class='DivPanelText' width='158px'>&nbsp;Cell Value: </td><td class='DivPanelText' width='152px'>" + dr["SubModule"].ToString() + "</td></tr>";
                    myDr[1] = myDr[1] + "<tr><td><b> Something </b></td></tr>";
                    myDr[1] = myDr[1] + "</TABLE>" + "</div><br>";
                    //dsa.dispose();
                    dt.Rows.Add(myDr);
                    count++;
                }
            }
            else
            {
           
            }
            this.GridView1.DataSource = dt;
            this.GridView1.DataBind();
            ds.Dispose();
        }
        catch (Exception ex)
        {
           
        }
    }

  数据显示:

    protected void GridView1_DataBound(object sender, EventArgs e)
    {
        foreach (TableRow trow in GridView1.Rows)
        {
            foreach (TableCell tcell in trow.Cells)
            {
                tcell.Text = HttpUtility.HtmlDecode(tcell.Text);                
            }
        }
    }

  5、最终效果:

 

  备注:代码是电脑上找到的,原出处不详

本文示例源代码或素材下载



相关阅读:
图片上传的WebForm(自动生成所略图)
asp.net导航条技术
js 获取网络图片的高度和宽度的实现方法(变通了下)
用Windows XP自带工具制作自解压文件
对Android平台Linux部分的初步理解
DEDECMSv5.6 tags.php标签不能按照时间排序的问题
ASP中用ajax方式获得session的实现代码
编写易于管理的css的技巧
页面调用单个swf文件,嵌套出多个方法。
Linux操作系统下运行命令时CTRL+Z的作用
javascript 双击文本框编辑功能代码
VBS伪造HTTP-REFERER的实现方法
DeDeCMS采集问题与技巧集锦
jQuery 1.4:15个新特性和优化增强
快速导航

Copyright © 2016 phpStudy |