前端表格(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); }