Asp.net 具有可扩展组的分组Gridview
围绕嵌套GridView或拥有子GridView的主题,有许多问题。我已经考虑过这种方法,但它对我的目的来说太过分了。我能找到的最接近现实的问题是: 不幸的是,虽然这有一些关于如何创建分组行的建议,但并没有使它们可折叠 我的要求是,我希望用户看到带有分隔行的gridview,例如 -1组Asp.net 具有可扩展组的分组Gridview,asp.net,jquery,gridview,c#-3.0,Asp.net,Jquery,Gridview,C# 3.0,围绕嵌套GridView或拥有子GridView的主题,有许多问题。我已经考虑过这种方法,但它对我的目的来说太过分了。我能找到的最接近现实的问题是: 不幸的是,虽然这有一些关于如何创建分组行的建议,但并没有使它们可折叠 我的要求是,我希望用户看到带有分隔行的gridview,例如 -1组数据1 |数据2 |数据3数据1 |数据2 |数据3数据1 |数据2 |数据3 -第2组数据1 |数据2 |数据3数据1 |数据2 |数据3 -3组数据1 |数据2 |数据3数据1 |数据2 |数据3数据1 |数
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据3
-第2组
数据1 |数据2 |数据3
数据1 |数据2 |数据3
-3组
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据 3
因此,如果用户希望这样查看,他们可以: +第1组
-第2组
数据1 |数据2 |数据3
数据1 |数据2 |数据3
-3组
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据 3
或者这个: +第1组
+第2组
+第三组
实际上,所有分组行中都包含组的标题。它们甚至不是真正合适的Gridview行。实际行是gridview本身,不需要任何进一步的深入功能 我希望我的解决方案在客户端是可行的,我有一些限制,即我可以使用javascript或jQuery(包括jQueryUI1.8.8),但不能随意扩展我正在使用的AJAX工具包的数量。我宁愿不必通过多组扩展回发来管理页面的状态 这是可以实现的吗?有人能给我指出一个资源的方向,这可能会给我一个提示吗
编辑:哦,是的,我忘了提。基本gridview的行中偶尔会有控件,包括但可能不限于:按钮、文本框、复选框和下拉列表。由于您没有提供实际代码,因此我举了一个示例,说明如何基于这些控件实现所需的功能 另一个问题只是将服务器驱动器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>
现在在客户端;为了构建可折叠面板,我们需要做一些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>
$(文档).ready(函数(){
//asp隐藏元素,包含由逗号分隔的组列表。
//检查RowDataBound的代码隐藏以查看此代码在何处填充
var dataGroups=$('#').val().split(',');
对于(var i=0;i
现在,这些代码行生成以下内容:
如果您愿意使用第三方组件,这将是一项简单的任务。无论如何,还可以看看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>