我是第一次使用knockout,并尝试实现一个第一列为复选框的表格。当我点击表头时,整列都应该被选中/取消选中。目前,当我点击表格行(所有行都被选中/取消选中)时,它可以工作,但在表头上不行。请让我知道我的代码有什么问题!以下是我的部分代码:
<table>
<tr>
<th><input type="checkbox" data-bind="click: selectAll"></th>
<th>Notes</th>
</tr>
<tbody data-bind="foreach: DocumentRows">
<tr>
<td><input type="checkbox" data-bind="checked: $parent.IsSelected"></td>
<td><data-bind="text: Notes"></td>
</tr>
</tbody>
</table>
// Script.ts
```
define(['knockout', 'jquery', 'text!./Template'], (ko, $, htmlString) => {
//Document
class Document {
Id: KnockoutObservable<number>;
Notes: KnockoutObservable<string>;
constructor(data?) {
this.Id = ko.observable(0);
this.Notes = ko.observable("").extend({ defaultValue: "" });
if (data != null) {
ko.mapping.fromJS(data, {}, this);
}
}
};
//DocumentS VIEW MODEL
class DocumentsViewModel {
DocumentRows: KnockoutObservableArray<Document>;
IsSelected: KnockoutObservable<boolean>;
constructor(params) {
this.DocumentRows = ko.observableArray([]);
this.IsSelected = ko.observable(false);//
this.InitComputed();
this.Load();
}
InitComputed = () => {
selectAll = (Document: DocumentsViewModel) => {
var doc = Document.DocumentRows;
ko.utils.arrayForEach(doc(), function (item) {
item.IsSelected(true);
});
}
Load = () => {
DocumentsApiService.GetDocumentList(this);
}
}
//API SERVICE
class DocumentsApiService {
static GetDocumentList = (model: DocumentsViewModel) => {
$.ajax({
url: buildUrl(model.LoadListURL, { 'id': model.ObjectId(), 'additionalId': model.AdditionalId() }),
type: 'POST',
data: ko.mapping.toJSON(model.Filter),
contentType: 'application/json; charset=utf-8'
}).done(allData => {
var mapped = ko.mapping.fromJS(allData, DocumentsMapping);
model.DocumentRows(mapped.DocumentRows());
model.Filter.TotalCount(mapped.TotalCount());
model.Filter.PageIndex(mapped.Filter.PageIndex());
CalcCountTableStatus(model.Filter.PageIndex(), model.Filter.PageSize(), model.Filter.TotalCount(), 'documents-count-status-line');
}).fail(data => {
TSCore.OnFailure(data);
});
}
}
return { viewModel: DocumentsViewModel, template: htmlString }
});
```
2条答案
按热度按时间ki1q1bka1#
当实现这样的选择特征时,通常有两种方法。
在
Document
级别具有可观察的isSelected
布尔值将
isSelected
可观测性放在Document
模型上,而no放在DocumentsViewModel
模型上,因为每个文档都必须包含信息,无论它是否被选中。我猜您试图实现这种方法,但是乍一看,您没有将
IsSelected
放在正确的位置。另外,如果您将IsSelected
移动到文档中,那么在您看来,不要使用$parent.IsSelected
,而只使用IsSelected
。在
DocumentsViewModel
级别维护一个selectedDocuments
可观察文档数组通过这种方式,您可以拥有一个包含所有当前选定文档的可观察数组,并在选择所有这些文档时保持该数组(如将所有行推送到选定内容)
在视图中,必须使用父引用来确定是否选择了文档,例如
$parent.selectedDocuments.indexOf($data) >= 0
.现在我不会讨论这两种方法的所有优点和缺点,但是如果可以用
IsSelected
可观察对象扩展文档模型,我建议使用第一种方法。其他备注
现在还不清楚您想用
InitComputeds
实现什么。如果您使用此语法,则必须在视图级别绑定函数,如
$data.selectAll.bind($data)
。如果您不希望这样,而只希望使用纯selectAll
,则可以使用箭头函数作为字段语法,如以下所示。希望我能给予你一些有价值的提示。
5sxhfpxr2#
因此,更改表格标题后:
表体:
脚本:
//文档视图模型
当所有行都被选中时,它不显示要被选中的标题,当所有行都被选中时,它不显示要被选中的标题。