我已成功将敲除数据绑定到DataTable .net表。
我在行单击上添加了一个JQuery到表中，并且可以从行中获取数据。
我需要将此数据传递到使用Knockout的表单中，因为它是单页应用程序，所以表单数据开始为空。
然后我在保存表单时遇到了一个问题，即数据不是更新的数据。
我在哪里哪里完全错了？
`
ko.observableArray.fn.subscribeArrayChanged = function (addCallback, deleteCallback) {
var previousValue = undefined;
this.subscribe(function (_previousValue) {
previousValue = _previousValue.slice(0);
}, undefined, 'beforeChange');
this.subscribe(function (latestValue) {
var editScript = ko.utils.compareArrays(previousValue, latestValue);
for (var i = 0, j = editScript.length; i < j; i++) {
switch (editScript[i].status) {
case "retained":
break;
case "deleted":
if (deleteCallback)
deleteCallback(editScript[i].value);
break;
case "added":
if (addCallback)
addCallback(editScript[i].value);
break;
}
}
previousValue = undefined;
});
}
var dummyText = "Please Insert";
var CustomerDispute = function (data, dt) {
var self = this;
self.customer = ko.observable(data);
self.id = ko.observable(data.Id);
self.firstName = ko.observable(data.FirstName);
self.lastName = ko.observable(data.LastName);
self.address = ko.observable(data.Address);
self.county = ko.observable(data.County);
self.region = ko.observable(data.Region);
self.disputes = ko.observable(data.Disputes);
self.liveDisputeCount = ko.observable(data.LiveDisputeCount);
self.closedDisputeCount = ko.observable(data.ClosedDisputeCount);
}
var CustomerViewModel;
$(document).ready(function () {
// Customer Dispute List - ListPartialView DataTable
var customerDisputeDT = $("#datatable1").DataTable({
"responsive": false,
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
],
"iDisplayLength": 10,
"aLengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
"ordering": true,
"order": [[1, "asc"]],
"paging": true,
"searching": true,
"columns": [
{ "data": "id" },
{ "data": "lastName" },
{ "data": "firstName" },
{ "data": "county" },
{ "data": "region" },
{ "data": "liveDisputeCount" },
{ "data": "closedDisputeCount" }
]
});
$('#datatable1 tbody').on('click', 'tr', function () {
var table = $('.dataTable').DataTable();
// Get the Selected Row - to send the id to the api
var data = ' {
"Customer":null,
"Id":"8f48efa0-efe1-4ff9-acff-27c3b6043bb5",
"FirstName":"Mark",
"LastName":"Evans",
"TitleId":"00000000-0000-0000-0000-000000000000",
"Address":{
"Id":"e28df626-61f4-41b3-901d-d9f9c5b4139f",
"Address1":"2 letsby Avenue",
"Address2":null,
"County":"Devon",
"Region":"South West",
"Country":null,
"Postcode":"PL4 8ND"
},
"County":"Devon",
"Region":"South West",
}';
CustomerViewModel = CustomerViewModel(data);
customer = CustomerViewModel;
});
function CustomerViewModel(data) {
if (data === undefined) return;
var self = this;
self.Id = ko.observable(data && data.id ? data.Id : null);
self.Title = ko.observable(data && data.title ? data.title : null);
self.FirstName = ko.observable(data && data.firstName ? data.firstName : null);
self.LastName = ko.observable(data && data.lastName ? data.lastName : null);
self.change = ko.observable(false);
//self.Customer = new Customer(data);
}
function CustomerDisputesViewModel() {
var self = this;
self.customer = ko.observable();
self.customers = ko.observableArray([]);
//self.customer = CustomerViewModel(data);
//self.customer = Customer(data);
//self.customerData = ko.observable(new CustomerViewModel());
//self.customerMap = function (data) {
// //var mappedCustomer = $.map(data, function (item) {
// // return new CustomerViewModel(data);
// //});
// self.customer = new CustomerViewModel(data);
//}
//self.LoadData = function () {
// var data = $('#customerData').val();
// var mappedCustomer = $.map(data, function (item) {
// return new Customer(data);
// });
// self.customers(mappedCustomer);
//}
//self.LoadData();
self.editCustomer = function () {
$(event.target).hide();
$(event.target).next("input").show();
$(event.target).next("input").focus();
}
self.unfocus = function () {
$(event.target).hide();
$(event.target).prev("text").show()
}
self.saveCustomer = function (customer) {
var customer = ko.toJSON(CustomerViewModel.customerData, {
ignore: [ "change" ]});
$.ajax("/Customer/Put", {
dataType: 'json',
//data: ko.toJSON({ id: self.customerData.id, customer: self.customerData }),
//data: ko.toJSON({ customer: self.customerData }),
data: customer,
type: "PUT",
contentType: "application/json; charset=utf-8",
success: function (result) { alert(result) }
});
}
}
var customerDisputes = ko.mapping.fromJS([])
var data =
ko.mapping.fromJS(
data,
{
key: function (data) {
var d = data;
return ko.utils.unwrapObservable(d.id);
},
create: function (options) {
return new CustomerDispute(options.data, customerDisputeDT);
}
},
customerDisputes
);
});
ko.applyBindings(new CustomerDisputesViewModel());
});<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="row lightgrey-bg" id="CustomerDisputesPage">
<div class="col-md-12 col-md-offset-12 col-lg-12">
<div class="block">
<div class="table-responsive">
<table id="datatable1" style="width:100%;" class="table table-vcenter table-bordered dataTable table-striped" aria-describedby="example-datatable_info">
<thead>
<tr role="row">
<th class="text-center tbl-head" role="columnheader" rowspan="1" colspan="1" style="width: 150px;">Id</th>
<th class="text-center tbl-head" role="columnheader" rowspan="1" colspan="1" style="width: 150px;">Last Name</th>
<th class="text-center tbl-head" role="columnheader" rowspan="1" colspan="1" style="width: 200px;">First Name</th>
<th class="text-center tbl-head" role="columnheader" rowspan="1" colspan="1" style="width: 150px;">Address (County)</th>
<th class="text-center tbl-head" role="columnheader" rowspan="1" colspan="1" style="width: 200px;">Region</th>
<th class="text-center tbl-head" role="columnheader" rowspan="1" colspan="1" style="width: 100px;">Live disputes</th>
<th class="text-center tbl-head" role="columnheader" rowspan="1" colspan="1" style="width: 100px;">Closed disputes</th>
<th class="text-center sorting_disabled tbl-head" role="columnheader" rowspan="1" colspan="1" aria-label="Actions" style="width: 50px;">Actions</th>
</tr>
</thead>
</table>
<br />
</div>
</div>
</div>
</div>
<div class="row lightgrey-bg" id="CustomerDetailPage" >
<div class="col-md-12 col-md-offset-12 col-lg-12">
<div class="block">
<div class="block-title">
<div id="CustomerForm" data-bind="with: CustomerViewModel">
<input type="hidden" id="customerData" name="customerData">
<br /><br />
<div class="row ">
<div class="col-sm-6 col-md-6 col-lg-6">
<span class="label-text">ID</span>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<text class="model-text" data-bind="text:Id, visible:!change(), click:editCustomer"> </text>
<input class="model-text" data-bind="value:Id, visible:change, event: { blur: unfocus }" />
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<span class="label-text">FIRST NAME</span>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<text class="model-text" data-bind="text:FirstName ? FirstName : dummyText, visible:!change(), click:editCustomer"> </text>
<input class="model-text" data-bind="value:FirstName, visible: change, event: { blur: unfocus }" />
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<span class="label-text">LAST NAME</span>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<text class="model-text" data-bind="text:LastName ? LastName : dummyText, visible:!change(), click:editCustomer"> </text>
<input class="model-text" data-bind="value:LastName, visible:change, event: { blur: unfocus }" />
</div>
</div>
<hr />
</div>
</div>
</div>
</div>
</div>
`