JS实现在Repeater控件中创建可隐藏区域的代码


Posted in Javascript onSeptember 16, 2010

由于web应用的规模不断增大,数据也越来越多了,有时候,由于在一个页面同时显示的数据太多,从而造成页面的不美观,用户因此也会感到厌倦和操作困难。因此,本文将介绍利用repeater控件的隐藏区域,以达到较好的数据显示效果。

 

防止数据过多加载有很多方法,比如采用数据分页的方法,又或者采用master/detail的方式,就是先显示每条数据的主要内容,而对于详细数据,用户只需要点detail的链接就可以了。本文将介绍另外一种方式来显示数据,它采用折叠的隐藏方式,当用户需要看每条记录的详细描述时,不需要另外打开链接窗口,而直接在原数据记录的下方,呈现出原先隐藏的数据详细资料。这样一来,方便了用户的操作。我们先来看下其实际效果(http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx)。 接下来,我们看如何在repeater中实现其效果。

 

要实现上面的效果,我们必须采用客户端的脚本技术,从而实现隐藏或展示某个区域。而在IE 4.x后,是可以实现该技术的。比如,<div>标记内的内容,当用户点击时可以动态地隐藏起来,而<p>标记内容的内容,也可以当用户移动鼠标到某特定区域时显示出来。而其中的关键之处,在于其display和visibility的CSS风格属性。下面的代码显示了其使用方法,当用户点击HIDE CONTENT按钮时,则会隐藏原本显示的文本,当点击show content时,又会显示原先的文本了。

<script language="JavaScript"> 
function showHideContent(id, show) 
{ 
 var elem = document.getElementById(id); 
 if (elem) 
 { 
if (show) 

{ 

 elem.style.display = 'block'; 

 elem.style.visibility = 'visible'; 

} 

else 

{ 

 elem.style.display = 'none'; 

 elem.style.visibility = 'hidden'; 

} 
 } 
} 
</script> 
<div id="someRegion"> 
 This text will be displayed or hidden when clicking the appropriate button below... 
</div> 
<input type="button" value = "Hide Content" 
 onclick="showHideContent('someRegion', false);"> 
<input type="button" value = "Show Content" onclick="showHideContent('someRegion', true);">

在上面的javscript代码中,充分利用了HTML元素的display和visiblity属性,而且要注意,这两个属性应该同时使用。首先在button按钮的onclick事件中,调用了自定义的javscript写的函数showhidecontent,该函数有两个参数,id和show,id表示要显示或者隐藏的区域的名称,比如该例子中,要显示或隐藏的区域是<div>标记内的文本,show为布尔值,决定是否隐藏或显示该区域。而在showhidecontent函数中,则根据show的值,控制display和visiblity属性。

明白了上面例子的道理后,下面就可以在repeater控件中应用了。比如,我们要创建一个FAQ问答录,其中有很多用户要询问的问题,则使用上面的方法,可以先将用户的问题使用repeater控件罗列出来,之后当用户点击该问题时,则会显示出隐藏的回答,十分方便。Repeater的代码片段如下:

<asp:Repeater id="rptFAQs" runat="server"> 
<ItemTemplate> 
 <h2><%# DataBinder.Eval(Container.DataItem, "Description") %></h2><br /> 
 <b>Submitted By:</b> <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %><br /> 
 <b>Views:</b> <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %><br /> 
 <b>FAQ:</b><br /> 
 <%# DataBinder.Eval(Container.DataItem, "Answer") %> 
</ItemTemplate> 
</asp:Repeater>

我们可以看到,上面的代码只是描述了静态的一个repeater。接下来,我们要在repeater的模版列上进行一下修改,以满足要求。
首先,我们为每一条记录都创建两个<div>标记,一个显示FAQ的问题,另一个则显示问题的答案,而且要为每一个<div>标记赋值一个唯一的id,每条记录中,显示问题的<div>标记的id记作h index(index为Repeater控件中每一项的id号,利用itemindex),而显示答案的<div>标记的id记作dindex。代码如下:

<script language="JavaScript"> 
function ToggleDisplay(id) 
{ 
 var elem = document.getElementById('d' + id); 
 if (elem) 
 { 
if (elem.style.display != 'block') 

{ 

 elem.style.display = 'block'; 

 elem.style.visibility = 'visible'; 

} 

else 

{ 

 elem.style.display = 'none'; 

 elem.style.visibility = 'hidden'; 

} 
 } 
} 
</script> 
<style> 
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer; 
background-color:#cccccc; font-family: Verdana; } 
.details { display:none; visibility:hidden; background-color:#eeeeee; 
font-family: Verdana; } 
</style> 
 <asp:Repeater id="rptFAQs" runat="server"> 
 <ItemTemplate> 

<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header" 
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'> 

 <%# DataBinder.Eval(Container.DataItem, "Description") %> 

</div> 

<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details"> 

 <b>Submitted By:</b> <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %><br /> 

 <b>Views:</b> <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %><br /> 

 <b>FAQ:</b><br /> 

 <%# DataBinder.Eval(Container.DataItem, "Answer") %> 

</div> 
 </ItemTemplate> 
</asp:Repeater>

我们重点来看下后半部分的代码,其中
<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'>会将每条记录的问题部分,包裹在类似<div id=h1>,<div id=h2>之类的标记内,当点击时,则调用toggledisplay函数,在该函数内,看传入的参数是否是需要显示的区域(注意,通过
var elem = document.getElementById('d' + id);)一句进行判断,是的话则设置display和visiblity属性显示,否则不显示。

Javascript 相关文章推荐
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
微信小程序使用Socket的实例
Sep 19 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 #Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 #Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 #Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 #Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 #Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 #Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 #Javascript
You might like
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
详解vue axios二次封装
2018/07/22 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
车间操作工岗位职责
2013/12/19 职场文书
护士检查书
2014/01/17 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
家长通知书教师评语
2014/04/17 职场文书
化工操作工岗位职责
2014/04/29 职场文书
党性心得体会
2014/09/03 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
基于Python实现的购物商城管理系统
2021/04/27 Python
mysql的数据压缩性能对比详情
2021/11/07 MySQL