如何用jQuery实现ASP.NET GridView折叠伸展效果


Posted in Javascript onSeptember 26, 2015

今天做静态页面时有一个需求,就是页面上有一组两个选项的单选按钮和一个有6行的列表(该列表用Table标签实现,不是DIV),当选择单选按钮的选项一时,列表的前三条信息显示后三条信息隐藏,当选择单选按钮的选项二时,列表的前三条信息隐藏后三条信息显示。那么就牵扯出我们今天的话题拉,如何实现呢?实现后该实现还能应用到哪些场景?

1、第一反应的解决方案

碰到这个需求后,我第一反应就是很简单啊,分别用两个DIV将前三个Table中的TR标签与后三个TR标签包起来,然后通过JS控制DIV的显示。

第一步:使用DIV包裹需要隐藏显示的TR。代码如下:

<table> 
<div id="divName"> 
<tr> 
<td>姓名:</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</div> 
<div id="divSex"> 
<tr> 
<td>年龄:</td> 
<td><input id="txtsex" type="text" /></td> 
</tr> 
</div> 
</table>

第二步:使用JS控制DIV的显示,来达到控制隐藏或显示行的效果:

$("#divName").style.display = "none"; 
$("#divSex").style.display = "block";
第三步:运行程序,你会发现根本不管用,哈哈,有点被耍的感觉~!因为TR标签只能与TABLE标签搭配使用!好啦,虽然上面的代码不管用!但是还算起到了一个引导的作用吧,失败是成功的老娘嘛!

2、推荐的使用panel解决方案

这是在我描述了DIV与TR不能配合使用后,被同事笑话啦,哎、看来以后要多多学习学习HTML啦,笑话完我后,同事董宁告诉我用PANEL控件包住TR,用Visible属性在服务器级别控制TR的输出。

第一步:使用PANEL控件包住用来显示或隐藏的TR标签,代码如下:

<table> 
<asp:Panel ID="plName" runat="server"> 
<tr> 
<td>姓名:</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</asp:Panel> 
<asp:Panel ID="plSex" runat="server" > 
<tr> 
<td>年龄:</td> 
<td><input id="txtsex" type="text" /></asp:Panel></td> 
</tr> 
</asp:Panel> 
</table>

第二步:在服务器端使用Panel控件的Visible属性控制行的输出,代码如下:

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) 
{ 
 string val = RadioButtonList1.SelectedValue; 
 switch (val) 
 { 
  case "Name": 
   plName.Visible = true; 
   plSex.Visible = false; 
   break; 
  case "Sex": 
   plName.Visible = false; 
   plSex.Visible = true; 
   break; 
  default: 
   plName.Visible = true; 
   plSex.Visible = true; 
   break; 
 } 
}

这种方法虽然没有问题,但是感觉还是太无厘头了吧?控制页面展示的代码也要让服务器端去做吗?太浪费性能了!而且页面控制的代码与逻辑交互代码放一起简直是混乱不堪啊,在否决掉这个办法时,我们的大侠歪歪同志登场了,说道歪歪同志我不得不佩服啊,身为项目经理的歪歪,写代码的功底竟然比程序员还猛,完全无需代码提示,纯手工敲击键盘加清晰思路完美解决该问题!

3、无厘头解决方案

那么,我们来看这个思路,首先给每个TR标签赋予一个class样式,但是这个样式是没有实现的,仅仅做获取该TR的标识。

第一步:给TR标签添加一个没有实现的class样式。代码如下:

<table id="MyList"> 
<tr class="NameCSS"> 
<td>姓名:</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
<tr class="SexCss"> 
<td>年龄:</td> 
<td><input id="txtsex" type="text" /></td> 
</tr> 
</table>

第二步:使用Jquery根据class获取TR元素,并且控制其隐藏或显示,代码如下:

var $rowsName = $("#MyList").find(".NameCSS"); 
var $rowsSex = $("#MyList").find(".SexCss"); 
switch (selectedValue) 
{ 
 case "Name": 
 $rowsSex.hide(); 
 $rowsName.show(); 
 break; 
 case "Sex": 
 $rowsSex.show(); 
 $rowsName.hide(); 
 break; 
}

第三步:运行,完全没有问题,此问题解决!

4、根据第三个方案的实现联想的应用场景

我们现在可以控制TABLE中TR的显示与隐藏后,我们可以想到ASP.NET GridView控件在绑定数据后输出到浏览器后的数据部分,也是用TR的形式来显示的,那么我们可不可以控制GridView内容的显示与隐藏呢?当然没问题了。

第一步:如何给GridView数据行加入class属性呢?我们可以用GridView的行样式(<RowStyle CssClass="test" />)来设置,代码如下:

<asp:GridView ID="GridView1" runat="server"> 
<RowStyle CssClass="test" /> 
</asp:GridView>

此时我们运行页面,查看页面输出的源代码会看到GridView数据部分的所有TR都被赋予了一个class="test"属性!

第二步:绑定数据,代码如下:

if (!IsPostBack) 
  { 
   List<Student> sList = new List<Student>() 
   { 
    new Student(){ SID = "s001", SName="张三", SSex="男"}, 
    new Student(){ SID = "s002", SName="李四", SSex="女"}, 
    new Student(){ SID = "s003", SName="王五", SSex="男"} 
   }; 
 
   GridView1.DataSource = sList; 
   GridView1.DataBind(); 
  } 
 }

第三步:加入控制显示或隐藏GridView数据的按钮,代码如下:

<input id="btn" type="button" value="隐藏" onclick="ShowDate()" />

第四步:实现控制显示和隐藏的JS方法,代码如下:

function ShowDate() { 
   var val = $("#btn").val(); 
   var $rows = $("#GridView1").find(".test"); 
   switch (val) { 
    case "隐藏": 
     $rows.hide(); 
     $("#btn").val("显示"); 
     break; 
    case "显示": 
     $rows.show(); 
     $("#btn").val("隐藏"); 
     break; 
   } 
  }

呵呵,实现这个功能的原因、人物、灵感、整个前因后果就介绍完啦,编程嘛不仅是要实现功能,更要融于生活。

以上四个方法都是紧密相连,互相有联系的,希望大家细细品味,仔细琢磨,真正成为自己的东西,运用到学习中。

Javascript 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
DIV始终居中的js代码
Feb 17 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 #Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 #Javascript
angularjs学习笔记之完整的项目结构
Sep 26 #Javascript
jQuery实现的登录浮动框效果代码
Sep 26 #Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 #Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 #Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 #Javascript
You might like
PHP IPV6正则表达式验证代码
2010/02/16 PHP
深入php多态的实现详解
2013/06/09 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
深入分析PHP设计模式
2020/06/15 PHP
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python 七种邮件内容发送方法实例
2014/04/22 Python
Python中装饰器高级用法详解
2017/12/25 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python+flask实现API的方法
2018/11/21 Python
解析python实现Lasso回归
2019/09/11 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
社区居务公开实施方案
2014/03/27 职场文书
音乐幼师求职信
2014/07/09 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python