在Bootstrap开发框架中使⽤dataTable直接录⼊表格⾏数据
在Winform开发的时候，我们很多时候可以利⽤表格控件来直接录⼊数据，不过在Web上较少看到，其实也可以利⽤dataTable对象处理直接录⼊表格⾏数据，这个可以提⾼数据的录⼊⽅便，特别是在⼀些简单业务的明细数据的时候，看起来会⽐弹出窗⼝录⼊⽅便⼀些，也⾼⼤上⼀点。本篇主要介绍在Bootstrap开发框架中使⽤dataTable直接录⼊表格⾏数据。
1、基于表格直接录⼊数据和Winform的界⾯回顾
在开始Web界⾯直接录⼊表格⾏数据前，我们先来看看Winform界⾯的处理情况，如我在流程管理⾥⾯，对于具有主从明细的报销业务表的数据处理，采⽤了下⾯的界⾯。
这种明细表单可以直接在表格控件Griview上进⾏新增、编辑处理。
⽽对于Web界⾯，如果我们要保持和这个布局类似的话，采⽤dataTable直接录⼊表格⾏数据也可以达到。
上⾯的界⾯处理明细数据的时候，可以直接使⽤新增记录，直接在录⼊框中输⼊数据，然后保存起来，保存后数据变为只读，如果需要修改，还可以单击编辑按钮进⾏修改。
⽽这些明细的数据，也仅仅存在JS的对象⾥⾯，还没有保存到后台数据库中，我们可以在最后保存（如上界⾯的确定按钮）处理中再获取全部添加的数据进⾏提交即可。
在这些数据提交之后，我们在查看界⾯⾥⾯可以可以Bootstrap Table插件来展⽰数据即可。
2、在Web上使⽤dataTable直接录⼊表格⾏数据的实现
上⾯的界⾯展⽰了在Web上使⽤dataTable直接录⼊表格⾏数据和数据展⽰，这⾥开始介绍它们的界⾯和实现代码。界⾯部分主要是这个明细的处理。
界⾯视图的HTML代码如下所⽰。
<div class="portlet light portlet-fit ">
<div class="portlet-title">
<div class="caption">
<i class="icon-settings font-red"></i>
<span class="caption-subject font-red sbold uppercase">明细清单</span>
</div>
</div>
<div class="portlet-body">
<div class="table-toolbar">
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button id="detail_editable_1_new" class="btn green">
新增记录
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover table-bordered" id="detail_editable_1">
<thead>
<tr>
<th>序号</th>
<th>费⽤类型</th>
<th>发⽣时间</th>
<th>费⽤⾦额(元) </th>
<th>费⽤说明</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody>
@*<tr>
<td> 1 </td>
<td>交通费</td>
<td> 2018-10-01 </td>
<td> 2000 </td>
<td>备注信息</td>
<td>
<a class="edit" href="javascript:;">编辑</a>
</td>
<td>
<a class="delete" href="javascript:;">删除</a>
</td>
</tr>*@
</tbody>
</table>
</div>
</div>
其中主要是ID为 detail_editable_1 的标记，这个就是承载明细信息的表格，我们可以定义我们需要的表头信息，⽽输⼊框的内容，则可以通过dataTable插件的对象进⾏动态添加。
//定义dataTable对象
var table = $('#detail_editable_1');
var oTable = table.dataTable({
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // 改变每页的⾏数
],
// 使⽤
"language": {
url: '//cdn.datatables/plug-ins/3cfcc339e89/i18n/Chinese.json'
},
//初始化
"pageLength": 5,
"columnDefs": [{ // 设置默认列设置
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // 将第⼀列设置为asc的默认排序
});
编辑⾏记录，就是动态增加⼀些Input控件，让⽤户可以录⼊数据，如下代码所⽰。
//编辑⾏
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '" readonly>';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="date" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="number" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<a class="edit" href="">保存</a>';
jqTds[6].innerHTML = '<a class="cancel" href="">取消</a>';
}
保存数据后，通过把记录更新到对应TD对象⾥⾯，如下所⽰。
//费⽤类型发⽣时间费⽤⾦额费⽤说明
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('<a class="edit" href="">编辑</a>', nRow, 5, false);
oTable.fnUpdate('<a class="delete" href="">删除</a>', 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);bootstrap 5
//$(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;
});
//删除操作
<('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);
});
//取消操作
<('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
//编辑操作
<('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 {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。