在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在网络上较少看的到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单业务的明细数据的时候,看起来会比弹出窗口录入方便一些,也高大上一点。本篇主要介绍在引导开发框架中使用dataTable直接录入表格行数据。
<强> 1,基于表格直接录入数据和Winform的界面回顾
在开始Web界面直接录入表格行数据前,我们先来看看Winform界面的处理情况,如我在流程管理里面,对于具有主从明细的报销业务表的数据处理,采用了下面的界面。
这种明细表单可以直接在表格控件Griview上进行新增,编辑处理。
而对Web界于面,如果我们要保持和这个布局类似的话,采用dataTable直接录入表格行数据也可以达到。
上面的界面处理明细数据的时候,可以直接使用新增记录,直接在录入框中输入数据,然后保存起来,保存后数据变为只读,如果需要修改,还可以单击编辑按钮进行修改。
而这些明细的数据,也仅仅存在JS的对象里面,还没有保存到后台数据库中,我们可以在最后保存(如上界面的确定按钮)处理中再获取全部添加的数据进行提交即可。
在这些数据提交之后,我们在查看界面里面可以可插以引导表件来展示数据即可。
<强> 2,在Web上使用dataTable直接录入表格行数据的实现
上面的界面展示了在Web上使用dataTable直接录入表格行数据和数据展示,这里开始介绍它们的界面和实现代码。
界面部分主要是这个明细的处理。
界面视图的HTML代码如下所示。
& lt; div class=" portlet portlet-fit”比;
& lt; div类=" portlet标题"比;
& lt; div类="标题"比;
& lt;我class="图标设置font-red”祝辞& lt;/i>
& lt;跨类=" caption-subject font-red sbold大写”在明细清单& lt;/span>
& lt;/div>
& lt;/div>
& lt; div类=皃ortlet主体”比;
& lt; div类=皌able-toolbar”比;
& lt; div类="行"比;
& lt; div类=癱ol-md-6”比;
& lt; div类=癰tn-group”比;
& lt;按钮id=癲etail_editable_1_new”类=癰tn绿色”比;
新增记录
& lt;我类=" fa fa-plus "祝辞& lt;/i>
& lt;/button>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;表类="表表拆开,table-hover table-bordered " id=癲etail_editable_1”比;
& lt; thead>
& lt; tr>
& lt; th>序号& lt;/th>
& lt; th>费用类型& lt;/th>
& lt; th>发生时间& lt;/th>
& lt; th>费用金额(元)& lt;/th>
& lt; th>费用说明& lt;/th>
& lt; th>编辑& lt;/th>
& lt; th>删除& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody>
@ * & lt; tr>
& lt; td>1 & lt;/td>
& lt; td>交通费& lt;/td>
& lt; td>2018-10-01 & lt;/td>
& lt; td>2000 & lt;/td>
& lt; td>备注信息& lt;/td>
& lt; td>
& lt;一个类="编辑" href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”比;编辑& lt;/a>
& lt;/td>
& lt; td>
& lt;一个类="删除" href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”比;删除& lt;/a>
& lt;/td>
& lt;/tr> * @
& lt;/tbody>
& lt;/table>
& lt;/div>
& lt;/div>
其中主要是ID为,detail_editable_1的标记,这个就是承载明细信息的表格,我们可以定义我们需要的表头信息,而输入框的内容,则可以通过dataTable插件的对象进行动态添加。
//定义dataTable对象
表=$ var (“# detail_editable_1”);
var oTable=table.dataTable ({
“lengthMenu”:(
1][5、15、20日,
[5、15、20 "所有"]//改变每页的行数
),//使用汉化
"语言":{
url:“//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Chinese.json'
}，//初始化
“pageLength”: 5
“columnDefs”:[{//设置默认列设置
“公开”定货:没错,
“目标”:[0]
}, {
“搜索”:没错,
“目标”:[0]
}),
“秩序”:(
[0,“asc”]
)//将第一列设置为asc的默认排序
});
