Question

我正在尝试使用knockout创建一个select / un-select all并获取所选行的值以保存。

我能够全部选择并取消选择全部工作，但不知道如何获取所选行的数据。

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

我创造了迄今为止我所做的事情http://jsfiddle.net/adriandcosta/ewprL5bd/4/

这是我的代码：

<div style="height:40px">Results</div>
<div id="results" style="display:none" data-bind="visible: showResults">
    <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>
</div>

模板

<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>
</script>

查看模型和数据

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"
}];

Answer 1

您希望将Writable computed observable用于allSelected属性，而不是普通的observable。

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

示例：

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 observable属性。你的例子中没有这个。在附带的小提琴中你可以看到我是如何添加的。

fiddle

表演小提琴：

Knockout选择/取消全选并获取所选的行值

1 个答案: