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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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 file_exists问题杂谈
2012/05/07 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
图文详解vue框架安装步骤
2019/02/12 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
python如何求解两数的最大公约数
2018/09/27 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Python使用Pygame绘制时钟
2020/11/29 Python
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
农村结婚典礼司仪主持词
2014/03/14 职场文书
文明城市创建标语
2014/06/16 职场文书
小学生读书活动总结
2014/06/30 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
单位病假条范文
2015/08/17 职场文书