围绕嵌套 GridView 或具有子 GridView 的主题存在许多问题。我已经考虑过这种方法,但它对于我的目的来说太多了。我能找到的最接近的现有问题是这个:Grouped Gridview
不幸的是,尽管这对如何创建分组行有一些建议,但它并没有使它们可折叠。
我的要求是我希望用户看到带有分隔行的 GridView ,例如
- GROUP 1
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
- GROUP 2
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
- GROUP 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
这样,如果用户希望这样查看,他们可以:
+ GROUP 1
- GROUP 2
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
- GROUP 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
或者这个:
+ GROUP 1
+ GROUP 2
+ GROUP 3
本质上,所有分组行中的内容都是组的标题。它们甚至不是真正正确的 Gridview 行。实际的行是 gridview 本身,不需要任何进一步的向下钻取功能。
我希望我的解决方案在客户端可行,但我有一些限制,即我可以使用 javascript 或 jQuery(包括 jQuery-ui 1.8.8),但不能任意扩展我正在使用的 AJAX 工具包的数量。我不想通过多个组扩展回发来不断管理页面的状态。
这是可以实现的吗?有人能给我指出一个可能给我插入的资源的方向吗?
编辑:哦,是的,我忘了提及。基础 gridview 的行偶尔会包含控件,包括但可能不限于:按钮、文本框、复选框和下拉菜单。
最佳答案
由于您没有提供实际的代码,因此我整理了一个示例,说明如何根据 this other question 完成您需要的内容。 .
另一个问题只是获取服务器 C 驱动器上的文件,并按创建时间在网格中按降序对它们进行分组。这是中继器标记:
<asp:HiddenField ID="dataGroups" runat="server" />
<asp:Repeater ID="rpt" runat="server" OnItemDataBound="rpt_RowDataBound" >
<ItemTemplate>
<!-- Bind to your specific properties i.e. Invoice #, file type, etc. -->
<table id="tableItem" runat="server">
<tr>
<td style="width: 200px;">
<asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
</td>
<td style="width: 200px;">
<asp:Label ID="lblDirName" runat="server" Text='<%#Eval("DirectoryName") %>'></asp:Label>
</td>
<td style="width: 200px;">
<asp:Label ID="lblCreationTime" runat="server" Text='<%#Eval("CreationTime") %>'></asp:Label>
</td>
<td style="50px">
<asp:Button ID="btnAction" runat="server" Text="Hit me" OnClick="btnAction_Click"/>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
这是 OnRowDataBound
事件的后台代码;用 C# 编写,因为这就是您使用的:
private int month = -1;
private int year = -1;
protected void rpt_RowDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
//Binding to FileInfo objects.
//Since we are grouping by CreationTime we need to check if it's time to create a new "group"
//Is current month and year different from the value previously stored on the month and year variables?
if (month != (e.Item.DataItem as FileInfo).CreationTime.Month || year != (e.Item.DataItem as FileInfo).CreationTime.Year)
{
month = (e.Item.DataItem as FileInfo).CreationTime.Month;
year = (e.Item.DataItem as FileInfo).CreationTime.Year;
//append the current group to the hidden variable "dataGroups" which will tell us quickly how many groups we have in total
dataGroups.Value += (e.Item.DataItem as FileInfo).CreationTime.ToString("yyyMM") + ",";
}
//for every row; "stamp it" with this attribute since we'll use it on the client side with jQuery
(e.Item.FindControl("tableItem") as HtmlTable).Attributes.Add("data-group", (e.Item.DataItem as FileInfo).CreationTime.ToString("yyyMM"));
}
}
现在在客户端;我们需要使用一些 jQuery 魔法来构建可折叠面板。
<link href="css/flick/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//asp hidden element containing the list of groups separated by commas.
//Check code behind of RowDataBound to see where is this populated
var dataGroups = $('#<%=dataGroups.ClientID%>').val().split(',');
for (var i = 0; i < dataGroups.length; i++) {
//split() doesn't have an option to ignore empty strings so we'll just ignore it
if (dataGroups[i] != '') {
//select all table elements with the data-group value matching the
//current group we are iterating over and enclose them all
//inside a div; effectively creating a "group"
$('table').filter(function (inputs) {
return $(this).data('group') == dataGroups[i];
}).wrapAll("<div class='accordion'>");
}
}
var accordions = $('.accordion');
//now, for every div enclosing the groups, create a Handle that will work as the element that
//collapses or expands the group
$(accordions).wrapInner("<div>").prepend('<h3><a href="#">Handle</a></h3>');
//Now replace the word "Handle" above for the actual group number/name or what have you
for (var i = 0; i < accordions.length; i++) {
$(accordions[i]).find('h3 a').text("Group " + $(accordions[i]).find('table:first').data('group'));
}
//finally call jQuery.accordion to create the accordions on every group
$('.accordion').accordion({ collapsible: true, autoHeight: false });
});
</script>
现在,这些代码行会产生以下结果:
关于asp.net - 具有可扩展组的分组 Gridview,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11653190/