前端表格（Table）多条数据可以增加行删除行json封装后Post数据到后台处理
主页点击每行上的add按钮
$('button[data-role=SPAdd2]').each(function () {
$(this).click(function () {
layer.open({
type: 2,
title: false,
//closeBtn: 0, //不显示关闭按钮
title: '新增',
scrollbar: false,
shadeClose: true,
//shade: 0.8,
//area: ['700px', '500px'],
area: ['900px', '300px'],
offset: '-10px',
//offset: 'rb', //右下角弹出
//time: 2000, //2秒后自动关闭
//anim: 2,
content: ["/@(ViewContext.RouteData.Values["controller"])/SPOAadd?morder=" + $(this).attr("data-key") + "&mainwc=" + $(this).attr("data-mainwc") + "&equipid=" + $(this).attr("data-equipid") + "&plant=" + $(this).attr("data-plnt"), 'yes'],
//end: function () { //此处用于演示
// document.location.reload();
// }
});
});
});
Controller
public ActionResult SPOAadd(string morder, string mainwc, string equipid, string plant)
{
var model = new MaintenanceRecordValue();
model.MOrder = morder;
model.Plant = plant;
BaseManager bm = new BaseManager();
model.Plant = plant;
var DList = bm.GetList<MaintenanceRecordValue>(p => (p.EquipID == "PAC30002" && !p.endtime.HasValue && p.replacetime.HasValue) || (p.EquipID == "PAC30002" && p.Status.ToString().ToUpper() == "END")).OrderByDescending(p => p.UpdateDate);
ViewBag.DList = DList;
ViewData["morder"] = morder;
//ViewData["equipid"] = equipid;
ViewData["plant"] = plant;
return View("SPOAadd", model);
}
SPOAadd.cshtml
<table class="table table-bordered table-condensed" style="width:98%">
<tr>
<td>
维修/保养单号
</td>
<td>
@ViewData["morder"]
</td>
<td>
设备编号
</td>
<td>
@ViewData["equipid"]
</td>
<td>
工厂
</td>
<td>
@ViewData["plant"]
</td>
</tr>
</table>
<table id="tb1" class="table table-bordered table-condensed select_tableY">
<thead>
<tr>
<th style="width: 30px">
配件编号
</th>
<th style="width: 50px">
配件描述
</th>
<th style="width: 30px">
保修期
</th>
<th style="width: 30px">
配件消耗量
</th>
<th style="width: 30px">
单位
</th>
<th style="width: 30px">
序列号
</th>
<th style="width: 30px">
具体更换位置
</th>
<th style="width: 30px">
保修日期
</th>
<th style="width: 30px">
选项
</th>
</tr>
</thead>
<tbody id="spdetailss">
@foreach (var item in ViewBag.DList)
{
<tr>
<td><input class="form-control" id="SparePartNo" name="SparePartNo" placeholder="" readonly="readonly" type="text" value="@Html.Raw(item.SparePartNo)"></td>
<td><label class="control-label" id="SPDesc" name="SPDesc">@Html.Raw(item.SPDesc)</label> </td>
<td><label class="control-label" id="WarrantyPeriod" name="WarrantyPeriod">@Html.Raw(item.WarrantyPeriod + " " + item.WarrantyPeriodUnit)</label></td>
<td><input class="form-control" id="SparePartQty" name="SparePartQty" placeholder="" readonly="readonly" type="text" value="@Html.Raw(item.SparePartQty)"></td>
<td><label class="control-label" id="Unit" name="Unit">@Html.Raw(item.Unit)</label></td>
<td><input class="form-control" id="Spareno" name="Spareno" placeholder="" type="text" value="@Html.Raw(item.Spareno)"> </td>
<td><input class="form-control" id="Remark" name="Remark" placeholder="" type="text" value="@Html.Raw(item.Remark)"> </td>
@*<td><textarea class="form-control" name="Remark">@Html.Raw(item.Remark)</textarea></td>*@
<td><input class="form-control date-picker" data-date-format="yyyy-mm-dd" data-val="true" id="WarrantyDate" name="WarrantyDate" type="text" value=""></td>
<td>
<a href="javascript:void(0)" class="select_option">选择</a>
</td>
</tr>
}
</tbody>
</table>
<table id="tb2" class="table table-bordered table-condensed select_table">
<tbody>
<tr class="choosen">
<th style="width: 30px">
配件编号
</th>
<th style="width: 50px">
配件描述
</th>
<th style="width: 30px">
保修期
</th>
<th style="width: 30px">
配件消耗量
</th>
<th style="width: 30px">
单位
</th>
<th style="width: 30px">
序列号
</th>
<th style="width: 30px">
具体更换位置
</th>
<th style="width: 30px">
保修日期
</th>
<th style="width: 30px">
选项
</th>
</tr>
</tbody>
</table>
<td class="bg-info">
<button id="btn_submit" type="button" class="btn btn-primary btn-lg" style="display:block;margin:0 auto" onclick="SaveSp();">保存</button>
</td>
@*}*@
<script type="text/javascript">
$(function () { //jQuery实现复制当前tr到下面表格，删除复制tr
$(".select_option").each(function (index) {
$(this).click(function () {
$(this).attr("data-index", index)
$(this).html("删除");
$(this).addClass('btn_delete')
// console.log($(this).parents("tr"))
$(".choosen").after($(this).parents("tr").clone())
$(this).html("已选择");
$(this).removeClass('btn_delete')
})
})
})
$(function () {
$("body").on("click", ".btn_delete", function () {
var index = Number($(this).attr("data-index")) + 1
console.log(index)
console.log($(".select_table tr").eq(index).clone().html())
$(".select_tableY tr").eq(index).find(".select_option").html('选择')
$(this).parents("tr").remove()
})
})
function SaveSp() {
var result = []
$('#tb1 tbody tr').each(function (i, o) {
var thisItem = $(this);
result.push({
MOrder: $(o).find("label[name='SPDesc']").val(),
Plant: $("#Plant").val(),
SparePartNo: $(o).find("label[name='SPDesc']").text(), //$(o).find("input[name='MOrder']").val()
WarrantyDate: $(o).find("input[name='WarrantyDate']").val(),
SparePartQty: $(o).find("input[name='SparePartQty']").val(),
SPDesc: $(o).find("label[name='SPDesc']").text(),
Unit: $(o).find("label[name='Unit']").text(),
WarrantyPeriod: $(o).find("label[name='WarrantyPeriod']").text().split(" ")[0],
WarrantyPeriodUnit: $(o).find("label[name='WarrantyPeriod']").text().split(" ")[1],
Spareno: $(o).find("input[name='Spareno']").val(),
Remark: $(o).find("input[name='Remark']").val(),
})
});
$('#tb2 tr').each(function (i, o) {
result.push({
MOrder: $(o).find("label[name='SPDesc']").val(),
Plant: $("#Plant").val(),
SparePartNo: $(o).find("label[name='SPDesc']").text(), //$(o).find("input[name='MOrder']").val()
WarrantyDate: $(o).find("input[name='WarrantyDate']").val(),
SparePartQty: $(o).find("input[name='SparePartQty']").val(),
SPDesc: $(o).find("label[name='SPDesc']").text(),
Unit: $(o).find("label[name='Unit']").text(),
WarrantyPeriod: $(o).find("label[name='WarrantyPeriod']").text().split(" ")[0],
WarrantyPeriodUnit: $(o).find("label[name='WarrantyPeriod']").text().split(" ")[1],
Spareno: $(o).find("input[name='Spareno']").val(),
Remark: $(o).find("input[name='Remark']").val(),
})
});
$.ajax({
//url: "/MiProjectDetail/Save" ,
url: "@Url.Action("SPOAaddSave", "EM")",
data: { Sp: JSON.stringify(result), mainwc: "", equipid: "" },
type: "Post",
dataType: 'json',
success: function (data) {
debugger;
if (data.Success) {
layer.msg('success');
window.parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
} else {
debugger;
var aa = data.Errors[0];
layer.msg(aa);
}
}
});
}
</script>
后台Controller
public ActionResult SPOAaddSave(string Sp, string mainwc, string equipid)
{
JavaScriptSerializer js = new JavaScriptSerializer();
var startTime = DateTime.Now;
// 把多维数组转换成List泛型。
MaintenanceRecordValue model = new MaintenanceRecordValue();
model = JsonConvert.DeserializeObject<List<MaintenanceRecordValue>>(Sp).AsEnumerable().FirstOrDefault();
var resultqq = JsonConvert.DeserializeObject<List<MaintenanceRecordValue>>(Sp);
List<MaintenanceRecordValue> jc = js.Deserialize<List<MaintenanceRecordValue>>(Sp);
var a = jc[0].MOrder;
model.Id = Guid.NewGuid();
//model.replacetime = DateTime.Now; //完成备件更换记录且完成并审核关闭(Close 状态)维修单后的时间
OperationResult result = new OperationResult();
BaseManager bm = new BaseManager();
string sql = "select * from t_MaintenanceRecordValue where MOrder= '" + model.MOrder + "' and SparePartNo='" + model.SparePartNo.Trim() + "' and Spareno='" + model.Spareno.Trim() + "'";
var data = bm.FillTable(sql);
if (data.Rows.Count > 0)
{
result.Errors.Add("SN号(Spareno)已存在于这台机!");
return Json(result, JsonRequestBehavior.AllowGet);
}
var user = Multek.Web.WebEnviorment.GetCurrentUser<EMMSUser>();
model.Updateby = user.Code;
model.UpdateDate = System.DateTime.Now;
model.EquipID = equipid;
result = bm.AddEntity<MaintenanceRecordValue>(model);
return Json(result);
}
