Repeater控件实现点击列表行单元格.在该行下方显示数据

这个demo是当我们需要在列表页时,点开某一列,希望在该列的下面显示一行数据,或者一个文本.这里使用了asp.net自带的Repeater 控件.

下面是要调用的js
<script language="javascript">
var $ = function(i) {
return document.getElementById(i)
};
function moreshow(ml, mr) {
if (mr==null || mr=="") {
var e = $(ml);
if (e.style.display != 'block') {
e.style.display = 'block';
} else {
e.style.display = 'none';
}
return false
}
return true;
};
function moreddhide(e) {
if (!e) var e = window.event;
if (e.srcElement) {
var a = e.srcElement.getAttribute("id")
} else {
var a = e.target.getAttribute("id")
}
if (a != "more") {
$('morelist').style.display = 'none'
}
};
document.onclick = moreddhide;
</script>

 

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div style="height: 30px; width: 100%;">
<ul>

//这里调用js的moreshow(s1,s2)s2只为了区别点击那一列去展开下一行div
<li style="width: 150px;"><a href="Javascript:" id="more" οnclick="moreshow('<%# Eval("Qid") %>','<%# Eval("QReplytime") %>');"></li>

<li style="width: 200px;"><%# Eval("Qsource")%></li>

</ul>
</div>

//这个div就是为了显示点击列后.数据的显示地方
<div style="height:100px; width: 100%; display: none;" id='<%# Eval("Qid") %>'>
<ul>
<li>提问内容：</li><li style="width: 50%;"><%# Eval("QContent")%></li><br />
</ul>
</div>
</ItemTemplate>
</asp:Repeater>

转载于:https://www.cnblogs.com/liguanghui/archive/2011/11/02/2233356.html