中继器行按一下展开
中继器行按一下展开
提问于 2013-09-12 03:04:07
我想要我的中继器行-当单击时，用panel.Here中的几个文本框展开，我已经完成了表格式的中继器和来自database.when的数据的转换，中继器中的每一行都被点击了，我需要一个面板来显示it.when中的文本框，行再次被点击，然后面板必须变得不可见。
提前感谢您的帮助
<asp:Repeater ID="RepSample" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<table cellpadding="1" cellspacing="1" width="100%" style="font-family: Verdana;
border: 1px solid #C0C0C0; background-color: #D8D8D8">
<tr bgcolor="#FF781E">
<th>
LicenseID
</th>
<th>
LicenseName
</th>
<th>
StartDate
</th>
<th>
EndDate
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color: White">
<td>
<%#DataBinder.Eval(Container, "DataItem.LicenseID")%>
</td>
<td>
<%#DataBinder.Eval(Container, "DataItem.LicenseName")%>
</td>
<td>
<%#DataBinder.Eval(Container, "DataItem.StartDate")%>
</td>
<td>
<%#DataBinder.Eval(Container, "DataItem.EndDate")%>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr>
<td>
<%#DataBinder.Eval(Container, "DataItem.LicenseID")%>
</td>
<td>
<%#DataBinder.Eval(Container, "DataItem.LicenseName")%>
</td>
<td>
<%#DataBinder.Eval(Container, "DataItem.StartDate")%>
</td>
<td>
<%#DataBinder.Eval(Container, "DataItem.EndDate")%>
</td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table></FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:KTestConnectionString %>"
SelectCommand="SELECT LicenseID, LicenseName, StartDate, EndDate FROM Krish">
</asp:SqlDataSource>回答 1
Stack Overflow用户
发布于 2013-09-12 05:18:45
jQuery可以帮忙..。
用下面的代码制作jQuery插件.
(function($) {
$.fn.extend({
collapsiblePanel: function() {
//Call the ConfigureCollapsiblePanel function for the selected element
return $(this).each(ConfigureCollapsiblePanel);
}
});
})(jQuery);
function ConfigureCollapsiblePanel() {
//Wrap the contents of the container within a new div.
$(this).children().wrapAll("<div class='collapsibleContainerContent'></div>");
//Create a new div as the first item within the container.
$("<div class='collapsibleContainerTitle'></div>").prependTo($(this));
//Assign a call to CollapsibleContainerTitleOnClick for the click event of the new div.
$(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
}
function CollapsibleContainerTitleOnClick() {
//The item clicked is the new div... get this parent (the overall container) and toggle the content within it.
$(".collapsibleContainerContent", $(this).parent()).slideToggle();
}aspx标记部件
在Repeater ItemTemplate中放置一个div，并给它类collapsibleContainer
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="collapsibleContainer">
<%-- Put your text boxes and other contents here --%>
</div>
</ItemTemplate>
</asp:Repeater>现在，只剩下页面中的$().ready函数了。
$().ready(function() {
$(".collapsibleContainer").collapsiblePanel();
});当然，您需要将jQuery插件引用作为脚本标记包含在页面中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18754645
复制相关文章
相似问题
腾讯云开发者
