使用 Knockout JS 的数据绑定复选框
Data - binding check boxes using Knockout JS
我有一个 HTML table,其中有一列用于检查行(在单元格中有一个复选框)。
我正在使用 knockout 将 selected 复选框绑定到一个具有属性 ID 的可观察数组,如下所示。(没有 "checked"[=31 也能正常工作=])
NListTable 是来自 getJson 的可观察数组(它填充 return 上的 table)。我希望能够在填充 table 后 post selected ID。
<thead>
<tr>
<th style=" text-align:center"><b>Generate Notice</b><input type="checkbox" data-bind="checked: SelectAll" /></th>
<th style=" text-align:center"><b>Name</b></th>
<th style=" text-align:center"><b>Application Number</b></th>
<th style=" text-align:center"><b>Right ID</b></th>
<th style=" text-align:center"><b> Division</b></th>
<th style=" text-align:center"><b>Use ID</b></th>
</tr>
</thead>
<tbody data-bind="foreach:NListTable">
<tr>
<td style=" text-align:center">
<input type="checkbox" data-bind="checked: Selected">
</td>
<td style=" text-align:center">
<p data-bind="text:Name"></p>
</td>
<td style=" text-align:center">
<p data-bind="text:AppNum"></p>
</td>
<td style=" text-align:center">
<p data-bind="text:ID"></p>
</td>
<td style=" text-align:center">
<p data-bind="text:DivName"></p>
</td>
<td style=" text-align:center">
<p data-bind="text:useID"></p>
</td>
</tr>
</tbody>
JS
function RowData(Name, AppNum, ID, DivName, useID) {
var self = this;
self.Selected = ko.observable(true);
self.Name = ko.observable(Name);
self.AppNum = ko.observable(AppNum);
self.ID = ko.observable(ID);
self.DivName = ko.observable(DivName);
self.useID = ko.observable(useID);
}
self.NListTable = ko.observableArray([new RowData()]);
//self.selectedThings = ko.observableArray([]);
self.SelectAll = ko.computed({
read: function () {
var item = ko.utils.arrayFirst(self.NListTable(), function (item) {
return !item.Selected();
});
return item == null;
},
write: function (value) {
ko.utils.arrayForEach(self.NListTable(), function (rowData) {
rowData.Selected(value);
});
}
});
getJSON
function (data) {
$("#nListTable").show();
for (var i = 0; i < data.length; i++) {
if (data[i] != null) {
self.NListTable.push(RowData(data[i].FirstName + ' ' + data[i].LastName, data[i].AppPre + '-' + data[i].AppNum, data[i].ID, data[i].DivName, data[i].useID));
}
}
});
我正在尝试使用 HTML 属性 "checked" 在页面加载时 select 所有复选框,但这不起作用即使我使用它,我所有的复选框都未选中。
如何预先select所有复选框
嗯,你应该这样做
查看模型:
self.SelectAll = ko.computed({
read: function () {
var item = ko.utils.arrayFirst(self.NListTable(), function (item) {
return !item.Selected();
});
return item == null;
},
write: function (value) {
ko.utils.arrayForEach(self.NListTable(), function (rowData) {
rowData.Selected(value);
});
}
});
工作fiddlehere
我有一个 HTML table,其中有一列用于检查行(在单元格中有一个复选框)。
我正在使用 knockout 将 selected 复选框绑定到一个具有属性 ID 的可观察数组,如下所示。(没有 "checked"[=31 也能正常工作=])
NListTable 是来自 getJson 的可观察数组(它填充 return 上的 table)。我希望能够在填充 table 后 post selected ID。
<thead>
<tr>
<th style=" text-align:center"><b>Generate Notice</b><input type="checkbox" data-bind="checked: SelectAll" /></th>
<th style=" text-align:center"><b>Name</b></th>
<th style=" text-align:center"><b>Application Number</b></th>
<th style=" text-align:center"><b>Right ID</b></th>
<th style=" text-align:center"><b> Division</b></th>
<th style=" text-align:center"><b>Use ID</b></th>
</tr>
</thead>
<tbody data-bind="foreach:NListTable">
<tr>
<td style=" text-align:center">
<input type="checkbox" data-bind="checked: Selected">
</td>
<td style=" text-align:center">
<p data-bind="text:Name"></p>
</td>
<td style=" text-align:center">
<p data-bind="text:AppNum"></p>
</td>
<td style=" text-align:center">
<p data-bind="text:ID"></p>
</td>
<td style=" text-align:center">
<p data-bind="text:DivName"></p>
</td>
<td style=" text-align:center">
<p data-bind="text:useID"></p>
</td>
</tr>
</tbody>
JS
function RowData(Name, AppNum, ID, DivName, useID) {
var self = this;
self.Selected = ko.observable(true);
self.Name = ko.observable(Name);
self.AppNum = ko.observable(AppNum);
self.ID = ko.observable(ID);
self.DivName = ko.observable(DivName);
self.useID = ko.observable(useID);
}
self.NListTable = ko.observableArray([new RowData()]);
//self.selectedThings = ko.observableArray([]);
self.SelectAll = ko.computed({
read: function () {
var item = ko.utils.arrayFirst(self.NListTable(), function (item) {
return !item.Selected();
});
return item == null;
},
write: function (value) {
ko.utils.arrayForEach(self.NListTable(), function (rowData) {
rowData.Selected(value);
});
}
});
getJSON
function (data) {
$("#nListTable").show();
for (var i = 0; i < data.length; i++) {
if (data[i] != null) {
self.NListTable.push(RowData(data[i].FirstName + ' ' + data[i].LastName, data[i].AppPre + '-' + data[i].AppNum, data[i].ID, data[i].DivName, data[i].useID));
}
}
});
我正在尝试使用 HTML 属性 "checked" 在页面加载时 select 所有复选框,但这不起作用即使我使用它,我所有的复选框都未选中。
如何预先select所有复选框
嗯,你应该这样做
查看模型:
self.SelectAll = ko.computed({
read: function () {
var item = ko.utils.arrayFirst(self.NListTable(), function (item) {
return !item.Selected();
});
return item == null;
},
write: function (value) {
ko.utils.arrayForEach(self.NListTable(), function (rowData) {
rowData.Selected(value);
});
}
});
工作fiddlehere