在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法

 
 
 
 明细清单
 
 
 
 
  新增记录 
 @**@ 
 
 
 
序号
 费用类型 
 发生时间 
 费用金额(元) 
 费用说明 
 编辑 
 删除 
 
 1 
 交通费 
 2018-10-01 
 2000 
 备注信息 
  编辑 
  删除 

 //定义dataTable对象 var table = $('#detail_editable_1'); var oTable = table.dataTable({ "lengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // 改变每页的行数 ], // 使用汉化 "language": { url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Chinese.json' }, //初始化 "pageLength": 5, "columnDefs": [{ // 设置默认列设置 'orderable': true, 'targets': [0] }, { "searchable": true, "targets": [0] }], "order": [ [0, "asc"] ] // 将第一列设置为asc的默认排序 });

 //编辑行 function editRow(oTable, nRow) { var aData = oTable.fnGetData(nRow); var jqTds = $('>td', nRow); jqTds[0].innerHTML = ''; jqTds[1].innerHTML = ''; jqTds[2].innerHTML = ''; jqTds[3].innerHTML = ''; jqTds[4].innerHTML = ''; jqTds[5].innerHTML = '保存'; jqTds[6].innerHTML = '取消'; }

 //费用类型 发生时间 费用金额 费用说明 var objList = []; //保存行数据，切换到普通模式 function saveRow(oTable, nRow) { var jqInputs = $('input', nRow); //更新行中每个input的值 oTable.fnUpdate(jqInputs[0].value, nRow, 0, false); oTable.fnUpdate(jqInputs[1].value, nRow, 1, false); oTable.fnUpdate(jqInputs[2].value, nRow, 2, false); oTable.fnUpdate(jqInputs[3].value, nRow, 3, false); oTable.fnUpdate(jqInputs[4].value, nRow, 4, false); oTable.fnUpdate('编辑', nRow, 5, false); oTable.fnUpdate('删除', nRow, 6, false); oTable.fnDraw(); }

 var addRow = 1; $('#detail_editable_1_new').click(function (e) { e.preventDefault(); if (nNew && nEditing) { if (confirm("前面记录没有保存，您是否需要保存?")) { saveRow(oTable, nEditing); //$(nEditing).find("td:first").html("未保存"); nEditing = null; nNew = false; } else { oTable.fnDeleteRow(nEditing); // cancel nEditing = null; nNew = false; return; } } //添加一条新的记录 var aiNew = oTable.fnAddData([addRow++, '', '', '', '', '', '']); var nRow = oTable.fnGetNodes(aiNew[0]); editRow(oTable, nRow); nEditing = nRow; nNew = true; }); //删除操作 table.on('click', '.delete', function (e) { e.preventDefault(); if (confirm("您确认要删除该行记录吗?") == false) { return; } //获取上一级tr行的数据 var nRow = $(this).parents('tr')[0]; var aData = oTable.fnGetData(nRow); var found = false; $.each(objList, function (i, item) { if (item["seq"] == aData[0]) { found = true; objList.splice(i, 1); } }); oTable.fnDeleteRow(nRow); }); //取消操作 table.on('click', '.cancel', function (e) { e.preventDefault(); if (nNew) { oTable.fnDeleteRow(nEditing); nEditing = null; nNew = false; } else { restoreRow(oTable, nEditing); nEditing = null; } }); //编辑操作 table.on('click', '.edit', function (e) { e.preventDefault(); nNew = false; /*获取所击连接的行对象*/ var nRow = $(this).parents('tr')[0]; if (nEditing !== null && nEditing != nRow) { /* 当前正在编辑 - 但不是此行 - 在继续编辑模式之前恢复旧版 */ restoreRow(oTable, nEditing); editRow(oTable, nRow); nEditing = nRow; } else if (nEditing == nRow && this.innerHTML == "保存") { /* 编辑该行，并准备保存记录 */ saveRow(oTable, nEditing); nEditing = null; } else { /* No edit in progress - let's start one */ editRow(oTable, nRow); nEditing = nRow; } }); }

 //获取表格的数据，并返回对象列表 function GetData() { var list = []; var trs = table.fnGetNodes(); for (var i = 0; i 

 /// 
 /// 保存申请单主从表数据 /// 
 ///  [HttpPost] public ActionResult SaveApply(JObject param) { dynamic obj = param; if (obj != null) { var result = new CommonResult(); if (obj.info != null) { //获取主信息 var info = (JObject.FromObject(obj.info)).ToObject(); //转换为明细信息 List details = null; if (obj.details != null) { details = (JArray.FromObject(obj.details)).ToObject>(); } if (info != null) { //修改部分信息 OnBeforeInsert(info); bool succeed = BLLFactory.Instance.Insert(info); if (succeed) { if (details != null) { foreach (var detailInfo in details) { //设置关键信息 detailInfo.Apply_ID = info.Apply_ID; detailInfo.Header_ID = info.ID; BLLFactory.Instance.InsertUpdate(detailInfo, detailInfo.ID); } } result.Success = succeed; } } } return ToJsonContent(result); } else { throw new MyApiException("传递参数错误"); } }