表单回填

我们在做修改的时候需要根据数据库的数据对我们页面的表单进行回填，大部分程序员都对该操作进行了封装，以便节省时间优化代码。

环境：后端：C#，数据库：Sql，前端：（页面组成：html5、Css3，脚本语言：JS，Jquery）

需求：根据提交返回的json数据对表单进行回填
思路：json数据是以键值对的形式存在，我们可以通过其中的键找到相应的标签，在对标签名与类型进行判断，执行不同的赋值方法，以实现对数据的回填。

实现：
（1）循环获取键（key）与值（value）

function myfunction(id, data) {
    var key, type, object, tagName, value;
    for (x in data) {
        key = x;
        value = data[x];
        if (value == null) {
            value = "";
        }
        value = value.toString.trim(); //去空格
        //.........
    }
}

我们通常要对值进行去空格。而假如值为null调用trim()会引发一个异常。所以我们在去空格前对进行了判断如果value等于null就赋值为空字符。
（2）通过键与表单id获取对应的标签，标签名，标签类型。

  object = $("#" + id + " [name='" + key + "']");
        if (object.length > 0) {
            tagName = object[0].tagName;
            type = $(object[0]).attr("type");
            //.......
        }

这里我们要注意的是需要判断是否可以获取到标签（有对应的标签才能回填数据）

（3）对标签名进行判定，不同的标签名赋值的方法不同。

switch (tagName) {
    case "INPUT":  //单选，复选，文本，隐藏域，等。。
        //..... 
        break;
    case "SELECT" ||  "TEXTAREA":  //下拉框，文本域
        //.....
        break;
      default: //其他
}

我们表单标签不多，主要就三种input，select，textarea（后续如果要针对不同标签直接在后面加case语句即可）

（4）input标签赋值，需要判断type类型。不同类型的input标签采用不同的赋值方法

switch (type) {
    case "radio": //单选框
        //...
        break;
    case "checkbox": //复选框
        //...
        break;
    default:  //其他
        //...
}

1. 单选框

for (var i = 0; i < object.length; i++) {
    $(object[i]).attr("checked", $(object[i]).val() == value)
}

单选框有多个，我们需要找出value与单选框对应的给与勾选。

2. 复选框

$(object[0]).attr("checked", $(object[0]).val() == value)

复选框是单个独立的，只需判断复选框的值与value是否对应给予勾选。

1. 其他

$(object[0]).val(value);

其他文本框，密码框，隐藏域等都是直接赋值。

（5）select，textarea标签赋值

$(object[0]).val(value);

下拉框，文本域都是直接赋值即可。

（6）其他

回填不只是可以针对表单标签，其他任意标签均可。其他标签diyv，span等都是回填html值。

 $(object[0]).html(value);