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