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 相关文章推荐
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
vue使用recorder.js实现录音功能
Nov 22 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
javascript中undefined的本质解析
2019/07/31 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
举例讲解Python中is和id的用法
2015/04/03 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
新党章心得体会
2014/09/04 职场文书
优秀党员事迹材料
2014/12/18 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
清明节寄语2015
2015/03/23 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
python正则表达式re.search()的基本使用教程
2021/05/21 Python