以下是对象的示例结构：
[{
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>
答案 0 :(得分：0)
谢谢大家......我找到了答案：
<table data-bind="visible:tableVisible"> <tr><td> <button data-bind='click: addMasterType'>Add New MasterType</button></td></tr> <!-- ko foreach: MasterTypes --> <tr> <td data-bind='text: MasterType'></td> <td><button data-bind='click: $root.editMasterType'>Edit</button></td> </tr> <!-- /ko --> </table> <div > <table> <tbody data-bind="with: SelectedMasterType"> <tr> <td> <input data-bind="value: MasterType,valueUpdate: 'afterkeydown'" /> </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.SelectedMasterType = ko.observable(null); self.tableVisible = ko.observable(true); self.MasterTypes = ko.observableArray(ko.utils.arrayMap(mastertypes, function (mastertype) { return { MasterType: ko.observable(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: ko.observable(""), Types: ko.observableArray( [{ TypeStage: "", TypeDate: "", SubTypes: ko.observableArray()}] ) }); self.SelectedMasterType(self.MasterTypes()[self.MasterTypes().length - 1]); }; self.editMasterType = function (masteryype) { self.tableVisible(false); self.SelectedMasterType(masteryype); }; 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("") self.SelectedMasterType(null); self.tableVisible(true); alert('That is it!'); } }); }; self.lastSavedJson = ko.observable("") }; ko.applyBindings(new MasterTypesModel()); </script>