关于 knockout.js：Knockout Select/Unselect all 并获取选中的行值


Knockout Select/Unselect all and get the selected row values

我正在尝试使用敲除创建一个全选/取消全选并获取选择要保存的行的值。

我能够全选和取消全选工作，但不确定如何获取所选行的数据。

此外，如果选中一个行复选框，则每行复选框都会被选中或取消选中。如果我取消选中一个复选框，我希望取消选中全选复选框。

到目前为止，我已经做了一个小提琴 http://jsfiddle.net/adriandcosta/ewprL5bd/4/

这是我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Results

    <table width="100%" id="tblSearchResults" data-bind="visible: SearchResults().length>0">
        <thead>
            <tr>
                <th align="left">Name</th>
                <th>Gender</th>
                <th align="left">DOB</th>
                <th align="left">Join Date</th>
                <th style="width:26px">
                    <input type="checkbox" data-bind="checked: allSelected" />
                </th>
            </tr>
        </thead>
        <tbody id="EmpResults" data-bind="template: { name:'TmplSearchResults', foreach: SearchResults }"></tbody>
    </table>

模板

1
2
3
4
5
6
7
8
9
10
<script type="text/html" id="TmplSearchResults">
    <tr style ="border-bottom: 1px solid #CCC;">
        <td valign ="middle" data-bind="text: name"> </td>
       <td valign="middle" align="center" data-bind="text: gender"></td >
        <td valign ="middle"   data-bind ="text: dob"></td>
     <td valign="middle" data-bind="text: joindate"></td >
        <td valign ="middle">
            <input type ="checkbox" data-bind ="checked:$parent.isSelected">
                </td>
    </tr>

查看模型和数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var vmSearchResult;
var vmSearchResultsModel = function () {
    var self = this;
    self.showResults = ko.observable(false);
    self.SearchResults = ko.observableArray([]);
    self.isSelected = ko.observable(false); // check box
    self.allSelected = ko.observable(false); // all select checkbox

    self.allSelected.subscribe(function (newValue) {

        ko.utils.arrayForEach(vmSearchResult.SearchResults(), function (PartnerSearch) {
            vmSearchResult.isSelected(newValue);  //<== here I get the selected values need the whole row

        });
    });
}

    function ShowData() {
    vmSearchResult.SearchResults(fakeData);
        vmSearchResult.showResults(true);

    }

$(document).ready(function () {
    vmSearchResult = new vmSearchResultsModel();
    ko.applyBindings(vmSearchResult, document.getElementById("results"));
    ShowData();
});
//Fake data  
var fakeData = [{
   "name":"Adrian D'Costa",
       "dob":"25-10-1984",
       "gender":"M",
       "joindate":"30-12-2004"
}, {

   "name":"Janet D'Curz",
       "dob":"30-08-1992",
       "gender":"F",
       "joindate":"15-12-2005"
}];

相关讨论

你会想要为 allSelected 属性使用 Writable 计算 observable 而不是普通的 observable。

当写入计算的 observable 时，您现在可以管理每一行的选定状态。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
self.allSelected = ko.computed({
    read: function () {
        var firstUnchecked = ko.utils.arrayFirst(self.searchResults(), function (item) {
            return item.isSelected() == false;
        });
        return firstUnchecked == null;
    },
    write: function (value) {
        ko.utils.arrayForEach(self.searchResults(), function (item) {
            item.isSelected(value);
        });
    }
}).extend({ rateLimit: 1 });

使用这种方法，您将不再需要订阅 allSelected 的更改。

当项目列表增长到任何显着大小时，需要使用 rateLimit 扩展器来避免性能下降。 rateLimit 扩展器是在 KO 3.1 中添加的，您的小提琴引用的是 2.3。我提供的小提琴使用的是 3.2.

仅供参考，这种方法假定您在每一行上都有一个 isSelected 可观察属性。你的例子中没有这个。在随附的小提琴中，您可以看到我是如何添加的。

小提琴

性能小提琴：

  • 1000 个带有 rateLimit 的项目
  • 1000 个项目没有 rateLimit
相关讨论