在Bootstrap开发框架中使用dataTable直接录入表格行数据（2）--- 控件数据源绑定

在前面随笔《》中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作，这种处理能够给用户提供较好的数据录入体验，本篇继续上篇的内容，继续介绍这个直接录入的处理操作，主要涉及到控件的初始化和数据源的绑定等操作内容，随着对这个处理的深入了解，我发现可以控制的内容也更加丰富，能够更好的实现各种所需的效果。

1、直接录入数据的界面分析

在之前介绍的数据直接录入处理的时候，界面效果如下所示。

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

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

以上的明细数据录入，只是提供了一些基本的输入控件进行输入，没有进行过多的定制处理，而往往使用的时候，我们发现，有些数据是需要下拉列表的，有些是需要使用日期选择的等等，那么我们就需要考虑更深层次的控件显示问题了。

如我们要实现更丰富的效果处理，甚至包括一些控件之间的联动的处理，那么我们应该如何操作呢？

下拉列表，动态数据界面展示

日期输入框显示

以上一些是我们常规的录入方式，对于有一些比较多样化的操作，我们尽可能为用户提供方便，提供下拉控件给用户选择，毕竟选择比录入更加方便、规范化。

如可以在复杂界面中，使用弹出层进行查询选择

如部门和用户之间的数据联动效果如下所示。

以上种种效果，能够满足我们常规的数据选择录入的方便，从而方便客户直接录入数据处理。

2、直接录入数据的控件初始化

我们从上文可以了解到，对于新增一套记录，就是动态构建一些HTML的控件，然后进行初始化即可，如对于这个下拉列表的界面效果。

它的实现主要就是在编辑或者新增的时候，对HTML控件的处理，如下代码所示。

aData = jqTds = $('>td' i = 0 feeType = aData[0= '++; jqTds[i].innerHTML = '++; jqTds[i].innerHTML = '++; jqTds[i].innerHTML = ''++; jqTds[i].innerHTML = ''

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;绑定数据字典，并更新值</span>
    BindDictItem("txtFeeType","费用类型",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () {
        $(</span>"#txtFeeType").val(feeType).trigger("change"<span style="color: #000000;"&gt;);
    });
    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;初始化日期控件</span>
    $("#txtOccurTime"<span style="color: #000000;"&gt;).datepicker({
        language: </span>'zh-CN',<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;语言</span>
        autoclose: <span style="color: #0000ff;"&gt;true</span>,<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;选择后<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a><a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a></span>
        clearBtn: <span style="color: #0000ff;"&gt;true</span>,<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;清除按钮</span>
        format: "yyyy-mm-dd"<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;日期格式</span>

<span style="color: #000000;"> });
}@H_502_22@

我们可以在下拉列表的时候，使用select2插件，通过BindDictItem的通用JS函数，可以绑定数据库的字典类型，并通过记录对应列的值，可以给该控件进行赋值。

$("#txtFeeType").val(feeType).trigger("change");@H_502_22@

由于每个控件都有一个对应的ID，那么我们使用它们的时候，就很方便，如初始化日期插件，可以使用DateTime Picker插件进行处理。

$("#txtOccurTime"'zh-CN', format: "yyyy-mm-dd" });@H_502_22@

最终达到了日期选择效果。

使用弹出层进行查询选择的操作过程也很简单。

jqTds[i].innerHTML = '名称@H_502_22@

也就是为这个控件增加onclick函数，在选择单击输入的时候，弹出一个层进行处理即可。而这个独立的通用层，则使用一个单独的视图，在页面里面引用即可，提高重用性。

@RenderPage("~/Views/Asset/SelectAsset.cshtml")@H_502_22@

而通过在页面里面处理返回结果，则可以实现主界面内容控件的更新。

dict = display ==

</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;转换选择为JSON字符串</span>
<span style="color: #0000ff;"&gt;var</span> json =<span style="color: #000000;"&gt; JSON.stringify(dict);
$(</span>"#selectAsset").modal("hide"<span style="color: #000000;"&gt;);

</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;留给<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>的界面实现这个<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>，实现数据的返回出来</span>
ProcAssetJson =<span style="color: #000000;"&gt; json;
OnSelectAsset(json);

}@H_502_22@

而选择后，可以对控件内容以及关联的数据进行动态更新。

调用 = json; (json != '' dict = (dict != ( key display = $.getJSON("/Asset/FindByCode?code=" + key, (info != "#txtAssetCode" $("#txtUnit""#txtPrice""#txtTotalQty""#txtTotalAmount"@H_502_22@

下面就是弹出界面层，并提供用户选择内容的界面

对于部门和用户之间的数据联动的处理，也是通过Select2控件的联动更新处理实现的。以下是Select2联动处理脚本，可以实现多个控件之间的联动操作

用户列表编号 $("#txtLyDept").on("change", deptNameId = $("#txtLyDept" (deptNameId != id = deptNameId.substring(deptNameId.lastIndexOf("|") + 1"txtUsePerson","/User/GetUserDictJson2?deptId=" + id,'',"#txtUsePerson").val(userid).trigger("change"

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;存储位置</span>
    BindSelect("txtKeepAddr","/StoreAddress/GetDictJson?deptId=" + id,<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () {
        $(</span>"#txtKeepAddr").val(keepAddr).trigger("change"<span style="color: #000000;"&gt;);
    });
}

});@H_502_22@

界面效果如下所示。

由于我们在控件的ID上约定了以txt开头，那么我们通过这个约定规则动态获取控件的值也是很方便的，这样为我们保存控件的数据提供很好的便捷处理。

inputLength = 10; jqInputs = $("[id^='txt']",nRow);

<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;更新行中每个input的值</span>
<span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;var</span> i = 0; i < inputLength; i++<span style="color: #000000;"&gt;) {
    oTable.fnUpdate(jqInputs[i].value,nRow,i,</span><span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;);
    iLen </span>=<span style="color: #000000;"&gt; i;
}

oTable.fnUpdate(</span>'<a class="btn btn-xs green edit" href="" title="编辑"&gt;<span class="glyphicon glyphicon-edit"&gt;</span></a>',inputLength,<span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;);
oTable.fnUpdate(</span>'<a class="btn btn-xs red delete" href="" title="删除"&gt;<span class="glyphicon glyphicon-remove"&gt;</span></a>',inputLength + 1,<span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;);
oTable.fnDraw();

}@H_502_22@

我们如果需要保存数据到数据库里面，那么就需要先构建好对应的JS数据对象，然后调用ajax进行数据的提交处理。构建JS数据对象如下代码所示（根据自己所需定制数据内容）。

获取表格的数据，并返回对象列表 list = trs = ( i = 0; i < trs.length; i++ data = table.fnGetData(trs[i]);获取指定行的数据

                <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;构建对象</span>
                <span style="color: #0000ff;"&gt;var</span> obj =<span style="color: #000000;"&gt; {
                    AssetName: data[</span>0<span style="color: #000000;"&gt;],AssetCode: data[</span>1<span style="color: #000000;"&gt;],LyDept: data[</span>2<span style="color: #000000;"&gt;],UsePerson: data[</span>3<span style="color: #000000;"&gt;],KeepAddr: data[</span>4<span style="color: #000000;"&gt;],Unit: data[</span>5<span style="color: #000000;"&gt;],Price: data[</span>6<span style="color: #000000;"&gt;],TotalQty: data[</span>7<span style="color: #000000;"&gt;],TotalAmount: data[</span>8<span style="color: #000000;"&gt;],Note: data[</span>9<span style="color: #000000;"&gt;]
                };
                list.push(obj);
            }
            </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; list;
        };</span>@H_<a href="https://www.jb51.cc/tag/502/" target="_blank" class="keywords">502</a>_22@

原文链接：https://www.f2er.com/bootstrap/73625.html

在Bootstrap开发框架中使用dataTable直接录入表格行数据（2）--- 控件数据源绑定

1、直接录入数据的界面分析

2、直接录入数据的控件初始化

猜你在找的Bootstrap相关文章