做web設計的時候,經常會遇到父表,子表的問題,例如:班級表&學生表, 集群表&主機表等等。。說白瞭就是數據庫設計中的一對多關系的情況。
這種狀況在做頁面展示的時候,做成伸縮表格的樣子比較靈活點。下面是我參照瞭一個開源的jquery插件實現的動態伸縮表格,大傢可以參照一下。
首先,上效果圖:
比較簡陋,隻用瞭最簡單的css效果,下面貼出我的代碼。
1. 文件名:test.cssvcD4KPHByZSBjbGFzcz0=”brush:java;”>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
無標題文檔 <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 = "無記錄!"; } else { var run = resp.pool_run var detail = resp.pool_detail html += "總數:"+ run.total + " 在線:"+ run.on_line + "
"; html += "
主機名 | Worker數 | 在線Worker |
---|---|---|
"+detail[i].hostname+" | " + detail[i].worker_num html += " | " + detail[i].on_line+" | "; html += "
"; } $("#p_"+pool_id).empty(); $("#p_"+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>
PoolID | 計算池名稱 | 狀態 | 創建時間 | 備註 | 狀態變更 | 刪除 |
---|---|---|---|---|---|---|
1 | test | hello | 2013-1-10 | test | 停用 | 刪除 |
|
||||||
1 | test | hello | 2013-1-10 | test | 停用 | 刪除 |
|
附上開源插件鏈接:https://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/