如何用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制作弹窗提示窗口代码分享
Mar 02 Javascript
JavaScript运算符小结
Jun 03 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
JavaScript手机振动API
Jun 11 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
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
ADODB的数据库封包程序库
2006/12/31 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
PHP编写简单的App接口
2016/08/28 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python实现redis三种cas事务操作
2017/12/19 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
高职教师岗位职责
2013/12/24 职场文书
银行贷款收入证明
2014/10/17 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Python中json.dumps()函数的使用解析
2021/05/17 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery