ASP.NET GridView 嵌入可折叠面板的列

• 下载源码 - 6.07 KB

引言

我的工作要求我阅读相当多的由其他人编写的代码，多年来我发现，在显示大量数据时，gridview 存在一些问题。 gridview 中可以有许多列，用于显示不需要的和需要的列，带有水平滚动条。 在某些情况下，我们可能只需要显示几列，如果需要，我们将不得不提供详细信息。 在本文中，我将解释如何在 ASP.NET GridView 的列中添加可折叠面板。 本文将帮助读者了解如何在 GridView 列中集成可折叠面板。

背景

在上面的示例中，我附上了两张图片，它们将解释关于这篇文章的所有内容。 我在 ASP.NET gridview 中显示了两列。 两列的值都来自 SQL SERVER 2005 数据库。 屏幕 1 是页面加载时的外观。 网格中的第一列是只读列。 网格中的第二列是链接列，可折叠面板集成到其中。 当用户将鼠标悬停在第二列中的文本上时，鼠标图标将更改为手形图标，单击时，面板展开以显示来自数据库或硬编码文本的信息。 文本的展开和折叠完全在客户端进行。

Using the Code

在本例中，我尝试创建两个数据列并将它们添加到数据表中。 我将从填充的数据集中填充数据列。 任何使用此代码的用户都可以创建表并使用 zip 文件中提供的插入脚本来测试此应用程序，或者使用您自己的技术来获取数据。 获取数据后，现在轮到我们来填充数据列了。 为了填充数据列，我将遍历数据表的 datarows。 如前所述，我们在 datagrid 中有两列。 我用从数据库返回的文本填充第一列。 我正在将一个可折叠面板附加到第二列。

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}

现在让我告诉您如何添加可折叠面板。 它只是一个简单的 div 标签，与名为 toggleLayer 的 JavaScript 函数一起添加到锚标签中。 由于 C# 代码包含 HTML 标签，因此我无法在此处显示代码。 toggleLayer 是一个 JavaScript 函数，它将 rowId 作为参数，并显示或隐藏相应的面板。 由于 Div 标签是在 foreach 循环内动态创建的，因此每个 div 标签在其页面上都有自己的 uniqueId。

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>";
 
 dt.Rows.Add(myDr);
 count++;
}

在上面的 foreach 循环中，我们正在遍历每个表格行，并创建一个新的 datarow，并将数据附加到它。 像往常一样，对于第一列，我将附加从数据库中检索到的任何内容。 对于第二列，myDr[1]，我正在分配一个锚标记以及 div 标记，每个 div 标记都有唯一的 Id。 当网格绑定到页面时，当用户单击第二列中可用的任何链接时，它将调用 toggleLayer（如上所述）JavaScript 函数并传递 rowId。 因此，如果 div 标签处于折叠状态，它将展开以显示详细信息，否则它将折叠。 同样，我们可以将任何类型的 HTML 嵌入到任意数量的列中。

关注点

这是一种非常简单的技术，可以帮助开发人员获得最佳的 UI。
toggleLayer：JavaScript 函数，用于显示或隐藏相应的 div 标签。

历史 

这是我的初始版本。 如果您对本文有任何疑问，请给我发电子邮件，或在下面的讨论论坛中发表您的问题。