============================================================================
原创作品,允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。
请注明转自:http://yunjianfei.iteye.com/blog/
============================================================================
做web设计的时候,经常会遇到父表,子表的问题,例如:班级表&学生表, 集群表&主机表等等。。说白了就是数据库设计中的一对多关系的情况。
这种状况在做页面展示的时候,做成伸缩表格的样子比较灵活点。下面是我参照了一个开源的jquery插件实现的动态伸缩表格,大家可以参照一下。
首先,上效果图:
比较简陋,只用了最简单的css效果,下面贴出我的代码。
1. 文件名:test.css
table.expanding { margin-top:2px; margin-left:20px; #background-color: #FFF; #background:#EEF4F9; #border: none; border: 1; #color:#003755; border-collapse:collapse; font: 14px "宋体"; } table.expanding th{ background:#7CB8E2; color:#fff; padding:8px 10px; text-align:center; } table.expanding tr.odd td{ background:#C7DDEE none repeat-x scroll center left; color:#000; padding:4px 2px; } table.expanding a{ text-decoration:none; height:1em; } table.expanding a:link, table.expanding a:visited{ color:#3366CC; } table.expanding a:hover{ /* 鼠标经过时 */ color:#B50000; text-decoration:underline; }
2. test_table.html
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="./test.css"/> <script src="./jquery-2.1.0.min.js"></script> <script type="text/javascript"> function submit_put() { var a = confirm('是否变更状态?'); if (a == true) { return true; } else{ return false; } } function submit_del() { var a = confirm('是否删除该计算池?'); if (a == true) { return true; } else{ return false; } } </script> <script> $.fn.extend({ show_pool_items: function(pool_id) { var resp = { "response_code" : 1, "pool_run": { "total" : 10, "on_line" : 5, }, "pool_detail":[{ "hostname" : "host1", "worker_num" : 5, "on_line" : 3}, { "hostname" : "host2", "worker_num" : 5, "on_line" : 2, } ], }; //以上为模拟数据,可以通过下面的ajax方式获取json数据。 //$.getJSON("/pool" +pool_id, function(resp){ var html = "" if (resp.response_code == 0) { html = "<font align=center>无记录!</font>"; } else { var run = resp.pool_run var detail = resp.pool_detail html += "<div id='run_"+ pool_id +"'> <font> 总数:"+ run.total + " 在线:"+ run.on_line + "</font> </div>"; html += "<table border=1 class=t1 id='Child_'+pool_id >"; html += "<tr align=center><th>主机名</th> <th>Worker数</th> <th>在线Worker</th> </tr>"; for(var i=0; i < detail.length; i++) { html += "<tr align=center> <td>"+detail[i].hostname+"</td> <td>" + detail[i].worker_num html += "</td> <td>" + detail[i].on_line+"</td>"; html += "</tr>" } html += "</table>"; html += "<br>"; } $("#div_"+pool_id).empty(); $("#div_"+pool_id).html(function(i,origText){ return html; }); //}); } }); $(document).ready(function(){ $(".expanding tr:odd").css("cursor","pointer"); $(".expanding tr:odd").addClass("odd"); //$(".expanding tr:odd td").not(".cls").attr("title","点击这里展开/关闭"); $(".expanding tr:odd").attr("title","点击这里展开/关闭"); $(".expanding tr:not(.odd)").hide(); $(".expanding tr:first-child").show(); $(".expanding tr.odd td").click(function(e){ var tag = e.target.nodeName; //if($(this).attr("class") == 'cli'){ if(tag == 'A' || tag == 'a'){ } else{ if($(this).parent().next("tr").is(":hidden")){ var pool_id =$(this).parent().attr("id"); $(this).show_pool_items(pool_id); } $(this).parent().next("tr").toggle(); } }); }); </script> </head> <body> <center> <hr> <table border="1" class="expanding"> <tr><th>PoolID</th><th>计算池名称</th><th>状态</th><th>创建时间</th><th>备注</th><th>状态变更</th><th>删除</th></tr> <tr id='1' ><td>1</td> <td>test</td> <td>hello</td><td>2013-1-10</td> <td>test </td> <td class="cli"><a href="#" onclick="return submit_put()">停用</a> </td> <td class="cli"> <a href="#" onclick="return submit_del()">删除</a></td> </tr> <tr> <td colspan="7" align="center" background=""> <div id="div_1"> </div> </td> </tr> <tr id='2' ><td>1</td> <td>test</td> <td>hello</td><td>2013-1-10</td> <td>test </td> <td class="cli"><a href="#" onclick="return submit_put()">停用</a> </td> <td class="cli"> <a href="#" onclick="return submit_del()">删除</a></td> </tr> <tr> <td colspan="7" align="center" background=""> <div id="div_2"> </div> </td> </tr> </table> <br> </center> </body> </html>
附上开源插件链接:http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/
相关推荐
"基于jQuery可以伸缩的表格"就是针对这一需求提出的一种解决方案,它利用jQuery库的强大功能,实现了表格列宽的动态调整,从而让用户在查看或操作数据时更加方便。 jQuery是一个轻量级、高性能的JavaScript库,它的...
本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能,从而使用户可以根据需要调整表格的列宽,提高用户界面的可定制性和交互性。 colResizable是一个轻量级的jQuery插件,它为HTML表格...
《jQuery 动态表格详解与应用实践》 在网页开发中,动态表格是一种常见的数据展示方式,它能够根据用户操作或后台数据的变化实时更新表格内容。jQuery,作为一款广泛使用的JavaScript库,为创建动态表格提供了强大...
在本文中,我们将深入探讨如何使用jQuery来实现一个伸缩表格功能,特别是在表格的最后一行上单击时可以展开或收起更多详情。这个功能在数据展示时非常实用,特别是当表格包含大量信息但屏幕空间有限时。让我们一起...
标题“JQ 表格展开伸缩”涉及的是使用jQuery(简称JQ)库来实现表格数据的动态展示,特别是关于表格行的展开与收缩功能。这种功能在数据量较大时非常有用,可以提高用户体验,避免一次性加载大量数据导致页面响应慢...
用户通过鼠标悬停在某一行上,该行会自动展开,显示出隐藏的子表内容,提供更详细的信息,而无需用户点击或其他额外操作。这种方式使得数据浏览更加直观和便捷。 要实现这样的功能,我们需要使用HTML、CSS和...
主要介绍了jQuery实现的表格展开伸缩效果,结合完整实例形式分析了jQuery响应鼠标事件动态修改页面元素的相关技巧,需要的朋友可以参考下
基于jQuery和Typescript的表格插件,可实现伸缩列,固定表头,固定列,数据排序,双击指定_iTable
jQuery表格插件是一种广泛应用于网页开发中的工具,它利用JavaScript库jQuery的强大功能,为开发者提供了一种简单、高效的方式来创建和操作动态、交互式的表格。这些插件通常包含丰富的功能,如排序、过滤、分页、...
jQuery的核心功能包括选择器、DOM操作、事件绑定和动画效果,使得开发者能够更便捷地进行网页动态效果的创建和页面元素的操作。 ### 二、tilesjs特性 1. **自动伸缩**:tilesjs控件能够根据表格数据的数量自动调整...
2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 ...
2. **表格(Table)**:EasyUI 的表格组件允许动态加载数据,支持排序、分页、过滤和编辑等功能。通过`.datagrid()`方法,你可以将HTML表格转化为功能丰富的数据展示区。 3. **菜单(Menu)**:菜单系统提供了一种组织...
1. **AJAX**:EasyUI 内置 AJAX 功能,方便与服务器端进行异步交互,实现数据的动态加载。 2. **MVC 模式**:可以很好地与后端 MVC 框架(如 ASP.NET MVC、Spring MVC 等)结合,实现前后端分离的开发模式。 3. **...
3. **表格(Grid)**:提供数据展示和管理的表格组件,支持分页、排序、过滤、行选择、编辑等功能,可以与后台数据库进行无缝对接。 4. **表单(Form)**:包含了各种输入控件,如文本框、下拉框、复选框、单选按钮...
在本篇内容中,我们将深入探讨如何利用jQuery在ASP.NET MVC项目中实现动态、美观且自定义的分页功能。 首先,我们需要了解jQuery的基本概念。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单等,帮助开发者快速构建用户界面。这个压缩包文件“jQueryEasyUI应用实例代码以及api”很可能是包含了一些...
13. **布局(Layout)**:用于创建响应式的页面布局,支持分区、伸缩、拖动等功能,常用于构建复杂的管理界面。 此外,`jQuery EasyUI` 还支持主题定制,可以轻松更改界面风格以适应不同品牌或设计需求。同时,它...
2.3 **可伸缩面板**:某些面板支持动态调整大小,用户可以手动拉伸面板以改变其内容区域的宽度或高度。 2.4 **布局面板**:布局(layout)组件允许创建复杂的多区布局,包含上、下、左、右、中心等多个区域,各区域...
- 分页(pagination):用于为表格或列表数据提供分页功能。 - 搜索框(searchbox):这是一个封装好的搜索输入框组件。 - 进度条(progressbar):这个组件用于显示操作进度信息。 2. 布局管理器(Layout) - 控制面板...