双击回填数据

开发工具与关键技术: VisualStudio 2015 mvc

作者：杨泽平

撰写时间：2019、6、22

回填数据，在修改时候都会用到，还有一些页面资料卡片会用到，一般回填数据少的话可以逐个写方法回填，如果数据多，会用插件回填。

数据回填的方式也可有多种，比如绑定按钮回填、输入关键字回填，或者输入关键数据双击回填等，我们用的较多的是绑定按钮回填，其实这些回填方式的方法都差不多，只是这些方式有些会方便点。

资料卡片所用到的回填，是通过关键数据回填的，资料卡片上的数据只是提供一览数据或者作为参考数据，所以它上面的数据是不需要保存到数据库的，只需要到数据库查询出需要的数据，这里我做的是长者资料卡片，我用的是双击回填，而且用的插件回填。

首先，我是根据关键的数据预约号回填其他的数据，这样就的先获取到预约号，获取到预约号后通过if判断是否拿到预约号，拿到了才往下执行post请求，post请求控制器查询出需要的所有数据，查询方法就不多说了，用的是多表查询，查询到需要的数据后，就调用插件封装好的回填方法loadDatatoForm（“表单ID”，jsonData），进行数据回填，这里需要注意，回填方法只能回填from表单的值，所有需要回填的数据必须用from表单包裹起来。

详情代码如下：

 $("#SubscribeNumber").dblclick(function () {

        //根据预约号回填

        var SubscribeNumber = $("#SubscribeNumber").val();

        if (SubscribeNumber != "") {

            $.post("selectElder",

                { SubscribeNumber:
SubscribeNumber },

                function (jsonDate) {

                console.log(jsonDate);

                //回填数据

                loadDatatoForm("IsElderform", jsonDate);

            });

        }

 });

HTML代码里的from表单包裹格式详情如下图所示：

     <div class="layui-col-lg2">

          <label>预约号：</label>

          <input id="SubscribeNumber" name="SubscribeNumber">

 </div>

下面就是效果演示了，我们是根据预约号回填其他数据的，所有，先填写一个预约号，这个预约号必须是数据库存在的。

如下图所示：

填入预约号双击预约号就可以回填数据了，如下图所示：

最后这里是插件封装好的方法，如下：

 function
 loadDatatoForm(fromId, jsonDate) {

var obj = jsonDate;

var key, value, tagName, type, arr;

for (x in obj) {//循环json对象

    key = x;

    value = obj[x];

    //$("[name='"+key+"'],[name='"+key+"[]']").each(function(){

    //更加form表单id 和 json对象中的key查找

表单控件

    $("#" + fromId + " [name='" + key + "'],#" + fromId + " [name='" + key + "[]']")

        .each(function () {

        tagName = $(this)[0].tagName;

        type = $(this).attr('type');

        if (tagName == 'INPUT') {

            if (type == 'radio') {

                $(this).attr('checked', $(this).val() == value);

            } else if (type == 'checkbox') {

                try {

                    //数组

                    arr = value.split(',');

                    for (var i = 0; i <
arr.length; i++) {

                        if ($(this).val() == arr[i]) {

                            $(this).attr('checked', true);

                            break;

                        }

                    }

                } catch (e) {

                    //单个

                    $(this).attr('checked', value);

                }

            } else {

                $(this).val(value);

            }

        } else if (tagName == 'TEXTAREA') {

            $(this).val(value);

        } else if (tagName == 'SELECT') {

            //console.log($(this).hasClass("select2"));

            if ($(this).hasClass("select2")) {

                //select2 插件的赋值方法

                $(this).val(value).trigger("change");

            } else {

                $(this).val(value);

            }

        }

    });

  }

}