多类型数据修改的回填与保存

多类型数据修改的回填与保存

开发工具与关键技术：VisualStudio MVC
作者：老龙
撰写时间：2019/4/18

多类型数据的修改分为三个步骤。
一、 查询数据

1. 修改需要提取之前保存的数据，并且需要将修改都数据跟之前保存的数据进行对比，那就需要定义一个新的变量代表修改时所填入的数据。
2. 判断变量的值是否为空，若是为空则是数据填写不完整，返回提示，不能执行修改
3. 写一个表查询之前保存的信息，并判断根据ID查询出来的数据与表里面的数据有重复，若是有重复就返回一个数据重复提示，不执行修改操作。
4. 当判断出查询出来的数据与表的数据不重复是执行修改操作，若是修改不成功则返回数据异常提示。
5. 判断表里修改的数据是否大于0。是，则返回修改成功提示；否，则返回修改失败提示
   
6. 返回修改提示内容
   二、 页面数据回填
7. 绑定下拉框数据，首先要绑定下拉框数据，绑定下拉框的基本思路就是在页面建立一个封装好的方法，以减少绑定多个下拉框时的代码量。首先确认提交方式，然后清空下拉框（这里是为了避免刷新页面时保留了上一次的选择），再给他添加一个首选项，再用循环添加下拉框选项，最后后设置选中的值。

function appendOption(id, url) {//
    $.getJSON(url, function (data) {
        $("#" + id).empty();
        $("#" + id).append("<option value=" + 0 + ">" + "----请选择----" + "</option>");
        //console.log(data);
        $.each(data, function (i) {
            $("#" + id).append("<option value=" + data[i].id + ">" + data[i].text + "</option>");
        });
    });
}

2. Form表单数据回填。Form表单的数据回填相对与下拉框的数据回填就相对复杂得多，毕竟form表单涉及的内容也比较多。我们再封装方法是首先要在方法里传递两个参数，一个是表单ID，另一个就是json的数据，至于详细的内容用下面的代码展示。

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);
                }

            }

        });
    }
}

三、 数据的保存

1. 取消危险字符。因为我们输入的内容中有一些特殊的字符被浏览器认为是危险字符而不被允许，所以在保存之前我们需要取消浏览器对微信字符的验证。
   
2. 控制器保存方法思路。首先我们要判断提示输入框如下拉框等是否有内容，若是有才进行保存操作，否则不进行修改保存。在保存之前我们需要做的还有查询数据是否重复，若是查询出已经存在了与我们修改完毕后一模一样的数据。这时候我们不进行保存操作，并返回修改失败提示。否，则进行修改操作。随后判断修改后的数据改变值，若是大于0则返回修改成功提示；否，则返回修改失败提示。
3. 页面保存方法。页面提交的方式有很多，主要看是运用了哪种提交方式。下面介绍一下ajaxSubmit的提交方式。它与post或者get的提交方式不同。它是直接将整个form表单进行提交。首先我们要获取页面输入的数据，判断是否输入了数据，当数据输入不全或者没有数据时返回提示，不进行保存。随后用ajaxSubmit获取form表单的ID，利用form表单的action向控制器的保存方法提交请求。再用method属性确认提交的方式，是post还是get。再让ajaxSubmit在页面显示控制器保存方法里的提示，修改的所以步骤到这里就结束了。