使用折叠的 (parent/child) 行创建 tbody
Create tbody with collapsed (parent/child) rows
我有一个 tbody
table,其父子结构由 knockout 视图模型支持。父子结构如下所示:
<tbody>
<!-- ko foreach: modelyears -->
<tr>
<td >
<span data-bind="text: modelyear_name"></span>
</td>
<td>
</td>
</tr>
<!-- ko foreach: projects -->
<tr>
<td >
</td>
<td>
<span data-bind="text: project_name"></span>
</td>
</tr>
<!-- /ko -->
<!-- /ko -->
</tbody>
如何创建父行 expandable/collapsable?
我想点击父 tr
到 show/hide 子行(项目)。
正如 supper cool 指出的那样,最好的解决方案是使用一些 UI 效果,让您以更时尚的方式扩展。不过,简单的解决办法是维护一个boolean值,表示modelyear是否展开:
<tbody>
<!-- ko foreach: modelyears -->
<tr data-bind="click: expandClose">
<td >
<span data-bind="text: modelyear_name"></span>
</td>
<td>
</td>
</tr>
<!-- ko foreach: projects -->
<tr data-bind="if: $parent.isExpanded">
<td >
</td>
<td>
<span data-bind="text: project_name"></span>
</td>
</tr>
<!-- /ko -->
<!-- /ko -->
</tbody>
expandClose 只是在模型年对象的 isExpanded 属性 上的 true/false 之间切换(这必须是 ko.observable)。有了这个,只要这个属性是true/false,knockout就会add/remove到DOM的元素。您也可以使用 visible 而不是 if。区别在于visible渲染一次,然后在display/display:none之间切换,而if重新渲染。注意:检查语法,因为我还没有测试这段代码。
我用 bootstrap "collapse" 功能自己解决了。
"data-target" 是对敲除计算值的绑定,我从当前父项的 ITEM ID 中获取它。
这是 HTML 中的代码(我使用 DIV 表示父子关系,并使用超链接属性来切换子对象):
'<!-- ko foreach: modelyears -->
<div>
<table>
<tr>
<td >
<a href="#" data-toggle="collapse" data-bind="attr: {'id': child_id, 'data-target' : data_target }">
<span data-bind="text: modelyear_name" ></span>
</a>
</td>
</tr>
</table>
</div>
<!-- ko foreach: projects -->
<div data-bind="css: project_classname">
<table>
<tr>
<td></td>
<td colspan="2">
<div>
<span data-bind="text: project_name"></span>
</div>
</td>
</tr>
</table>
</div>
<!-- /ko -->
<!-- /ko -->
</div>'
在淘汰模型中计算的淘汰变量"child_id"和"data-target"和"project_classname":
// compute "project_classname"
this.project_classname = ko.computed(function() {
return "collapse row" + self.project_modelyear_itemid();
}, this);
// compute "child_id"
this.child_id = ko.computed(function ()
{
return "row" + self.modelyear_itemid();
}, this);
// compute "data_target"
this.data_target = ko.computed(function ()
{
return ".row" + self.modelyear_itemid();
}, this);
希望它能帮助到那里的人 ;-)
我有一个 tbody
table,其父子结构由 knockout 视图模型支持。父子结构如下所示:
<tbody>
<!-- ko foreach: modelyears -->
<tr>
<td >
<span data-bind="text: modelyear_name"></span>
</td>
<td>
</td>
</tr>
<!-- ko foreach: projects -->
<tr>
<td >
</td>
<td>
<span data-bind="text: project_name"></span>
</td>
</tr>
<!-- /ko -->
<!-- /ko -->
</tbody>
如何创建父行 expandable/collapsable?
我想点击父 tr
到 show/hide 子行(项目)。
正如 supper cool 指出的那样,最好的解决方案是使用一些 UI 效果,让您以更时尚的方式扩展。不过,简单的解决办法是维护一个boolean值,表示modelyear是否展开:
<tbody>
<!-- ko foreach: modelyears -->
<tr data-bind="click: expandClose">
<td >
<span data-bind="text: modelyear_name"></span>
</td>
<td>
</td>
</tr>
<!-- ko foreach: projects -->
<tr data-bind="if: $parent.isExpanded">
<td >
</td>
<td>
<span data-bind="text: project_name"></span>
</td>
</tr>
<!-- /ko -->
<!-- /ko -->
</tbody>
expandClose 只是在模型年对象的 isExpanded 属性 上的 true/false 之间切换(这必须是 ko.observable)。有了这个,只要这个属性是true/false,knockout就会add/remove到DOM的元素。您也可以使用 visible 而不是 if。区别在于visible渲染一次,然后在display/display:none之间切换,而if重新渲染。注意:检查语法,因为我还没有测试这段代码。
我用 bootstrap "collapse" 功能自己解决了。
"data-target" 是对敲除计算值的绑定,我从当前父项的 ITEM ID 中获取它。
这是 HTML 中的代码(我使用 DIV 表示父子关系,并使用超链接属性来切换子对象):
'<!-- ko foreach: modelyears -->
<div>
<table>
<tr>
<td >
<a href="#" data-toggle="collapse" data-bind="attr: {'id': child_id, 'data-target' : data_target }">
<span data-bind="text: modelyear_name" ></span>
</a>
</td>
</tr>
</table>
</div>
<!-- ko foreach: projects -->
<div data-bind="css: project_classname">
<table>
<tr>
<td></td>
<td colspan="2">
<div>
<span data-bind="text: project_name"></span>
</div>
</td>
</tr>
</table>
</div>
<!-- /ko -->
<!-- /ko -->
</div>'
在淘汰模型中计算的淘汰变量"child_id"和"data-target"和"project_classname":
// compute "project_classname"
this.project_classname = ko.computed(function() {
return "collapse row" + self.project_modelyear_itemid();
}, this);
// compute "child_id"
this.child_id = ko.computed(function ()
{
return "row" + self.modelyear_itemid();
}, this);
// compute "data_target"
this.data_target = ko.computed(function ()
{
return ".row" + self.modelyear_itemid();
}, this);
希望它能帮助到那里的人 ;-)