js实现模糊匹配功能_javascript技巧_脚本之家

功能描述:

在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单业务的明细数据的时候,看起来会比弹出窗口录入方便一些,也高大上一点。本篇主要介绍在Bootstrap开发框架中使用dataTable直接录入表格行数据。

在搜索框中输入某一个字段,可以查询到相关的内容

1、基于表格直接录入数据和Winform的界面回顾

功能实现:

在开始Web界面直接录入表格行数据前,我们先来看看Winform界面的处理情况,如我在流程管理里面,对于具有主从明细的报销业务表的数据处理,采用了下面的界面。

  1. 先声明变量用于保存输入框以及表格里面的内容2.
    循环遍历遍历表格每一行,查找匹配项3.
    判断如果输入框里面的内容跟表格中某个td的内容相似,则表格中的某行就显示,否则隐藏

这种明细表单可以直接在表格控件Griview上进行新增、编辑处理。

功能实现:

而对于Web界面,如果我们要保持和这个布局类似的话,采用dataTable直接录入表格行数据也可以达到。

   #myInput { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; }     

上面的界面处理明细数据的时候,可以直接使用新增记录,直接在录入框中输入数据,然后保存起来,保存后数据变为只读,如果需要修改,还可以单击编辑按钮进行修改。

项目名称 时间
redPackets 2017.2.6
traffic 2016.12.25
creditCard 2017.1.18
returnMoney 2016.11.25

而这些明细的数据,也仅仅存在JS的对象里面,还没有保存到后台数据库中,我们可以在最后保存处理中再获取全部添加的数据进行提交即可。

扩展:模拟通讯录搜索提示

在这些数据提交之后,我们在查看界面里面可以可以Bootstrap
Table插件来展示数据即可。

   #myInput { width: 100%; font-size: 16px; /* 加大字体 */ padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; /* 链接添加边框 */ margin-top: -1px; background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block; } #myUL li a.header { background-color: #5587A2; cursor: default; } #myUL li a:hover:not { background-color: #eee; }     

2、在Web上使用dataTable直接录入表格行数据的实现

  • A
  • Angel
  • Adobe
  • Anne
  • B
  • Betty
  • Bella
  • Brown
  • C
  • Calvin
  • Chris
  • Claire
  • D
  • David
  • Daniel
  • Dora
  • E
  • Emily
  • Elena
  • Eufemia

上面的界面展示了在Web上使用dataTable直接录入表格行数据和数据展示,这里开始介绍它们的界面和实现代码。

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

界面部分主要是这个明细的处理。

界面视图的HTML代码如下所示。

    明细清单         新增记录          序号

费用类型

发生时间

费用金额

费用说明

编辑

删除

@*

1

交通费

2018-10-01

2000

备注信息

编辑

删除

*@

其中主要是ID为detail_editable_1
的标记,这个就是承载明细信息的表格,我们可以定义我们需要的表头信息,而输入框的内容,则可以通过dataTable插件的对象进行动态添加。

 //定义dataTable对象 var table = $; 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的默认排序 });

编辑行记录,就是动态增加一些Input控件,让用户可以录入数据,如下代码所示。

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

保存数据后,通过把记录更新到对应TD对象里面,如下所示。

 //费用类型 发生时间 费用金额 费用说明 var objList = []; //保存行数据,切换到普通模式 function saveRow { var jqInputs = $; //更新行中每个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 { e.preventDefault(); if  { if (confirm("前面记录没有保存,您是否需要保存?")) { saveRow; //$.find.html; nEditing = null; nNew = false; } else { oTable.fnDeleteRow; // cancel nEditing = null; nNew = false; return; } } //添加一条新的记录 var aiNew = oTable.fnAddData([addRow++, '', '', '', '', '', '']); var nRow = oTable.fnGetNodes; editRow; nEditing = nRow; nNew = true; }); //删除操作 table.on('click', '.delete', function  { e.preventDefault(); if (confirm == false) { return; } //获取上一级tr行的数据 var nRow = $[0]; var aData = oTable.fnGetData; var found = false; $.each(objList, function  { if (item["seq"] == aData[0]) { found = true; objList.splice; oTable.fnDeleteRow; //取消操作 table.on('click', '.cancel', function  { e.preventDefault { oTable.fnDeleteRow; nEditing = null; nNew = false; } else { restoreRow; nEditing = null; } }); //编辑操作 table.on('click', '.edit', function  { e.preventDefault(); nNew = false; /*获取所击连接的行对象*/ var nRow = $[0]; if (nEditing !== null && nEditing != nRow) { /* 当前正在编辑 - 但不是此行 - 在继续编辑模式之前恢复旧版 */ restoreRow; editRow; nEditing = nRow; } else if (nEditing == nRow && this.innerHTML == "保存") { /* 编辑该行,并准备保存记录 */ saveRow; nEditing = null; } else { /* No edit in progress - let's start one */ editRow; nEditing = nRow; } }); }

我们在最后一步,提交数据的时候,就是遍历整个表格,获取每行的数据,并把它们放到JSON对象列表里面,在提交到后台录入即可,如下是获取列表数据的JS代码

 //获取表格的数据,并返回对象列表 function GetData() { var list = []; var trs = table.fnGetNodes(); for (var i = 0; i < trs.length; i++) { var data = table.fnGetData;//获取指定行的数据 var obj = {}; //obj["seq"] = data[0];//序号 obj["FeeType"] = data[1]; obj["OccurTime"] = data[2]; obj["FeeAmount"] = data[3]; obj["FeeDescription"] = data[4]; list.push; } return list; };

获取到表格明细的数据后,我们就是确定如何提交到MVC后台接口来处理了,下面是业务里面关于明细数据提交MVC后台的JS代码。

后台MVC控制器的C#处理逻辑代码如下所示。

 ///  /// 保存申请单主从表数据 ///  ///  [HttpPost] public ActionResult SaveApply { dynamic obj = param; if  { var result = new CommonResult(); if  { //获取主信息 var info = (JObject.FromObject.ToObject(); //转换为明细信息 List details = null; if  { details = (JArray.FromObject.ToObject>(); } if  { //修改部分信息 OnBeforeInsert; bool succeed = BLLFactory.Instance.Insert { if  { 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; } else { throw new MyApiException; } }

其中对于提交上来的数据,对象信息用JObject进行转换,而对于明细列表则使用JArray.FromObject进行转换,其他部分就是如何保存主表和明细表的接口了。

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

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

相关文章