回填数据到模态框

开发工具与关键技术：JavaScript
作者：LJR
撰写时间：2019年 6 月 16 日

1. 在做修改数据的时候，可能会遇到数据回填的问题，如果我们选中了一条数据，点击修改的按钮，会弹出一个修改数据的模态框，我们需要做的是把选中的数据回填到模态框里面。那么这个该如何去实现呢？
2. 很简单，首先在控制器写一个查询远程数据ID的方法，方法里面查询出相对应要回填的字段，int HostId是用来接收查询数据的ID值。如果查询到数据就直接返回数据的值，如果查询不到就跳转到catch输出空值。
   
3. 写完控制器的方法后，来到视图这里写弹出模态框的方法：
   首先：要生命两个变量，var checkStatus 是用来接收表格中选中行的数据，var strides是在下面用来接收checkStatus选中的数据的。
   第二：用一个if判断它选中的数据行，如果没用选中数据，那么直接跳到else弹出提示用户选择要修改的数据。
   第四：判断到选中的数据行数大于零了，然后用strIds去接收Status的数据行的远程主机ID，接下来就用POST提交数据，让HostId：strIds,然后用function（data）接收到数据，
   把他们回填到模态框里面即可。
   loadDatatoFrom 是我们已经封装好的一个方法，直接调用它就行了。

function loadDatatoForm(fromId, jsonDate) {
    var obj = jsonDate;
    var key, value, tagName, type, arr;
    for (x in obj) { 
        key = x;
        value = obj[x]; 
        $("#" + 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') {
                if ($(this).hasClass("select2")) {
                    $(this).val(value).trigger("change");
                } else {
                    $(this).val(value);
                }

            }

        });
    }
}

4. 最后我们在修改按钮添加一个onclick事件，点击的时候就调用刚刚写的方法即可。
   来到页面这里，选中一行数据修改的时候，弹出的模态框如下图，已经把选中的数据行的数据信息全部回填成功了。