作者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