在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:;" rel="external nofollow" rel="external nofollow" > 编辑 </a>
          </td>
          <td>
            <a class="delete" href="javascript:;" rel="external nofollow" rel="external nofollow" > 删除 </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.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(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);
              //$(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;
        });
        //删除操作
        table.on('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);
        });
        //取消操作
        table.on('click', '.cancel', function (e) {
          e.preventdefault();
          if (nnew) {
            otable.fndeleterow(nediting);
            nediting = null;
            nnew = false;
          } else {
            restorerow(otable, nediting);
            nediting = null;
          }
        });
        //编辑操作
        table.on('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 {
            /* no edit in progress - let's start one */
            editrow(otable, nrow);
            nediting = nrow;
          }
        });
      }

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

 //获取表格的数据，并返回对象列表
      function getdata() {
        var list = [];  
        var trs = table.fngetnodes();
        for (var i = 0; i < trs.length; i++) {
          var data = table.fngetdata(trs[i]);//获取指定行的数据

          var obj = {};
          //obj["seq"] = data[0];//序号
          obj["feetype"] = data[1];
          obj["occurtime"] = data[2];
          obj["feeamount"] = data[3];
          obj["feedescription"] = data[4];
          list.push(obj);
        }
        return list;
      };

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

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

 /// <summary>
    /// 保存申请单主从表数据
    /// </summary>
    /// <returns></returns>
    [httppost]
    public actionresult saveapply(jobject param)
    {
      dynamic obj = param;
      if (obj != null)
      {
        var result = new commonresult();

        if (obj.info != null)
        {
          //获取主信息
          var info = (jobject.fromobject(obj.info)).toobject<reimbursementinfo>();

          //转换为明细信息
          list<reimbursementdetailinfo> details = null;
          if (obj.details != null)
          {
            details = (jarray.fromobject(obj.details)).toobject<list<reimbursementdetailinfo>>();
          }

          if (info != null)
          {
            //修改部分信息
            onbeforeinsert(info);
            bool succeed = bllfactory<reimbursement>.instance.insert(info);
            if (succeed)
            {
              if (details != null)
              {
                foreach (var detailinfo in details)
                {
                  //设置关键信息
                  detailinfo.apply_id = info.apply_id;
                  detailinfo.header_id = info.id;
                  bllfactory<reimbursementdetail>.instance.insertupdate(detailinfo, detailinfo.id);
                }
              }
              result.success = succeed;
            }
          }
        }
        return tojsoncontent(result);
      }
      else
      {
        throw new myapiexception("传递参数错误");
      }
    }

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

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

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