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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 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 array_search() 函数使用
2010/04/13 PHP
Web程序工作原理详解
2014/12/25 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP实现小偷程序实例
2016/10/31 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jQuery技巧总结
2011/01/01 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
JS实现电商放大镜效果
2017/08/24 Javascript
js数据类型检测总结
2018/08/05 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
python 实现归并排序算法
2012/06/05 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
如何基于python实现归一化处理
2020/01/20 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
求职简历中个人的自我评价
2013/12/25 职场文书
工作建议书范文
2014/05/13 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python