可折叠的 DataGrid 和 GridView 控件
2.43/5 (4投票s)
使一个普通的 ASP.NET DataGrid 和 GridView 在特定列上可折叠。
引言
对于 ASP.NET 初学者来说，有时很难将 JavaScript 函数与他们的服务器端控件结合使用。他们知道自己想做什么，但不知道如何做。当我必须让 DataGrid 在已排序的列上可折叠和展开时，就遇到了这个问题。我可以用嵌套的 DataGrid 来做到这一点，但缺点是每次点击都会回发。所以我创建了一个库，可以将任何 ASP.NET DataGrid（或 ASP.NET 2.0 中的 GridView）转换为客户端可折叠的 DataGrid，在我的 DataSet 的已排序列上。
如何使用 CollapsibleDatagrid.dll
上面第一个链接是 CollapsibleDataGrid.dll 和 JavaScript 文件 CollapsibleGrid.js，第二个链接是使用这个 CollapsibleDataGrid.dll 和 CollapsibleGrid.js 创建的示例演示项目。
在第二个链接中，您将获得以下内容
这里您会找到另一个 DLL，CollasibleGridView.dll。这与 CollapsibleDataGrid.dll 相同，但如果您使用的是 ASP.NET 2.0 的 GridView，则可以使用它。通过阅读以下部分，您可以轻松理解如何使用我的 CollapsibleDataGrid.dll 将您的 ASP.NET DataGrid 转换为可折叠的 DataGrid。
打开 Visual Studio .NET 并打开一个新的 ASP.NET 项目 CollapsibleDataGridDemo。删除默认网页并添加一个新网页 TestPage.aspx。现在在解决方案资源管理器中右键单击您的项目，并添加对 CollapsibleDataGrid.dll 的引用。
现在通过右键单击项目并使用 添加现有项 选项，将 JavaScript 文件 Collasiblegrid.js 添加到您的项目中。
现在，为了添加 JavaScript，请将此代码添加到 TestPage.aspx 页面的 <head> 标签中
<script type="text/javascript" src="CollapsibleGrid.js">
此 JavaScript 文件包含以下代码
//Created By:Mukesh Singhi on 29-Nov-2007
//For Collapsing and expanding rows
function ShowHideData(obj,crl_names,ColpsText,ExpText)
{
try
{
var RowIds=crl_names.split(",");
var val=obj.innerHTML;
if (val==ExpText)
{
for (var i=0;i<RowIds.length-1;i++)
{
document.getElementById(RowIds[i]).style.display = "block";
}
obj.innerHTML=ColpsText;
}
else
{
for (var i=0;i<RowIds.length-1;i++)
{
document.getElementById(RowIds[i]).style.display = "none";
}
obj.innerHTML=ExpText;
}
}
catch(err)
{
alert(err);
}
}
//For Collapsing all rows first time
function CollapseAllData(crl_names)
{
if (crl_names!="")
{
var RowIds=crl_names.split(",");
for (var i=0;i<RowIds.length-1;i++)
{
document.getElementById(RowIds[i]).click();
}
}
}
现在，将以下 .aspx 代码复制到 TestPage.aspx 中，其中包括一个 ASP.NET DataGrid 控件，现在我们希望它在 Name 列上可折叠，该列已排序。
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table id="table1">
<tr>
<td>
<asp:datagrid id="DgCollapsible" runat="server"
AutoGenerateColumns="false" BorderWidth="0" CellSpacing="1"
CellPadding="3" ShowFooter="True"
BorderStyle="None" Width="100%" AllowPaging="false">
<AlternatingItemStyle BorderWidth="1px" BorderStyle="Ridge"
BorderColor="#404040" BackColor="#E0E0E0"></AlternatingItemStyle>
<ItemStyle></ItemStyle>
<HeaderStyle BackColor="#FFE0C0"></HeaderStyle>
<FooterStyle></FooterStyle>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label Width="10px" runat="server" ID="ClickableCol"></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Name">
<ItemTemplate>
<asp:Label runat="server" ID="NamesCol">
<%#DataBinder.Eval(Container, "DataItem.Names").ToString()%>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="Dates" HeaderText="Date"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Add">
<ItemTemplate>
<asp:Button Runat="server" ID="btnCommand" Text="Add"></asp:Button>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Edit">
<ItemTemplate>
<a href="#" runat="server" id="linkCommand">Edit</a>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
</td>
</tr>
</table>
</form>
</body>
现在，您必须编写服务器端代码来使您的 DataGrid 可折叠。
Protected Function GetDataSetForCollapsibleDataGrid() As DataSet
Dim ds As DataSet = New DataSet
ds.Tables.Add("Main")
Dim arrDates() As String = {"03/21/2007", "03/21/2007", _
"03/21/2007", "04/10/2007", "05/11/2007", _
"05/11/2007", "06/11/2007", "04/10/2007", _
"05/11/2007", "05/11/2007", "03/21/2007", _
"04/10/2007", "05/11/2007", "05/11/2007", _
"06/11/2007", "04/10/2007", "05/11/2007", _
"05/11/2007", "05/11/2007", "05/11/2007"}
Dim arrNames() As String = {"Arun", "Arun", "Arun", _
"Atif", "Atif", "Atif", "Atif", _
"Mukesh", "Mukesh", "Nikesh", "Prem", _
"Prem", "Prem", "Prem", "Rakhi", _
"Rakhi", "Rakhi", "Rakhi", "Rakhi", "Rakhi"}
ds.Tables(0).Columns.Add("Dates")
ds.Tables(0).Columns.Add("Names")
Dim dr As DataRow
Dim i As Integer = 0
Do While (i < arrDates.Length)
dr = ds.Tables(0).NewRow
dr(0) = arrDates(i)
dr(1) = arrNames(i)
ds.Tables(0).Rows.Add(dr)
i = i + 1
Loop
Return ds
End Function
在这里，GetDataSetForCollapsibleDataGrid() 函数创建按名称排序的 DataSet。在实际场景中，这可以从数据库中获取。对于可折叠的 DataGrid，您需要按您希望使其可折叠的任何字段对 DataSet 进行排序。这里，DataSet 包含 Arun、Mukesh、Nikesh、Prem 和 Rakhi 等名称，并且是已排序的，现在我们将使 DataGrid 在这些名称上可折叠，这意味着相同名称的记录将在一起，并且可以通过单击进行折叠和展开。有关详细信息，请参见顶部的图像。
在准备好 DataSet 后，您可以使用 CollapsibleDatagrid 类。
Private Sub BindCollpsibleGrid()
Dim ds As DataSet = GetDataSetForCollapsibleDataGrid()
Dim objCollapsibleDataGrid As New _
CustomWebControl.CollapsibleDataGrid(DgCollapsible)
objCollapsibleDataGrid.DataSource = ds
objCollapsibleDataGrid.SortByFieldName = "Names"
objCollapsibleDataGrid.SortOnLength = 10
objCollapsibleDataGrid.SortByColumnID = "NamesCol"
objCollapsibleDataGrid.SortByCellBackColor = Drawing.Color.Brown
objCollapsibleDataGrid.SortByCellForeColor = Drawing.Color.White
objCollapsibleDataGrid.ClickableColumnID = "ClickableCol"
objCollapsibleDataGrid.ClickableCellBackColor = Drawing.Color.Blue
objCollapsibleDataGrid.ClickableCellForeColor = Drawing.Color.White
objCollapsibleDataGrid.Style = _
CustomWebControl.CollapsibleDataGridStyle.ExpandOnlyFirstRow
objCollapsibleDataGrid.ExpandableText = "+"
objCollapsibleDataGrid.CollapsibleText = "-"
objCollapsibleDataGrid.Bind()
End Sub
在 BindCollpsableGrid() 函数中，我们创建一个 CollapsibleDataGrid 对象：objCollapsibleDataGrid as new CustomWebControl.CollapsibleDataGrid(DgCollapsible)。这里，CollapsibleDataGrid 构造函数将原始 DataGrid（在此例中为 DgCollapsible）作为参数。
您需要设置 CollapsibleDataGrid 的许多属性。有些是必需的，有些是可选的。
创建 CollapsibleDataGrid 对象后，您需要将已排序的 DataSet 设置为 DataSource。SortByFieldName 是您 DataSet 所排序的字段名称，您希望使其可折叠。SortByColumnID 是您 DataGrid 的列 ID，已排序的 DataSet 字段将绑定到该列 ID。ClickableColumnID 是您 DataGrid 的列 ID（应该是第一列），您希望使其可单击以折叠和展开行。
有一个属性 SortOnLength，它是检查已排序列的值以进行分组的长度。例如，如果已排序的列是日期时间，但您只想在某些日期进行折叠，则需要将长度设置为 10（如果日期格式为 10-12-2007 15:12:00），或日期部分的长度。如果未分配任何值，则将检查列的整个值，例如这里的名称。
其他属性包括 SortByCellBackColor、SortByCellForeColor、ClickableCellBackColor、ClickableCellForeColor、ExpandableText（默认为“+”）和 CollapsibleText（默认为“-”）。
这是 TestPage.aspx 的完整服务器端代码
Public Class TestPage
Inherits System.Web.UI.Page
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Protected WithEvents DgCollapsable As System.Web.UI.WebControls.DataGrid
Protected WithEvents DgCollapsible As System.Web.UI.WebControls.DataGrid
'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
BindCollpsibleGrid()
End Sub
Protected Function GetDataSetForCollapsibleDataGrid() As DataSet
Dim ds As DataSet = New DataSet
ds.Tables.Add("Main")
Dim arrDates() As String = {"03/21/2007", "03/21/2007", _
"03/21/2007", "04/10/2007", "05/11/2007", _
"05/11/2007", "06/11/2007", "04/10/2007", _
"05/11/2007", "05/11/2007", "03/21/2007", _
"04/10/2007", "05/11/2007", "05/11/2007", _
"06/11/2007", "04/10/2007", "05/11/2007", _
"05/11/2007", "05/11/2007", "05/11/2007"}
Dim arrNames() As String = {"Arun", "Arun", "Arun", _
"Atif", "Atif", "Atif", "Atif", _
"Mukesh", "Mukesh", "Nikesh", "Prem", _
"Prem", "Prem", "Prem", "Rakhi", _
"Rakhi", "Rakhi", "Rakhi", "Rakhi", "Rakhi"}
ds.Tables(0).Columns.Add("Dates")
ds.Tables(0).Columns.Add("Names")
Dim dr As DataRow
Dim i As Integer = 0
Do While (i < arrDates.Length)
dr = ds.Tables(0).NewRow
dr(0) = arrDates(i)
dr(1) = arrNames(i)
ds.Tables(0).Rows.Add(dr)
i = i + 1
Loop
Return ds
End Function
Private Sub BindCollpsibleGrid()
Dim ds As DataSet = GetDataSetForCollapsibleDataGrid()
Dim objCollapsibleDataGrid As New _
CustomWebControl.CollapsibleDataGrid(DgCollapsible)
objCollapsibleDataGrid.DataSource = ds
objCollapsibleDataGrid.SortByFieldName = "Names"
objCollapsibleDataGrid.SortOnLength = 10
objCollapsibleDataGrid.SortByColumnID = "NamesCol"
objCollapsibleDataGrid.SortByCellBackColor = Drawing.Color.Brown
objCollapsibleDataGrid.SortByCellForeColor = Drawing.Color.White
objCollapsibleDataGrid.ClickableColumnID = "ClickableCol"
objCollapsibleDataGrid.ClickableCellBackColor = Drawing.Color.Blue
objCollapsibleDataGrid.ClickableCellForeColor = Drawing.Color.White
objCollapsibleDataGrid.Style = _
CustomWebControl.CollapsibleDataGridStyle.ExpandOnlyFirstRow
objCollapsibleDataGrid.ExpandableText = "+"
objCollapsibleDataGrid.CollapsibleText = "-"
objCollapsibleDataGrid.Bind()
End Sub
End Class
关注点
要使用 collasibleDataGrid.dll，您的 DataSet 应按特定列（在我演示项目中，我使用了 Name 字段）进行排序，DataGrid 将在该列上进行折叠或展开。不要忘记在 DataGrid 列的顶部添加一个 ASP.NET Label 控件的模板列，并为其指定 ID。
使用 CollasibleGridView.dll 和相同的 JavaScript 文件，您可以为 ASP.NET GridView 实现相同的结果。
历史
- 首次发布于 2007 年 12 月 4 日。
- 更新于 2007 年 12 月 21 日。