asp.net的jQuery 表格展开伸缩

最新推荐文章于 2021-12-18 11:29:56 发布
最新推荐文章于 2021-12-18 11:29:56 发布
阅读量69 收藏
点赞数
文章标签： xhtml javascript c# ViewUI

引用

C#

C#经验技巧宝典代码的259页实现查看0458光盘11\EX11_15 DataList控件中的数据详细信息。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title></title>
 <style>
     table { border:0;border-collapse:collapse;}
     td { font:normal 12px/17px Arial;padding:2px;width:100px;}
     th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
     .parent { background:#FFF38F;cursor:pointer;}  /* 偶数行样式*/
     .odd { background:#FFFFEE;} /* 奇数行样式*/
     .selected { background:#FF6500;color:#fff;}
 </style>
 <!--   引入jQuery -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function(){
     $('tr.parent').click(function(){   // 获取所谓的父行
             $(this)
                 .toggleClass("selected")   // 添加/删除高亮
                 .siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行
     }).click();
 })
 </script>
 </head>
 <body>
     <table>
         <thead>
             <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
         </thead>
         <tbody>
             <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
             <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
             <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
 
             <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
             <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
             <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>
 
             <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
             <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
             <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
         </tbody>
     </table>
 </body>
 </html>

 通过此例子，想像asp.net中的Repeater做成展开伸缩的功能,想要点击每行展开伸缩当前行的详细信息，则必需通过每行的不同class或者ID来区别，那么在表格生成的时候，就要生成不同的class或者ID

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

<script>
    $(document).ready(function () {
        $("tr").click(function () {   // 获取所谓的父行
            $("#pp" + this.id).toggle(1000);
            //                 .toggleClass("selected")   // 添加/删除高亮
            //               alert(this.id);
            //                 .siblings("#pp" + this.id).toggle();  // 隐藏/显示所谓的子行

            //         }).click();
        });
    });
</script>



    </head>
<body>
    <form id="form1" runat="server">

    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    <HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>orderno</th>
<th>product_no</th>
<th>color</th>
<th>product_size</th>
<th>product_class</th>

</tr>
</HeaderTemplate>

<ItemTemplate>
<p>
<tr id="<%#Eval("orderno") %>">
<td><table><tr><td><p id="ppp">★</p></td><td><%#Eval("orderno")%></td></tr></table></td>
<td><%#Eval("product_no")%></td>
<td><%#Eval("color")%></td>
<td><%#Eval("product_size")%></td>
<td><%#Eval("product_class")%></td>
</tr>
<tr id="pp<%#Eval("orderno") %>">
<td colspan="5">
<%#Eval("brand") %>
</td>
</tr>
</p>
</ItemTemplate>

<FooterTemplate>
</table>
</FooterTemplate>
    </asp:Repeater>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:shopConnectionString %>" 
        SelectCommand="SELECT top 50  [orderno], [out_trade_no], [product_class], [brand], [product_no], [product_size], [color], [number], [price], [isems] FROM [tbl_order] order by id desc ">
    </asp:SqlDataSource>
    <br />
    <asp:Button ID="Button4" runat="server" Text="Button" />
    </form>
</body>
</html>

 

weixin_34163553
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
展开/折叠GridView行
04-04
本文介绍如何使用JavaScript展开和折叠GridView的行。
使用Jquery+repeater生成可以收缩的目录
cdz1022的专栏
01-17 941
前台的repeater的使用                                        '  Font-Bold ="true">
在GridView表头新增图片 实现GridView行折叠展开效果
深南大道
11-21 3313
Expand/Collapse var Grid = null; var UpperBound = 0; var LowerBound = 1; var CollapseImage = 'images/minus.gif'; var ExpandImage = 'images/plus.gif
展开和折叠GridView行
lee576的专栏
10-17 7285
原文地址：http://www.codeproject.com/KB/webforms/GridViewExpandCollapse.aspx代码下载:/Files/sunfishlu/GridViewExpandCollapse.rar效果图：介绍      这篇文章介绍了使用JavaScript折叠/展开GridView行的功能，为了实现所希望的效果，我在GridView的表头放置了一张图
asp.net jQuery Ajax用户登录功能的实现
10-29
前几天把jbox源码修改成仿QQ空间模拟窗口后发现有很多人在关注。今天就贴一下我利用该模拟窗口实现的用户登录功能的代码。
ASP.NET GridView表格列宽拖动功能示例
03-16
内容索引:.NET源码,Ajax相关,AJAX,GridView　中模仿GridView列表的列宽拖动功能示例程序，并且可以实现鼠标经过、点击、不响应时候分别用不同的颜色来区分，移动可改变列的顺序、改变列宽、排序，chy.xml用于存储...
ASP.NET jQuery技术开发CRM系统
08-19
ASP.NET jQuery技术开发CRM系统
探讨ASP.NET的可伸缩性
02-22
registered:SQLServer(tm)2000摘要：本文中，Michèle将探讨某些可能影响ASP.NET应用程序可伸缩性的体系结构和设计决策。此外，她还会介绍怎样使用EnterpriseServices和MSMQ来降低这些伸缩性问题带来的影响。本页...
ASP.NET GirdView实现折叠式效果
My Blog
10-13 2950
我们线看图的效果： 但是有个非常不爽的地方，就是GridView要进行回发操作，所以，点击或者展开折叠节点，都会进行数据的回发。 实现的原理是这样的，首先看一下绑定到GridView的datatable数据表格： 可以看到本数据集的构造方式，即parentID下面保
ASP.NET中的三种表格化数据方法
04-14
在开发ASP.NET站点项目中，经常用表格化的方式显示数据，本文详细介绍ASP.NET中的三种表格化数据方法！
ajax技术可展开和多层折叠并带有表格的树,现把代码分享
06-10
效果如http://www.aoeoo.com.cn/01.jpg
javascript实现table单元格点击展开隐藏效果(实例代码)
11-27
如果table元素的高如果不设置，是根据内容撑开的，根据这个规则，可以用js控制默认状态下table-cell的宽度，并将这一列的table-cell设置为dispaly：block，这样多出来的内容就会被隐藏掉，添加点击事件，把table-cell的display在block和table-cell之间切换，就能实现点击展开隐藏效果啦！ js代码如下： $('.cell').click(function(){ if($(this).css('display')=='block'){ console.log('ok'); $(this).css('display'，'tab
jquery实现table表格样式，表格展开，表格内容筛选
11-23
jquery实现table表格样式，表格展开，表格内容筛选，内容简单易懂。
采用js+ASP.NET+CSS实现Grid View Header 的Freezing效果源码例子
11-03
Freezing ASP.Net Grid View Header With JavaScript and CSS.
可以折叠Gridview
有图有真相
12-18 838
可以折叠Gridview 实现原理 1、折叠实现 重写gridview的setAdapter方法 @Override public void setAdapter(ListAdapter adapter) { if (foldNm > 0) { //进行折叠 adapter = new FoldViewGridAdapter(adapter, foldNm); } super.setAdapter(adapter
ASP.NET GirdView实现折叠式效果
cunzhang145的专栏
09-24 811
我们线看图的效果： 但是有个非常不爽的地方，就是GridView要进行回发操作，所以，点击或者展开折叠节点，都会进行数据的回发。 实现的原理是这样的，首先看一下绑定到GridView的datatable数据表格： 可以看到本数据集的构造方式，即parentID下面保存的都是父ID的节点，而ChildID为空；但是当某行数据为子类时，父类的 ParentID置空，而ChildID则存入
表格高度的设置/整体表格的展开折叠/表格概览和全览
小巧r的博客
05-29 858
elementui里表格有个height属性，能给它动态赋值，然后用你说的计算表格行高在js里赋值就好了 <tempate> <el-table :data="tableData" stripe border :height="attrHeiht" ...
ASP.NET折叠报表、RDLC报表
优雅的树叶子
10-23 578
一、首先添加一个.aspx页面 ，并在页面中添加ScriptManager 和一个ReportViewer 二、在项目中添加一个RDLC 三、
asp.net jquery 进度条上传
最新发布
05-14
ASP.NET jQuery进度条上传是一种常见的网页上传文件功能。通过前端jQuery插件和后端ASP.NET技术，实现了文件上传过程中的进度条展示，提高了用户体验和操作效率。具体实现方式如下： 1. 前端实现 使用jQuery的ajaxForm插件，结合jQueryUI的progressbar插件，进行文件上传进度条的展示。在HTML页面上添加上传表单和进度条，通过ajaxForm设置表单提交事件，实现文件上传过程中进度条的实时更新。代码如下： ``` <form id="uploadForm" enctype="multipart/form-data" method="post" action="UploadFile.ashx"> <input type="file" name="fileUpload" /> <input type="submit" value="上传" /> </form> <div id="progressBar"></div> ``` ``` $("#uploadForm").ajaxForm({ beforeSend: function() { $("#progressBar").progressbar({ value: 0 }); }, uploadProgress: function(event, position, total, percentComplete) { $("#progressBar").progressbar({ value: percentComplete }); }, success: function() { $("#progressBar").progressbar({ value: 100 }); alert("上传成功！"); }, error: function() { alert("上传失败！"); } }); ``` 2. 后端实现 在ASP.NET中，通过HttpHandler实现文件上传处理，从request对象中获取上传的文件信息，根据文件大小和上传进度，实时更新进度条的值。代码如下： ``` <%@ WebHandler Language="C#" Class="UploadFile" %> using System; using System.Web; public class UploadFile : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; HttpPostedFile file = context.Request.Files["fileUpload"]; int fileSize = file.ContentLength; int bytesRead = 0; byte[] buffer = new byte[8192]; using (System.IO.Stream stream = file.InputStream) using (System.IO.BinaryReader reader = new System.IO.BinaryReader(stream)) using (System.IO.MemoryStream ms = new System.IO.MemoryStream()) { double percentComplete = 0; int totalRead = 0; while ((bytesRead = reader.Read(buffer, 0, buffer.Length)) > 0) { ms.Write(buffer, 0, bytesRead); totalRead += bytesRead; percentComplete = (double)totalRead / fileSize * 100; context.Response.Write(percentComplete.ToString()); } } } public bool IsReusable { get { return false; } } } ``` 综上，ASP.NET jQuery进度条上传，通过前后端技术的组合应用，在网页上传过程中有效展示文件上传进度和结果，提升了用户的体验感和操作效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值