作者sk1765 (愛是一種忍耐)
看板Ajax
標題Re: [問題] 表格tree的做法
時間Sat Feb 11 10:52:44 2012
※ 引述《jackyeah1213 (frog)》之銘言：
: http://ppt.cc/w_OD
: 上面網址是我想要做到的示意圖
: 按下"行政部"之後
: 會跑出他相關的資料
: 再按一下"行政處"
: 則是縮起來
: 按下"文學院"
: 跑出"中國文學系""歷史學系"
: 按下"歷史學系" 跑出相對應資料
: 其餘的同理@@
: 然後按下旁邊菱形的圖案
: 則是將所屬的所有資料全部打開、關閉
: ===========以上是解釋===========
: 因為要做到這種打開關閉的動作
: 所以我想說使用toggle
: 我原先作法是
: html:
: <label onclick="ctl('aa')">行政處</label>
: <tr id="aa1">
: <td>行政處的對應資料</td>
: </tr>
: javascript:
: function ctl(num)
: {
: $("tr[id*="+num+"]").toggle();
: }
: 但我想要把第一次按下跟第二次暗下的動作
: 分別再加入事件
: 所以才會上網找了範例(PO在版上的那個)
: 但範例的觸發是寫在ready function裡
: 而我是希望可以分別寫在物件的onclick去呼叫function
: 因為無法預先知道會有幾層以及共有幾種類別@@
: 想請問
: 有比較好的作法嗎~"~http://ppt.cc/w_OD
: 上面網址是我想要做到的示意圖
: 按下"行政部"之後
: 會跑出他相關的資料
: 再按一下"行政處"
: 則是縮起來
: 按下"文學院"
: 跑出"中國文學系""歷史學系"
: 按下"歷史學系" 跑出相對應資料
: 其餘的同理@@
: 然後按下旁邊菱形的圖案
: 則是將所屬的所有資料全部打開、關閉
: ===========以上是解釋===========
: 因為要做到這種打開關閉的動作
: 所以我想說使用toggle
: 我原先作法是
: html:
: <label onclick="ctl('aa')">行政處</label>
: <tr id="aa1">
: <td>行政處的對應資料</td>
: </tr>
: javascript:
: function ctl(num)
: {
: $("tr[id*="+num+"]").toggle();
: }
: 但我想要把第一次按下跟第二次暗下的動作
: 分別再加入事件
: 所以才會上網找了範例(PO在版上的那個)
: 但範例的觸發是寫在ready function裡
: 而我是希望可以分別寫在物件的onclick去呼叫function
: 因為無法預先知道會有幾層以及共有幾種類別@@
: 想請問
: 有比較好的作法嗎~"~
寫了一個範例
http://jsfiddle.net/PCQ4D/
展開收合表格
主要原理就是要建立父子層的關係 這邊是用 id 和 ref兩屬性建立之間的關係
建立好之後 再建立一個父子層對照表 tabref
{ id, [所有子項的element] }
然後再建立event handler 當按到某列時 收合所有子項
如果子項還有子項 繼續recursive
還有很多其他作法
<table>
<tr>
<td>位置</td><td>名稱</td><td>信箱</td><td>學號</td><td>編碼</td><td>編號</td>
</tr>
<tr id='a1'>
<th colspan='6'>o1</th>
</tr>
<tr id='a1-1' ref='a1'>
<th colspan='6'>o1-1</th>
</tr>
<tr ref='a1-1'>
<td>aa1</td><td>bb1</td><td>cc1</td><td>dd1</td><td>ee1</td><td>ff1</td>
</tr>
<tr ref='a1-1'>
<td>aa2</td><td>bb2</td><td>cc2</td><td>dd2</td><td>ee2</td><td>ff2</td>
</tr>
<tr ref='a1'>
<td>a1</td><td>b1</td><td>c1</td><td>d1</td><td>e1</td><td>f1</td>
</tr>
<tr ref='a1'>
<td>a2</td><td>b2</td><td>c2</td><td>d2</td><td>e2</td><td>f2</td>
</tr>
<tr id='a2'>
<th colspan='6'>o2</th>
</tr>
<tr ref='a2'>
<td>u1</td><td>v1</td><td>w1</td><td>x1</td><td>y1</td><td>z1</td>
</tr>
<tr ref='a2'>
<td>u2</td><td>v2</td><td>w2</td><td>x2</td><td>y2</td><td>z2</td>
</tr>
</table>
table { width:100%;
border: 1px solid black;
}
tr {width:auto;}
td { border: 1px solid red; }
th { border: 1px solid blue; }
$(document).ready(function() {
var tabref = {};
$('tr').each( function() {
//alert( 'id=' + $(this).attr('id') + ' ref=' + $(this).attr('ref') );
var xref = $(this).attr('ref');
var row = $(this)[0];
if (xref) {
if ( !tabref.hasOwnProperty(xref) ) {
tabref[xref] = [];
}
tabref[xref].push( row );
//alert(xref + " reference : " + (tabref[xref][ tabref[xref].length-1 ].id ||
// tabref[xref][ tabref[xref].length-1 ].innerHTML) );
}
});
$.each(tabref, function(key, items) {
//alert(key + ': ' + items.length);
$('#' + key).toggle(function() {
runson(items,'hide');
}, function() {
runson(items,'show');
});
});
var runson = function(ary,act) {
$.each( ary,function(index,item){
//alert( 'item.id=' + item.id + ' tabref[item.id]='+ tabref[item.id]);
if (item.id && tabref[item.id]) {
runson(tabref[item.id],act);
}
act =='show' ? $(item).show() : $(item).hide();
});
}
});
--
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 175.181.127.213