您的位置：首页 > Web前端 > JQuery

jquery之表格伸缩功能（动态子表）

2014-05-09 10:05 513 查看

============================================================================

原创作品，允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。

请注明转自：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 子表表格动态伸缩

相关文章推荐

新的分享

章节导航