HTML 中 Table 的折叠树开始关闭
Collapsing Tree with Table in HTML starting closed
我正在使用此示例中的代码 http://jsfiddle.net/Vd5BH/5/ 并且我想在折叠关闭的情况下启动表格,但我不知道如何执行此操作。
有人知道吗?
Link http://jsfiddle.net/Vd5BH/5/
非常感谢!
HTML
<table id="mytable">
<tr data-depth="0" class="collapse level0">
<td><span class="toggle collapse"></span>Item 1</td>
<td>123</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td><span class="toggle"></span>Item 2</td>
<td>123</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td>Item 3</td>
<td>123</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td>Item 4</td>
<td>123</td>
</tr>
<tr data-depth="0" class="collapse collapsable level0">
<td><span class="toggle collapse"></span>Item 5</td>
<td>123</td>
</tr>
<tr data-depth="1" class="collapse collapsable level1">
<td>Item 6</td>
<td>123</td>
</tr>
</table>
风格
table td {
border: 1px solid #eee;
}
.level1 td:first-child {
padding-left: 15px;
}
.level2 td:first-child {
padding-left: 30px;
}
.collapse .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif");
}
.expand .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/expand.gif");
}
.toggle {
height: 9px;
width: 9px;
display: inline-block;
}
JAVASCRIPT
$(function() {
$('#mytable').on('click', '.toggle', function () {
//Gets all <tr>'s of greater depth
//below element in the table
var findChildren = function (tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function () {
return $(this).data('depth') <= depth;
}));
};
var el = $(this);
var tr = el.closest('tr'); //Get <tr> parent of toggle button
var children = findChildren(tr);
//Remove already collapsed nodes from children so that we don't
//make them visible.
//(Confused? Remove this code and close Item 2, close Item 1
//then open Item 1 again, then you will understand)
var subnodes = children.filter('.expand');
subnodes.each(function () {
var subnode = $(this);
var subnodeChildren = findChildren(subnode);
children = children.not(subnodeChildren);
});
//Change icon and hide/show children
if (tr.hasClass('collapse')) {
tr.removeClass('collapse').addClass('expand');
children.hide();
} else {
tr.removeClass('expand').addClass('collapse');
children.show();
}
return children;
});
});
添加 $('.toggle').click();
作为 $(document).ready()
中的最后一项。
//Change icon and hide/show children
if (tr.hasClass('collapse')) {
tr.removeClass('collapse').addClass('expand');
children.hide();
} else {
tr.removeClass('expand').addClass('collapse');
children.show();
}
return children;
});
$('.toggle').click();
});
我正在使用此示例中的代码 http://jsfiddle.net/Vd5BH/5/ 并且我想在折叠关闭的情况下启动表格,但我不知道如何执行此操作。 有人知道吗? Link http://jsfiddle.net/Vd5BH/5/ 非常感谢!
HTML
<table id="mytable">
<tr data-depth="0" class="collapse level0">
<td><span class="toggle collapse"></span>Item 1</td>
<td>123</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td><span class="toggle"></span>Item 2</td>
<td>123</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td>Item 3</td>
<td>123</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td>Item 4</td>
<td>123</td>
</tr>
<tr data-depth="0" class="collapse collapsable level0">
<td><span class="toggle collapse"></span>Item 5</td>
<td>123</td>
</tr>
<tr data-depth="1" class="collapse collapsable level1">
<td>Item 6</td>
<td>123</td>
</tr>
</table>
风格
table td {
border: 1px solid #eee;
}
.level1 td:first-child {
padding-left: 15px;
}
.level2 td:first-child {
padding-left: 30px;
}
.collapse .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif");
}
.expand .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/expand.gif");
}
.toggle {
height: 9px;
width: 9px;
display: inline-block;
}
JAVASCRIPT
$(function() {
$('#mytable').on('click', '.toggle', function () {
//Gets all <tr>'s of greater depth
//below element in the table
var findChildren = function (tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function () {
return $(this).data('depth') <= depth;
}));
};
var el = $(this);
var tr = el.closest('tr'); //Get <tr> parent of toggle button
var children = findChildren(tr);
//Remove already collapsed nodes from children so that we don't
//make them visible.
//(Confused? Remove this code and close Item 2, close Item 1
//then open Item 1 again, then you will understand)
var subnodes = children.filter('.expand');
subnodes.each(function () {
var subnode = $(this);
var subnodeChildren = findChildren(subnode);
children = children.not(subnodeChildren);
});
//Change icon and hide/show children
if (tr.hasClass('collapse')) {
tr.removeClass('collapse').addClass('expand');
children.hide();
} else {
tr.removeClass('expand').addClass('collapse');
children.show();
}
return children;
});
});
添加 $('.toggle').click();
作为 $(document).ready()
中的最后一项。
//Change icon and hide/show children
if (tr.hasClass('collapse')) {
tr.removeClass('collapse').addClass('expand');
children.hide();
} else {
tr.removeClass('expand').addClass('collapse');
children.show();
}
return children;
});
$('.toggle').click();
});