0
以下为对象的样本结构：KnockoutJS添加，编辑，删除
[{
MasterType: "mtype1",
Types: [{
TypeStage: "st1",
TypeDate: "12/02/2001",
SubTypes: [{
SubTypeData: "st1"
}, {
AnotherData: "ad1"
}]
}, {
TypeStage: "st3",
TypeDate: "15/02/2001",
SubTypes: [{
SubTypeData: "st3"
}, {
AnotherData: "ad3"
}]
}]
},
{
MasterType: "mtype2",
Types: [{
TypeStage: "st2",
TypeDate: "12/04/2001",
SubTypes: [{
SubTypeData: "st2"
}, {
AnotherData: "ad2"
}]
}]
}];
注：在页面加载，对象是空的。
我需要显示每个行的编辑/删除的MasterType表。 我也需要一个“添加”按钮，然后隐藏表格并显示输入字段以输入新的MasterType的值。 保存新的MasterType后，我需要隐藏输入字段并再次显示表格。
请帮
我也做了以下内容：
<table>
<tbody data-bind="foreach: MasterTypes">
<tr><td data-bind='text: MasterType'></td></tr>
</tbody>
</table>
<div >
<table>
<tbody data-bind="foreach: MasterTypes">
<tr>
<td>
<input data-bind="value: MasterType,valueUpdate: 'afterkeydown'" />
<div><a href='#' data-bind='click: $root.removeMasterType'>Delete</a></div>
</td>
<td>
<table>
<tbody data-bind="foreach: Types">
<tr>
<td><input data-bind='value: TypeStage' /></td>
<td><input data-bind='value: TypeDate' /></td>
<td><a href='#' data-bind='click: $root.removeType'>Delete</a></td>
<td>
<table>
<tbody data-bind="foreach: SubTypes">
<tr>
<td><input data-bind='value: Discharge' /></td>
<td><a href='#' data-bind='click: $root.removeSubType'>Delete</a></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addSubType'>Add New Sub type</a>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addType'>Add new Type</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addMasterType'>Add New MasterType</button>
<button data-bind='click: save, enable: MasterTypes().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
<script type="text/javascript">
var MasterTypesModel = function (mastertypes) {
var self = this;
self.tableVisible = ko.observable(true);
self.MasterTypes = ko.observableArray(ko.utils.arrayMap(mastertypes, function (mastertype) {
return { MasterType: mastertype.MasterType, Types: ko.observableArray(ko.utils.arrayMap(mastertype.Types, function (type) {
return { TypeStage: type.TypeStage, TypeDate: type.TypeDate, SubTypes: ko.observableArray(type.SubTypes) };
}))
};
}));
self.addMasterType = function() {
// self.tableVisible(false);
self.MasterTypes.push({
MasterType: "",
Types: ko.observableArray(
[{ TypeStage: "", TypeDate: "", SubTypes: ko.observableArray()}]
)
});
};
self.removeMasterType = function (mastertype) {
self.MasterTypes.remove(mastertype);
};
self.addType = function (mastertype) {
mastertype.Types.push({
TypeStage: "",
TypeDate: "",
SubTypes: ko.observableArray()
});
};
self.removeType = function (type) {
$.each(self.MasterTypes(), function() {
this.Types.remove(type)
})
};
self.addSubType = function (type) {
type.SubTypes.push({
Discharge: ""
});
};
self.removeSubType = function (subtype) {
$.each(self.MasterTypes(), function() {
$.each(this.Types(), function() {
this.SubTypes.remove(subtype)
})
})
};
self.save = function() {
self.lastSavedJson(JSON.stringify(ko.toJS(self.MasterTypes), null, 2));
$.ajax({
url: "/MyController/UpdateMasterType",
contentType: 'application/json',
type: 'POST',
data: ko.toJSON(self.MasterTypes),
success: function (data) {
self.lastSavedJson = ko.observable("")
alert('That is it!');
}
});
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new MasterTypesModel());
</script>
你还做了什么？ – Damien
请参阅编辑后的文章，看看我有什么。我无法将其添加为评论，因为它超过了允许的字符数。 – user1918553
感谢您的时间每个人...我找到了答案....请找到最后得到答案的原文。 – user1918553