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

在Winform的开发中，我们可以使用表控件直接输入数据，但是在Web上很少见到。其实我们也可以使用dataTable对象直接在表格行中输入数据，这样可以提高数据输入的便利性，尤其是一些简单业务的详细数据的情况下，似乎比弹出窗口更方便更高。本文主要介绍如何在Bootstrap开发框架中使用dataTable直接输入表行数据。

1.查看基于表格和Winform直接输入数据的界面

在Web界面直接输入表行数据之前，先来看看Winform界面的处理。比如在流程管理中，我用下面的界面对主从明细的报销业务表进行数据处理。

这种列表可以直接在表格控件Griview上添加和编辑。

至于Web界面，如果我们想保持与这个布局相似的布局，可以通过使用dataTable直接输入表行数据来实现。

在上面的界面中处理详细数据时，可以直接使用新记录，直接在输入框中输入数据，然后保存。保存后，数据将变为只读。如果需要修改，也可以点击“编辑”进行修改。

这些详细数据只存在于JS对象中，并没有保存在后台数据库中。我们可以在最终保存中获取所有添加的数据进行提交(如上图界面中的确定按钮所示)。

提交这些数据后，我们可以使用Bootstrap Table插件在查看界面显示数据。

2.利用网上数据表直接输入表格行数据的实现

以上界面展示了在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 s bold大写'详细列表/span/div/div class=' portlet-body ' div class=' table-toolbar ' div class=' row ' div class=' col-MD-6 ' div class=' BTN-group '按钮id=' detail _ editable _ 1 _ new ' class=' BTN green '新记录I class=' div table class=' table table-striped table-hover table-bordered ' id=' detail _ editable _ 1 '第几个序号/第几个费用类型/第几个发生时间/第几个费用金额(元)/第几个费用说明/第几个编辑/第几个删除/第几个/tr/the dtbad @ * tr TD 1/TD TD TD交通费/TD TD TD 2018-10-01/TD TD TD 2000/TD TD TD备注/TD TD TD A class=' edit ' href=' JavaScript 333331 Rel='外部nofollow' rel='外部no follow ' edit/a/tdtd a class=' delete ' href=' JavaScript :'rel=' external no follow ' rel=' external no follow ' delete/a/TD/tr * @/t body/table/div/div，主要是ID为detail_editable_1的标签。这是承载详细信息的表，所以我们可以定义自己需要的表头信息，输入框的内容可以通过dataTable插件的对象动态添加。

//定义数据表对象var table=$(' # detail _ editable _ 1 ')；var oTable=table。datatable({ ' length menu ' :[[5，15，20，-1]，[5，15，20，' All'] //改变每页的行数], //使用汉化语言' : { URL : '/cdn。数据表。net/plugins/3 FCC 339 e 89/i18n/中文。JSON ' }，//初始化pageLength': 5，' columnDefs': [{ //设置默认列设置orderable ' : true，' targets': [0] }，{ ' searchable ' : true，' targets': [0] }，' order': [ [0，' ASC ']//将第一列设置为（同美国安全委员会)美国安全委员会的默认排序});编辑行记录，就是动态增加一些投入控件，让用户可以录入数据，如下代码所示。

//编辑行函数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 '；}保存数据后，通过把记录更新到对应推倒（网络用词)对象里面，如下所示。

//费用类型发生时间费用金额费用说明var ObjList=[]；//保存行数据，切换到普通模式函数saveRow(oTable，nRow){ var jqinputes=$(' input '，nRow)；//更新行中每个投入的值可旋转。fnupdate(jqinputes[0]).值，nRow，0，false)；可旋转。fnupdate(jqinputes[1]).值，nRow，1，false)；可旋转。fnupdate(jqinputes[2]).值，nRow，2，false)；可旋转。fnupdate(jqinputes[3]).值，nRow，3，false)；可旋转。fnupdate(jqinputes[4]).值，nRow，4，false)；可旋转。fnupdate(' a class=' edit ' href=')编辑/a '，nRow，5，false)；可旋转。fnupdate(' a class=' delete ' href=')删除/a '，nRow，6，false)；可旋转。fndraw()；}在界面上的几个出来动作按钮，如新增、编辑、保存、删除等按钮处理事件如下所示。

var AddRow=1；$('#detail_editable_1_new ').单击（函数(e){ e . prevent default()；if(NneNeDisting){ if(确认('前面记录没有保存，您是否需要保存？')){ saveRow(oTable，ned sting)；//$(nedesting).find('td:first ').html(")未保存');ned sting=NullNeW=false } else { otable。fndeleterow(nedesting)；//取消nEditing=nullnNew=false返回；} } //添加一条新的记录var aiNew=otable。fnadddata([addRow、“”、“”、“”、“”、“”)；var nRow=可旋转。fngetnodes(aiNew[0])；editRow(oTable，nRow)；nEditing=nRownNew=真；});//删除操作table.on('单击',')。删除'，函数(e){ e . prevent default()；如果（确认('您确认要删除该行记录吗？)==false){ return；} //获取上一级tr行的数据var nRow=$(this).家长(' tr ')[0]；var aData=可旋转。fngetdata(nRow)；找到的=false $。每个(objList，函数(I，item){ if(item[' seq ']==AData[0]){ find=true；objList.splice(i，1)；} });可旋转。fndeleterow(nRow)；});//取消操作table.on('单击',')。取消'，函数(e){ e . prevent default()；if(nNew){ otable。fndeleterow(nedesting)；ned sting=NullNeW=false } else { restore row(oTable，ned sting)；nedesting=null } })；//编辑操作table.on('单击',')。'编辑'，函数(e){ e . prevent default()；nNew=false/*获取所击连接的行对象*/var nRow=$(this).家长(' tr ')[0]；如果（内德廷！==空内德廷！=nRow) { /*当前正在编辑-但不是此行-在继续编辑模式之前恢复旧版*/Restrow(Otable，ned sting)；editRow(oTable，nRow)；NeDisting=nRow } else if(NeDisting==nRow这个。innerHTMl=='保存') { /* 编辑该行，并准备保存记录*/saveRow(oTable，ned sting)；ned sting=null } else {/*没有正在进行的编辑-让我们开始一个*/editRow(oTable，nRow)；nedsting=nRow } })；}我们在最后一步，提交数据的时候，就是遍历整个表格，获取每行的数据，并把它们放到数据对象列表里面，在提交到后台录入即可，如下是获取列表数据的射流研究…代码

//获取表格的数据，并返回对象列表函数GetData(){ var list=[]；TRS=表。fngetnodes()；for(var I=0；i trs.lengthI){ var data=table。TRS[一]；//获取指定行的数据var obj={ }；//obj['seq']=数据[0];//序号obj['FeeType']=数据[1];obj[“发生时间”]=数据[2];obj[' FeeAmound ']=数据[3];obj['FeeDescription']=数据[4];名单。推送(obj)；}返回列表；};获取到表格明细的数据后，我们就是确定如何提交到手动音量调节后台接口来处理了，下面是业务里面关于明细数据提交手动音量调节后台的射流研究…代码。

后台手动音量调节控制器的C#处理逻辑代码如下所示。

///摘要///保存申请单主从表数据////summary////returns/returns[HttpSet]公共操作结果保存应用(Jobject param){ dynamic obj=param；如果(obj！=null){ var result=新的公共结果()；if (obj.info！=null) { //获取主信息var info=(JObject .FromObject(obj.info)).toobjectiembersmentinfo()；//转换为明细信息列表报销明细信息明细=空；if (obj.details！=null) { details=(JArray .FromObject(obj.details)).toobjectlistcolvementdetailinfo()；}如果(信息！=null) { //修改部分信息OnBeforeInsert(信息);bool succeed=BLLFactoryReimbursement .实例。插入（信息);如果（成功){如果（详情！=null) { foreach(详细信息中的var detailInfo){//设置关键信息详细信息.应用_标识=信息应用_详细信息.表头标识=信息。身份证；bllffactory报销明细。实例。插入更新（详细信息，详细信息身份证)；} }结果。成功=成功；} } }返回ToJsonContent(结果);} else {抛出新的MyApiException('传递参数错误');} }其中对于提交上来的数据，对象信息用作业对象进行转换，而对于明细列表则使用杰瑞FromObject .进行转换，其他部分就是如何保存主表和明细表的接口了。

上面的处理逻辑和代码就是处理明细表的前台获取，提交处理，以及后台的接口处理，整个过程主要用来介绍在引导程序开发框架中使用数据表直接录入表格行数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。