MVC项目中与后台协调写出的关于表格数据读取、修改、删除、提交、新增数据的JS事件

在项目开发中，给后台处理相关数据交互（提交、编辑、新增、删除）时，数据这块都要用一个包裹，
同时再第一行加一个，确保在点击事件发生时为这个form赋值一个ID,不然后台无法操作。
在全局JS中定义自定义方法：
//定义时间转换函数

String.prototype.formatSerizedDateTime = function () {
var dt = new Date(Number(this.replace(/\D/g, ”)));
return dt;
}

//定义数据提交点击确认时刷新页面

function checkResult(e) {
console.dir(e);
if (e.status == “success”) { showSuccess(); setTimeout(reloadFrame, 2000); }
else {showFail(e)};
function showSuccess() {
$.ShowNotice(“success”, “成功”, “更新成功”, “top”, 3000); } function showFail(e) {$.ShowNotice(“error”, “失败”, e.message || “更新失败”, “top”, 3000);
}

// 表格行折叠功能

$(“.parent-row td”).on(“click”, function (e) { if ($(e.target).hasClass("checkOption") || $(e.target).hasClass(“font-blue”)) { return; } var thisRow = $(this).parent(“.parent-row”); var cateId = thisRow.attr(“data-value”); var childrenRows = $(“.sub-row[data-parent-cateid=” + cateId + “]”); if (childrenRows.length == 0) childrenRows = $(“.sub-row[data-parent-value=” + cateId + “]”); childrenRows.toggle(); var expanded = thisRow.find(“.glyphicon-triangle-bottom”).length == 1; if (expanded) thisRow.find(“.glyphicon-triangle-bottom”).removeClass(“glyphicon-triangle-bottom”).addClass(“glyphicon-triangle-right”); else thisRow.find(“.glyphicon-triangle-right”).removeClass(“glyphicon-triangle-right”).addClass(“glyphicon-triangle-bottom”); });$(“.check-all”).click(function () {
$(this).parents("table").find(".checkboxItem").prop("checked",$(this).prop(“checked”));
});
$(“.parent-row”).css(“background-color”, “#E6E6E6”);
});`

//删除提示函数

var sweetAlertTitle = {
title: “您确定要删除这条信息吗”,
text: “删除后将无法恢复，请谨慎操作！”,
type: “warning”,
showCancelButton: true,
confirmButtonColor: “#DD6B55”,
confirmButtonText: “删除”,
closeOnConfirm: false
};
var deleteAllTitle = {}
//用到的JS如下
$(function(){$.getJSON(urls.dutyList, { t: new Date().getMilliseconds() }, function (e) { //Ajax向服务器加载数据
if (e.status == “success”) {　　　　　　　　　　　　　　　　　　　　　　　　　//状态成功与否的判断
var data = e.data;
var dataHtml = “”, tmp = “”;

//表格内容的字符串拼接写法

for (var i = 0; i < data.length; i++) {
var start = data[i].WorkStartTime.formatSerizedDateTime();
var end = data[i].WorkEndtime.formatSerizedDateTime();
var modify = data[i].ModifyTime.formatSerizedDateTime();
data[i].WorkStartTime = start.toLocaleDateString() + start.toLocaleTimeString();
data[i].WorkEndtime = end.toLocaleDateString() + end.toLocaleTimeString();
data[i].ModifyTime = modify.toLocaleDateString() + modify.toLocaleTimeString();
dataHtml += “” + data[i].DutyID + “” + data[i].WorkStartTime + “” + data[i].WorkEndtime + “” + data[i].LunchDuration + “” + data[i].DinnerDuration + “” + data[i].ModifyTime + ““;
var deleteString = ‘修改    删除‘;
dataHtml += deleteString + “”
}
$(“#table-normalClasses tbody”).append(dataHtml); } else if (e.status == “error”) { //给个错误提示先$.ShowNotice(“error”, “提示”, “获取失败”);
return;
}
});

//表格修改内容，自动抓取内容的方法

$(“#table-normalClasses”).on(“click”, “.edit-duty”, function () { var dutyId =$(this).attr(“data-duty-id”);
$(“#dutyID”).val(dutyId);$.post(urls.getDuty, { dutyId: dutyId }, function (e) {
if (e.status == “success”) {
var data = e.data;
$(“#classesName”).val(data.DutyID); var time = (data.WorkStartTime).formatSerizedDateTime();$(“#editStartTime”).val((time.getHours() < 10 ? “0” : “”) + time.getHours() + “:” + (time.getMinutes() < 10 ? “0” : “”) + time.getMinutes());
time = data.WorkEndtime.formatSerizedDateTime();
$(“#editEndTime”).val((time.getHours() < 10 ? “0” : “”) + time.getHours() + “:” + (time.getMinutes() < 10 ? “0” : “”) + time.getMinutes());$(“#lunchTime”).val(data.LunchDuration);
$(“#dinnerTime”).val(data.DinnerDuration);$(“#popUp-altergrades”).modal(“show”);
}
else {
return false;
}
});
});

//删除表格数据事件（用到sweetAlert的删除提示控件）

$(“#table-normalClasses”).on(“click”, “.delete-duty”, function (e1) { sweetAlertTitle.title = “删除该排班”; var dutyId =$(this).attr(“data-duty-id”);
var row = $(this).parents(“tr”); swal(sweetAlertTitle, function () {$.post(urls.deleteDuty, { dutyId: dutyId }, function (e) {
if (e.status == “success”) {
row.remove();
swal.close();
$.ShowNotice(“success”, “操作成功”, “删除成功”); } else { swal.close();$.ShowNotice(“error”, “操作失败”, e.message);
}
});
});
});

//新增按钮

$(“#addDutyBtn”).on(“click”, function () { var form =$(this).parents(“form”);
$.post(urls.addDuty, JSON.stringify(form.serializeObject()), function (e) {
checkResult(e);
});
return false;
});

//submit提交内容

$(“#popUp-altergrades”).on(“click”, “[type=submit]”, function (e1) { var form =$(this).parents(“form”);
//form.find(“#DutyID”).val($(this).attr(“data-duty-id”));$.post(urls.updateDuty, JSON.stringify(form.serializeObject()), function (e) {
checkResult(e);
});
return false;
});
});
“`