3

我在第一列中有一个带有复选框的表格。在标题中，我还有一个复选框。单击此选项应检查我表中的所有复选框。

<table class="defaultGrid">
<thead>
    <tr>
        <th><input type="checkbox"></th>
        <th>ID</th>
        <th>Name</th>
    </tr>
</thead>
<tbody data-bind="foreach: model.Things">
    <tr data-bind="css: {selected: IsSelected}">
        <td><input type="checkbox" data-bind="checked: IsSelected" /></td>
        <td data-bind="text: ID"></td>
        <td data-bind="text: Name"></td>
    </tr>
</tbody>
</table>

这是jsfiddle：http: //jsfiddle.net/jJ4H6/29/

如何通过淘汰赛来做到这一点？

谢谢。

4

1 回答 1

3

您需要有一个函数来遍历Things集合中的所有项目并将其设置IsSelected为 true 或 false。

然后你可以在“main”复选框上绑定这个函数点击：

<input type="checkbox" data-bind="click: selectAll"/>

示例实现如下所示：

self.selectAll = function(data, event)
{
    ko.utils.arrayForEach(self.model.Things (), function(item){
       if (event.target.checked)
          item.IsSelected(true);
       else
          item.IsSelected(false);
    });
    return true; //to trigger the browser default bahaviour
}

演示JSFiddle。

或者，您可以IsAllSelected在 viewmodel 上拥有一个属性并使用checked绑定而不是单击，并在 IsAllSelected(或者您也可以使用可写的计算 observable) 的 change 事件中执行选择逻辑。

我认为如果你想支持这样的场景，最终你将需要这样的东西：全选 - >手动取消选中每一行应该取消选中标题行等。

另一个使用IsAllSelected计算属性的演示

self.IsAllSelected = ko.computed({
        read: function () {
            var isAllSelected = true;
            ko.utils.arrayForEach(self.model.Things(), function (item) {
                isAllSelected = isAllSelected && item.IsSelected()
            });
            return isAllSelected;
        },
        write: function (value) {
            ko.utils.arrayForEach(self.model.Things(), function (item) {
                if (value) item.IsSelected(true);
                else item.IsSelected(false);
            });
        }
});
于 2013-03-21T10:14:36.677 回答