在Winform开发的时候，我们很多时候可以利用表格控件来直接录入数据，不过在Web上较少看到，其实也可以利用dataTable对象处理直接录入表格行数据，这个可以提高数据的录入方便，特别是在一些简单业务的明细数据的时候，看起来会比弹出窗口录入方便一些，也高大上一点。本篇主要介绍在Bootstrap开发框架中使用dataTable直接录入表格行数据。
1、基于表格直接录入数据和Winform的界面回顾
在开始Web界面直接录入表格行数据前，我们先来看看Winform界面的处理情况，如我在流程管理里面，对于具有主从明细的报销业务表的数据处理，采用了下面的界面。
这种明细表单可以直接在表格控件Griview上进行新增、编辑处理。
而对于Web界面，如果我们要保持和这个布局类似的话，采用dataTable直接录入表格行数据也可以达到。
上面的界面处理明细数据的时候，可以直接使用新增记录，直接在录入框中输入数据，然后保存起来，保存后数据变为只读，如果需要修改，还可以单击编辑按钮进行修改。
而这些明细的数据，也仅仅存在JS的对象里面，还没有保存到后台数据库中，我们可以在最后保存（如上界面的确定按钮）处理中再获取全部添加的数据进行提交即可。
在这些数据提交之后，我们在查看界面里面可以可以Bootstrap Table插件来展示数据即可。
2、在Web上使用dataTable直接录入表格行数据的实现
上面的界面展示了在Web上使用dataTable直接录入表格行数据和数据展示，这里开始介绍它们的界面和实现代码。
界面部分主要是这个明细的处理。
界面视图的HTML代码如下所示。
其中主要是ID为 detail_editable_1 的标记，这个就是承载明细信息的表格，我们可以定义我们需要的表头信息，而输入框的内容，则可以通过dataTable插件的对象进行动态添加。
table = $('#detail_editable_1' oTable ="lengthMenu"5,15,20,-15,"All"]
"language"'//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Chinese.json'
"pageLength": 5"columnDefs": [{
'orderable': 'targets': [0"searchable": "targets": [0"order"0,"asc"
});
编辑行记录，就是动态增加一些Input控件，让用户可以录入数据，如下代码所示。
aData = jqTds = $('>td'0].innerHTML = ''1].innerHTML = '2].innerHTML = '3].innerHTML = '4].innerHTML = '5].innerHTML = ''6].innerHTML = ''
保存数据后，通过把记录更新到对应TD对象里面，如下所示。
objList =
jqInputs = $('input'
oTable.fnUpdate(jqInputs[0].value,nRow,1].value,1,2].value,2,3].value,3,4].value,4,'',5,'',6,
在界面上的几个出来动作按钮，如新增、编辑、保存、删除等按钮处理事件如下所示。
addRow = 1 {
e.preventDefault();
</span><span style="color: #0000ff;">if</span> (nNew &&<span style="color: #000000;"> nEditing) {
</span><span style="color: #0000ff;">if</span> (confirm("前面记录没有保存，您是否需要保存?"<span style="color: #000000;">)) {
saveRow(oTable,nEditing);
</span><span style="color: #008000;">//</span><span style="color: #008000;">$(nEditing).find("td:first").html("未保存");</span>
nEditing = <span style="color: #0000ff;">null</span><span style="color: #000000;">;
nNew </span>= <span style="color: #0000ff;">false</span><span style="color: #000000;">;
} </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
oTable.fnDeleteRow(nEditing); </span><span style="color: #008000;">//</span><span style="color: #008000;"> cancel</span>
nEditing = <span style="color: #0000ff;">null</span><span style="color: #000000;">;
nNew </span>= <span style="color: #0000ff;">false</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
}
}
</span><span style="color: #008000;">//</span><span style="color: #008000;"><a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>一条新的记录</span>
<span style="color: #0000ff;">var</span> aiNew = oTable.fnAddData([addRow++,'',''<span style="color: #000000;">]);
</span><span style="color: #0000ff;">var</span> nRow = oTable.fnGetNodes(aiNew[0<span style="color: #000000;">]);
editRow(oTable,nRow);
nEditing </span>=<span style="color: #000000;"> nRow;
nNew </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
});
</span><span style="color: #008000;">//</span><span style="color: #008000;"><a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>操作</span>
<span style="color: #ff0000;">table.on('click','.delete',function</span><span style="color: #000000;"><span style="color: #ff0000;"> (e) {</span>
e.preventDefault();
</span><span style="color: #0000ff;">if</span> (confirm("您确认要<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>该行记录吗?") == <span style="color: #0000ff;">false</span><span style="color: #000000;">) {
</span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
}
</span><span style="color: #008000;">//</span><span style="color: #008000;"><a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>上一级tr行的数据</span>
<span style="color: #0000ff;">var</span> nRow = $(<span style="color: #0000ff;">this</span>).parents('tr')[0<span style="color: #000000;">];
</span><span style="color: #0000ff;">var</span> aData =<span style="color: #000000;"> oTable.fnGetData(nRow);
</span><span style="color: #0000ff;">var</span> found = <span style="color: #0000ff;">false</span><span style="color: #000000;">;
$.each(objList,</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (i,item) {
</span><span style="color: #0000ff;">if</span> (item["seq"] == aData[0<span style="color: #000000;">]) {
found </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
objList.splice(i,</span>1<span style="color: #000000;">);
}
});
oTable.fnDeleteRow(nRow);
});
</span><span style="color: #008000;">//</span><span style="color: #008000;">取消操作</span>
<span style="color: #ff0000;">table.on('click','.cancel',function</span><span style="color: #000000;"><span style="color: #ff0000;"> (e) {</span>
e.preventDefault();
</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing </span>= <span style="color: #0000ff;">null</span><span style="color: #000000;">;
nNew </span>= <span style="color: #0000ff;">false</span><span style="color: #000000;">;
} </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
restoreRow(oTable,nEditing);
nEditing </span>= <span style="color: #0000ff;">null</span><span style="color: #000000;">;
}
});
</span><span style="color: #008000;">//</span><span style="color: #008000;">编辑操作</span>
<span style="color: #ff0000;">table.on('click','.edit',function</span><span style="color: #000000;"><span style="color: #ff0000;"> (e) {</span>
e.preventDefault();
nNew </span>= <span style="color: #0000ff;">false</span><span style="color: #000000;">;
</span><span style="color: #008000;">/*</span><span style="color: #008000;"><a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>所击连接的行对象</span><span style="color: #008000;">*/</span>
<span style="color: #0000ff;">var</span> nRow = $(<span style="color: #0000ff;">this</span>).parents('tr')[0<span style="color: #000000;">];
</span><span style="color: #0000ff;">if</span> (nEditing !== <span style="color: #0000ff;">null</span> && nEditing !=<span style="color: #000000;"> nRow) {
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 当前正在编辑 - 但不是此行 - 在继续编辑模式之前恢复旧版 </span><span style="color: #008000;">*/</span><span style="color: #000000;">
restoreRow(oTable,nEditing);
editRow(oTable,nRow);
nEditing </span>=<span style="color: #000000;"> nRow;
} </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (nEditing == nRow && <span style="color: #0000ff;">this</span>.innerHTML == "保存"<span style="color: #000000;">) {
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 编辑该行，并准备保存记录 </span><span style="color: #008000;">*/</span><span style="color: #000000;">
saveRow(oTable,nEditing);
nEditing </span>= <span style="color: #0000ff;">null</span><span style="color: #000000;">;
} </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> No edit in progress - let's start one </span><span style="color: #008000;">*/</span><span style="color: #000000;">
editRow(oTable,nRow);
nEditing </span>=<span style="color: #000000;"> nRow;
}
});
}</span></pre>我们在最后一步，提交数据的时候，就是遍历整个表格，获取每行的数据，并把它们放到JSON对象列表里面，在提交到后台录入即可，如下是获取列表数据的JS代码
获取表格的数据，并返回对象列表
list = trs = ( i = 0; i < trs.length; i++ data = table.fnGetData(trs[i]);获取指定行的数据
<span style="color: #0000ff;">var</span> obj =<span style="color: #000000;"> {};
</span><span style="color: #008000;">//</span><span style="color: #008000;">obj["seq"] = data[0];//序号</span>
obj["FeeType"] = data[1<span style="color: #000000;">];
obj[</span>"OccurTime"] = data[2<span style="color: #000000;">];
obj[</span>"FeeAmount"] = data[3<span style="color: #000000;">];
obj[</span>"<a href="https://www.jb51.cc/tag/Feed/" target="_blank" class="keywords">Feed</a>escription"] = data[4<span style="color: #000000;">];
list.push(obj);
}
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> list;
};</span></pre>获取到表格明细的数据后，我们就是确定如何提交到MVC后台接口来处理了，下面是业务里面关于明细数据提交MVC后台的JS代码。
obj = (obj != result = <span style="color: #000000;">.Instance.Insert(info);
<span style="color: #0000ff;">if<span style="color: #000000;"> (succeed)
{
<span style="color: #0000ff;">if (details != <span style="color: #0000ff;">null<span style="color: #000000;">)
{
<span style="color: #0000ff;">foreach (<span style="color: #0000ff;">var detailInfo <span style="color: #0000ff;">in<span style="color: #000000;"> details)
{
<span style="color: #008000;">//<span style="color: #008000;">设置关键信息
detailInfo.Apply_ID =<span style="color: #000000;"> info.Apply_ID;
detailInfo.Header_ID =<span style="color: #000000;"> info.ID;
BLLFactory<span style="color: #000000;">.Instance.InsertUpdate(detailInfo,detailInfo.ID);
}
}
result.Success =<span style="color: #000000;"> succeed;
}
}
}
<span style="color: #0000ff;">return<span style="color: #000000;"> ToJsonContent(result);
}
<span style="color: #0000ff;">else<span style="color: #000000;">
{
<span style="color: #0000ff;">throw <span style="color: #0000ff;">new MyApiException(<span style="color: #800000;">"<span style="color: #800000;">传递参数错误<span style="color: #800000;">"<span style="color: #000000;">);
}
}
</span><span style="color: #0000ff;">if</span> (obj.info != <span style="color: #0000ff;">null</span><span style="color: #000000;">)
{
</span><span style="color: #008000;">//</span><span style="color: #008000;"><a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>主信息</span>
<span style="color: #0000ff;">var</span> info = (JObject.FromObject(obj.info)).ToObject<ReimbursementInfo><span style="color: #000000;">();
</span><span style="color: #008000;">//</span><span style="color: #008000;">转换为明细信息</span>
List<ReimbursementDetailInfo> details = <span style="color: #0000ff;">null</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">if</span> (obj.details != <span style="color: #0000ff;">null</span><span style="color: #000000;">)
{
details </span>= (JArray.FromObject(obj.details)).ToObject<List<ReimbursementDetailInfo>><span style="color: #000000;">();
}
</span><span style="color: #0000ff;">if</span> (info != <span style="color: #0000ff;">null</span><span style="color: #000000;">)
{
</span><span style="color: #008000;">//</span><span style="color: #008000;"><a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>部分信息</span>
<span style="color: #000000;"> OnBeforeInsert(info);
{
<span style="color: #0000ff;">if (details != <span style="color: #0000ff;">null<span style="color: #000000;">)
{
<span style="color: #0000ff;">foreach (<span style="color: #0000ff;">var detailInfo <span style="color: #0000ff;">in<span style="color: #000000;"> details)
{
<span style="color: #008000;">//<span style="color: #008000;">设置关键信息
detailInfo.Apply_ID =<span style="color: #000000;"> info.Apply_ID;
detailInfo.Header_ID =<span style="color: #000000;"> info.ID;
BLLFactory
}
}
result.Success =<span style="color: #000000;"> succeed;
}
}
}
<span style="color: #0000ff;">return<span style="color: #000000;"> ToJsonContent(result);
}
<span style="color: #0000ff;">else<span style="color: #000000;">
{
<span style="color: #0000ff;">throw <span style="color: #0000ff;">new MyApiException(<span style="color: #800000;">"<span style="color: #800000;">传递参数错误<span style="color: #800000;">"<span style="color: #000000;">);
}
}
其中对于提交上来的数据，对象信息用JObject进行转换，而对于明细列表则使用JArray.FromObject进行转换，其他部分就是如何保存主表和明细表的接口了。
上面的处理逻辑和代码就是处理明细表的前台获取，提交处理，以及后台的接口处理，整个过程主要用来介绍在Bootstrap开发框架中使用dataTable直接录入表格行数据。
原文链接：https://www.f2er.com/bootstrap/73627.html