jquery之表格伸縮功能(動態子表)

做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 += ""; html += ""; for(var i=0; i < detail.length; i++) { html += ""; html += "" } 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 hello2013-1-10 test 停用 刪除

1 test hello2013-1-10 test 停用 刪除


附上開源插件鏈接:https://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *