表格折叠

最新推荐文章于 2018-10-23 21:34:47 发布
最新推荐文章于 2018-10-23 21:34:47 发布
阅读量298 收藏
点赞数
文章标签： jQuery UP XHTML HTML ViewUI
<!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>
<title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>



<script type="text/javascript">
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();

$("#report tr.odd").click(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
</head>
<body>
<h1>JankoAtWarpSpeed demos</h1>
<p>Demo for <a href="http://www.jankoatwarpspeed.com/post/2009/07/19/Expand-table-rows-with-jQuery-jExpand-plugin.aspx">Expand table rows with jQuery - jExpand plugin</a></p>
<table id="report">
<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th></th>
</tr>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
</ul>
</td>
</tr>
<tr>
<td>United Kingdom </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>English</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_Kingdom.svg.png" alt="Flag of UK" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/United_kingdom">UK on Wikipedia</a></li>
<li><a href="http://www.visitbritain.com/">Official tourist guide to Britain</a></li>
<li><a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703">Official
Yearbook of the United Kingdom</a></li>
</ul>

</td>
</tr>
<tr>
<td>India</td>
<td>1,147,995,904</td>
<td>3,287,240?km2</td>
<td>Hindi, English</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_India.svg.png" alt="Flag of India" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/India">India on Wikipedia</a></li>
<li><a href="http://india.gov.in/">Government of India</a></li>
<li><a href="http://wikitravel.org/en/India">India travel guide</a></li>
</ul>

</td>
</tr>
<tr>
<td>Canada</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>English, French</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Canada.svg.png" alt="Flag of Canada" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Canada">Canada on Wikipedia</a></li>
<li><a href="http://atlas.gc.ca/site/index.html" >Official
Government of Canada online Atlas of Canada</a></li>
<li><a href="http://wikitravel.org/en/Canada">Canada travel guide</a></li>
</ul>
</td>
</tr>
<tr>
<td>Germany</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Germany.svg.png" alt="Flag of Germany" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Germany">Germany on Wikipedia</a></li>
<li><a href="http://www.deutschland.de/home.php?lang=2">Deutschland.de Official Germany portal</a></li>
<li><a href="http://www.cometogermany.com/">Germany Travel Info</a></li>
</ul>
</td>
</tr>
</table>
<em>* Information taken from Wikipedia</em>
</body>
</html>
iteye_14798
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5折叠表格
10-25
html5折叠表格
jexpand_使用jExpand创建可扩展表
cuketao5066的博客
08-05 132
jexpandCreating expandable tables with jExpand Haven’t you thought about making your tables expandable? Recently I stumbled to a very interesting and incredibly useful (in my opinion) plugin – jExpan...
12款Javascript表格控件(DataGrid)
认真做梦 她是做事 始于坚持 成于开放
10-26 415
12款JavaScript表格控件。 表格控件(DataGrid )允许最终用户阅读和写入到绝大多数数据库的应用程序。DataGrid 控件可以在设计时快速进行配置，只需少量代码或无需代码。当在设计时设置了DataGrid 控件的 DataSource 属性后，就会用数据源的记录集来自动填充该控件，以及自动设置该控件的列标头。然后您就可以编辑该网格的列；删除、重新安排、添加列标头、或者调整任意一 ...
Table折叠小技巧html-demo
weixin_33857230的博客
10-16 2034
1.要做一个table折叠的展示文本框直接上代码 html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;table-折叠测试&lt;/title&gt; &lt;script type="text/javascript" src="http://libs.baidu.com/jquery/2.1
WIKI常用的表格设计模板
weixin_30569153的博客
05-19 575
域名服务器管理表格 数据库管理表格 软件路径说明表格 开发测试环境虚拟机表格 转载于:https://www.cnblogs.com/zyguo/p/5508576.html...
EasyUI折叠表格层次显示detailview详解及实例
08-31
【EasyUI折叠表格层次显示detailview详解】 在Web开发中，EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和简单易用的API，帮助开发者快速构建用户界面。本文将深入探讨EasyUI中的一个特殊功能——折叠表格...
layui树型可折叠表格.zip
05-26
可以在这里查看下是否需要:...有详细的介绍. 包括: 1:Layui树型结构和表格相结合的实例 2:自定义表格图表的实例 3:菜单管理的实例 4:多表格的实例 5:搜索的实例 6:等
jQuery实现表格展开与折叠的方法
12-11
在网页设计中，有时我们需要创建交互式的表格，使得用户可以展开或折叠表格的行来查看或隐藏详细信息。本文将详细讲解如何使用jQuery实现这样的功能，即点击表格的某一行，其下方的相关行会展开显示，再次点击则折叠...
tableview表格的折叠
09-10
"tableview表格的折叠"这一主题涉及到如何实现一个可扩展和收缩的表格视图，让用户能够根据需要查看或隐藏某些行。这通常在层级结构的数据展现或者节省屏幕空间时特别有用。以下是对这个知识点的详细讲解： 1. **...
jquery-jExpand-表格操作思路
个人站点： macrotea.cn/nav
12-06 94
$(document).ready(function() { //好设计,数据奇偶行操作 //为数据奇数行添加类 $("#dataTable tr:odd").addClass("odd"); $("#dataTable tr:not(.odd)").hide(); //表格导航标题显示 $("#dataTable tr:first-child").show(); ...
如何实现伸缩 (折叠) 报表？
xiaohuihui_1992的博客
10-23 535
在业务系统中分组统计是比较常见的数据分析形式，但当数据项较多，或分组的层级过多时看着就会比较烦乱，为了数据更清晰的展现，通常用户会需要伸缩（折叠）显示的效果，这样分类汇总的数据就可一目了然的呈现。 润乾报表内置了这种伸缩功能，提供了两种形式的折叠报表：树型折叠报表和 OLAP 型折叠报表。报表开发人员不再需要编写 JS 脚本，只需要两步，设计报表，在报表展现的 jsp 页面中加入 tag 属...
Silverlight DataGrid 多表头 样式实现
AkiMonike的专栏
09-01 1215
首先添加 列的样式引用 xmlns:dgCloumn="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data" 自定义多表头样式
ASP仓库货物管理系统的设计与实现(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
qt下载安装及配置教程的个人学习资料，欢迎使用
08-10
qt下载安装及配置教程qt下载安装及配置教程。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
2019年玖富庄园复利农场 拆分理财复利模拟经营游戏源码美化版
08-10
2019年玖富庄园复利农场 拆分理财复利模拟经营游戏源码美化版 玖富农场是一款跟QQ农场一样的种菜游戏，手机，电脑都可以玩。每天不耽误时间。只需花几秒时间收菜，把菜卖掉就是现金。一天轻松赚取50到500元不等。 1.通过您的推荐链接/推荐码注册的会员,将成为您的推广会员。 2.您将享受推广在玖富庄园每次所兑换砖石的10作为奖励。 使用说明： 1.复制上面的推广链接或推广码，并发送给好友。 2.好友通过链接进入注册页面进行注册，将成为您的推广会员。 3.好友在玖富庄园注册页面填写您的推荐码完成注册，将成为您的推广会员。
毕业设计javajsp中药药方管理系统ssm-qlkrp源码工具包
最新发布
08-10
毕业设计javajsp中药药方管理系统ssm-qlkrp源码工具包 后台是ssm框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 药房人员管理 医生管理 药材信息管理 药方管理 包含：源码、数据库脚本、环境工具包、相同框架项目的安装教程（在说明文档中）
基于SSM的高校实验室预约管理系统的设计与实现源码
08-10
本系统结合当前实验室预约、使用和管理中存在的问题和现状进行分析，设计一套可以解决实验室使用冲突、预约流程简单的实验室预约管理系统，满足实验室的在线预约申请与审核的基本需求，可以方便对实验室和实验室设备进行信息化管理。本系统中的教师可以查看当前实验室以及设备的基本信息，在线进行实验室的预约。管理员可以对实验室和实验室的设备进行管理，以及实验室的预约申请进行审核。
微信支付账单-商户消费(20231218-20240318)(3).zip
08-10
微信支付账单-商户消费(20231218-20240318)(3).zip
iview框架表格折叠
09-14
### 回答1： iview 框架中的表格组件支持折叠功能。要使用折叠功能，你需要在表格组件中使用「collapsible」属性，并在每一行中添加一个「collapse」组件。 首先，在你的表格组件中添加「collapsible」属性： ``` <i-table :columns="columns" :data="data" collapsible></i-table> ``` 然后，在每一行中添加「collapse」组件： ``` <template v-for="(item, index) in data"> <collapse> <template slot="title"> {{ item.name }} </template> <div> 这里是折叠内容 </div> </collapse> </template> ``` 这样，用户就可以点击每一行的标题来展开或折叠行内容了。 你还可以使用「accordion」属性来设置折叠菜单是否为手风琴效果，即每次只能展开一个菜单。 ``` <collapse accordion> <template v-for="(item, index) in data"> <template slot="title"> {{ item.name }} </template> <div> 这里是折叠内容 </div> </template> </collapse> ``` 希望这些信息能帮到你！ ### 回答2： iview框架中的表格折叠是指在表格中展示可折叠的内容。在iview框架中，可以通过设置Table组件的expand-row-keys属性来实现表格的折叠功能。 首先，我们需要在Table组件中绑定expand-row-keys属性，并将其值设置为一个数组，数组中包含数据源中需要展开的行的唯一标识。这个唯一标识可以是数据源中某个属性的值，如ID。 接下来，当我们点击某一行的时候，会触发Table组件的row-click事件。在事件处理函数中，我们可以通过获取点击的行的唯一标识来判断当前行是需要展开还是收起。如果点击的行的唯一标识在expand-row-keys属性的数组中，则说明当前行已经展开，则需要将该行从expand-row-keys属性的数组中移除，实现收起的效果；如果点击的行的唯一标识不在expand-row-keys属性的数组中，则说明当前行还未展开，则需要将该行的唯一标识添加到expand-row-keys属性的数组中，实现展开的效果。 通过上述的操作，我们就可以实现iview框架表格的折叠功能了。当我们点击某一行的时候，该行就会根据其展开状态进行相应的折叠或展开操作。这样可以方便用户查看和管理大量的数据，使页面更加简洁和易读。 ### 回答3： iview框架是一款基于 Vue.js 的一套开箱即用的组件库，提供了丰富的 UI 组件和交互功能，其中包括了表格组件。 在iview框架中，可以使用表格组件实现表格的折叠功能。折叠表格通常用于显示大量数据时，可以折叠隐藏某些行，以便用户更方便地查看和操作数据。 要实现折叠表格，首先需要通过iview的Table组件定义表格的基本结构和内容。接下来，在表格的列配置项中，设置一个自定义的插槽（slot），用于显示折叠的内容。在插槽中，可以通过条件判断来控制显示或隐藏折叠内容。 例如，可以在每行的操作列中添加一个折叠按钮。当用户点击折叠按钮时，可以通过修改相应的数据状态，控制插槽中的折叠内容的显示或隐藏。这样，用户就可以通过点击按钮来折叠或展开对应的行。 除了通过按钮来控制折叠行外，还可以通过其他的交互方式实现折叠功能，例如通过点击行的某一列来折叠或展开该行。 总之，iview框架提供了丰富的UI组件和交互功能，可以方便地实现表格的折叠功能。通过合理地配置表格组件和自定义插槽，可以实现用户友好的大数据展示和操作体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值