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 相关文章推荐
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
微信小程序实现日历功能
Nov 27 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
vue 实现微信浮标效果
Sep 01 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php中JSON的使用方法
2015/04/30 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
详解Python中where()函数的用法
2018/03/27 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
django+echart数据动态显示的例子
2019/08/12 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
车间主任岗位职责
2014/03/16 职场文书
教师节宣传方案
2014/05/23 职场文书
学习党史心得体会2016
2016/01/23 职场文书
入门学习Go的基本语法
2021/07/07 Golang