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 に設定する関数が必要です。

次に、「メイン」チェックボックスのクリックでこの関数をバインドできます。

<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、ビューモデルにプロパティを設定しchecked、クリックの代わりにバインディングを使用して、変更イベント内で選択ロジックを IsAllSelected実行できます (または、書き込み可能な計算オブザーバブルを使用することもできます)。

次のようなシナリオをサポートしたい場合は、最終的にはこのようなものが必要になると思います: すべてを選択 -> 各行を手動でチェック解除すると、ヘッダー行などのチェックを解除する必要があります。

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 に答える