我使用下面的js来处理我的应用程序中的阻塞细节。我使用面向对象的JS来实现相同的功能。但是当我保存旅行的详细信息时，它将空值传递给字符串
function triptable(tablename, isTripIn, addColumnButton, saveButton, result) {
this.tableName = tablename;
this.istripin = isTripIn;
this.dataTable = null;
this.rowNum = 1;
this.colNum = 0;
this.rowCell = 0;
this.colCell = 0;
this.iterator = 0;
this.colsList = [];
this.tableData = [{}];
this.oTable = null;
this.inEditMode = null;
this.tripDetails = [{}];
this.addColumnId = addColumnButton;
this.saveId = saveButton;
this.init(result);
this.MasterScheduleId =[];
}
triptable.prototype = {
init: function (result) {
this.getSchedules(result);
},
getSchedules: function (result) {
this.colsList = [];
var returnedData = result;//JSON.parse(result);
if (returnedData.length > 0) {
var obj = returnedData[0];
var s = 1;
for (var key in obj) {
var attrName = key;
var myString = attrName.substr(attrName.indexOf("&") + 1)
var TripNo = attrName.substr(attrName.indexOf("&") + 1)
var MasterTripId = attrName.substr(0, attrName.indexOf("&"))
var tripDetail = {
'TripNo': TripNo.toString(),
'MasterTripId': MasterTripId
};
this.tripDetails.push(tripDetail);
var attrValue = obj[myString];
var column = {
"mData": key,
"mDataProp": key,
"sTitle": "<input type='checkbox' id= 'chk" + s + "'></input> Trip" + myString,
"sType": "string"
};
this.colsList.push(column);
s++;
}
results = returnedData;
var stop = this.colsList[this.colsList.length - 1];
$('#' + this.tableName + 'ColumnCount').text(this.colsList.length);
this.colNum = this.colsList.length - 1;
//var i = this.colsList.indexOf(stop);
//if (i != -1) {
// this.colsList.splice(i, 1);
//}
// this.colsList.unshift(stop);
i = this.colsList.length + 1;
this.colsList[0].sTitle = this.colsList[0].sTitle.replace("<input type='checkbox' id= 'chk1'></input> Trip", '');
this.tableData = returnedData;
this.setTable();
this.oTable = this.dataTable;
}
},
setTable: function () {
//Construct the measurement table
this.dataTable = $('#' + this.tableName).dataTable({
"bJQueryUI": true,
"bDeferRender": true,
"bInfo": false,
"bSort": false,
"bDestroy": true,
"bFilter": false,
"bPagination": false,
"aaData": this.tableData,
"aoColumns": this.colsList,
//"scrollY": "220px",
//"scrollX": false,
"scrollCollapse": true,
"paging": false,
"fixedColumns": {
"leftColumns": 1,
"rightColumns": 0
}
});
this.bindTableEvents(this);
},
saveRow: function (oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, this.rowCell, this.colCell, false);
},
unbindTableEvents: function (contextData) {
$('#' + contextData.tableName + ' thead tr th').off('click', contextData.onTableHeaderClicked);
$('#' + contextData.tableName + ' tbody tr td').off('click', contextData.onTableRowClicked);
// $('#' + contextData.tableName + ' tbody tr').off('dblclick', contextData.onTableDoubleClicked);
$('#' + contextData.tableName + ' tbody tr').off('keydown', contextData.onTableKeyDown);
$('#' + contextData.saveId).off('click', contextData.onTableSaveClicked);
$('#' + contextData.addColumnId).off('click', contextData.onAddColumnClicked);
},
bindTableEvents: function (contextData) {
contextData.unbindTableEvents(contextData);
$('#' + contextData.tableName + ' thead tr th').on('click', { context: contextData }, contextData.onTableHeaderClicked);
$('#' + contextData.tableName + ' tbody tr td').on('click', { context: contextData }, contextData.onTableRowClicked);
// $('#' + contextData.tableName + ' tbody tr').on('dblclick', { context: contextData }, contextData.onTableDoubleClicked);
$('#' + contextData.tableName + ' tbody tr').on('keydown', { context: contextData }, contextData.onTableKeyDown);
$('#' + contextData.saveId).on('click', { context: contextData }, contextData.onTableSaveClicked);
$('#' + contextData.addColumnId).on('click', { context: contextData }, contextData.onAddColumnClicked);
},
onTableHeaderClicked: function (ev) {
debugger;
var self = ev.data.context;
var data = ev.currentTarget.innerText;
data = data.replace("Trip", "");
data = data.replace(/\n/g, '').trim();
//var i = self.tripDetails.indexOf(data);
//if (i != -1) {
// self.TripDetails.splice(i, 1);
//}
var removed = _.find(self.tripDetails, function (o) { return o.TripNo == data; });
self.MasterScheduleId.push(removed.MasterTripId.toString());
self.colNum = parseInt($(this).index());
console.log("column_num =" + self.colNum);
//_.forEach(self.tripDetails, function (product) {
//debugger;
//var s = _.findIndex(self.tripDetails, function (o) { return o.TripNo == data; });
//var item = _.find(self.tripDetails, function (o) { return o.TripNo == data; });
//});
},
onTableRowClicked: function (ev) {
var self = ev.data.context;
self.colCell = parseInt($(this).index());
self.rowCell = parseInt($(this).parent().index());
console.log("Row_num =" + self.rowCell + " , column_num =" + self.colCell);
},
restoreRow: function (oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length ; i < iLen ; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
},
editRow: function (oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[this.colCell].innerHTML = '<input type="text" id ="typ" value="' + aData[this.colsList[this.colCell].mData] + '"/>';
},
onTableDoubleClicked: function (e) {
var self = e.data.context;
e.preventDefault();
var nRow = $(this)[0];
var jqTds = $('>td', nRow);
if ($.trim(jqTds[0].innerHTML.substr(0, 6)) != '<input') {
if (self.inEditMode !== null && self.inEditMode != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
self.restoreRow(self.oTable, self.inEditMode);
self.inEditMode = nRow;
self.editRow(self.oTable, nRow);
}
else {
/* No edit in progress - let's start one */
self.inEditMode = nRow;
self.editRow(self.oTable, nRow);
}
}
},
onTableKeyDown: function (ev) {
var self = ev.data.context;
if (ev.keyCode == 13) {
ev.preventDefault();
if (self.inEditMode == null)
alert("Select Row");
else
self.saveRow(self.oTable, self.inEditMode);
self.inEditMode = null;
}
},
onAddColumnClicked: function (ev) {
var self = ev.data.context;
self.colsList.splice(self.colNum + 1, 0, { "mDataProp": "newField" + self.iterator, sTitle: "Col-" + self.iterator, sType: "string" });
//update the result, actual data to be displayed
for (var iRes = 0; iRes < self.tableData.length ; iRes++) {
self.tableData[iRes]["newField" + self.iterator] = "data-" + self.iterator;
}
//destroy the table
self.dataTable.fnDestroy();
$('#' + self.tableName + ' thead tr th').eq(self.colNum).after('<th>Trip-' + self.iterator + '</th>');
//init again
self.setTable();
self.iterator++;
self.bindTableEvents(self);
},
onTableSaveClicked: function (ev) {
var self = ev.data.context;
var timeTable = self.tripDetails;
var masterTrip = self.MasterScheduleId;
$.ajax({
type: "POST",
url: "/ScheduleManagement/Blocking/SaveBlocking",
dataType: "json",
data: masterTrip,
success: function (values) {
},
error: function (err) {
console.log(err);
}
});
}
}
下面给出了用于保存tripdetails数组的代码
onTableSaveClicked: function (ev) {
var self = ev.data.context;
var timeTable = self.tripDetails;
var masterTrip = self.MasterScheduleId;//It is array of tripNo
$.ajax({
type: "POST",
url: "/ScheduleManagement/Blocking/SaveBlocking",
dataType: "json",
data: masterTrip,
success: function (values) {
},
error: function (err) {
console.log(err);
}
});
}
控制器操作
public JsonResult SaveBlocking(string[] masterTrip)
{
int serviceId = Convert.ToInt32(Session["ServiceGroupId"]);
int schedulePlanId = Convert.ToInt32(Session["SchedulePlanID"]);
//int status = _blockingBL.SaveBlockingSheet(serviceId, schedulePlanId, timeTable);
return Json(1, JsonRequestBehavior.AllowGet);
}
以下给定代码用于创建对象
<script type="text/javascript">
$(document).ready(function () {
var req = $.ajax({
type: "GET",
url: "/ScheduleManagement/Blocking/GetBlockingCount/",
dataType: "json",
context: this,
});
req.done(function (result) {
var buttons = '';
var output = JSON.parse(result);
for (var x = 0; x < output.length; x++) {
var returnedData = output[x];
buttons += ' <button type="button" id="' + returnedData.SchecdulePlanId + '" class="btn btn-primary" onclick="getBlocking(' + returnedData.SchecdulePlanId + ')"> ' + returnedData.SchecdulePlanName + '</button> ';
}
$("#buttonsList").append(buttons);
});
});
function getBlocking(id) {
$.blockUI({ message: $('#throbber') });
var req = $.ajax({
type: "GET",
url: "/ScheduleManagement/Blocking/GetBlockingSheet/?id=" + id,
dataType: "json",
context: this,
});
req.done(function (result) {
var tripIn = '';
tripIn = '<table class="table table-bordered trip" id="tripInTable"> </table>';
$("#tripInTable").remove();
$("#TripIn").append(tripIn);
var tripOut = '';
tripOut = '<table class="table table-bordered trip" id="tripOutTable"> </table>';
$("#tripOutTable").remove();
$("#TripOut").append(tripOut);
var returnedData = JSON.parse(result);
var tripIn = returnedData.TripInBlocking;
var tripInTable = new triptable('tripInTable', '0', 'btnAddCol1', 'btnTrip1Save', tripIn);
if (returnedData.TripOutBlocking != null) {
var tripOut = returnedData.TripOutBlocking;
var tripOutTable = new triptable('tripOutTable', '1', 'btnAddCol2', 'btnTrip2Save', tripOut);
}
$.unblockUI();
$("#tripTableContainer").css("display", "block");
});
}
</script>
请帮我解决这个问题..
Ajax调用处理对我来说总是很困难。如果任何人可以为我建议一个好的教程，将会非常有帮助。
答案 0 :(得分：0)
下面的代码解决了我的问题
onTableSaveClicked: function (ev) {
var self = ev.data.context;
var timeTable = self.tripDetails;
var masterTrip = self.MasterScheduleId;
$.ajax({
type: "POST",
url: "/ScheduleManagement/Blocking/SaveBlocking",
contentType: 'application/json;',
dataType: "json",
data: JSON.stringify(masterTrip),
success: function (values) {
},
error: function (err) {
console.log(err);
}
});
}