jquery和json表单操作(一)

在一个项目中，我们经常要编辑数据，通常是将要编辑的数据设置到一个表单中，对于小量的数据倒是可以每一个的去给它赋值，但如果是一个对象，数据字段很多的情况下，该怎么办呢，重复的代码经常会让人觉得很反感，维护起来也很恶心。在这里我使用jquery把json数据重置表单,只要一行代码就搞定。当然也可能会有些bug，具体我还没有去认真测试，算是一种解决办法吧，供大家参考.

html:

<form name="dome-form" id="dome-form">

　　<input type="text" name="id"/>

　　<input type="text" name="name"/>

　　<input type="radio" name="sex" value="男"/><input type="radio" name="sex" value="女"/>

　　<select name="age"><option value="18">18</option><option value="19">19</option><option value="20">20</option></select>

</form>

javascript:

<script>

//jquery 插件对象
/**
 * 重置表单
 * @param {Object} o
 * @memberOf {TypeName}
 * @return {TypeName}
 * @author jt.tao QQ:1453566283
 */
$.fn.resetObjectForm = function(o){
    if(o==null){
        var form=document.forms[$(this).attr('name')];
        if(form!==undefined){
            form.reset();
            return true;
        }else{
            alert("重置表单名为"+$(this).attr('name')+"失败.");
            return false;
        }
    }
    var $this=this;
    var a = $this.serializeArray();
    $.each(a, function(i,n) {
        var $t=$('(input|textarea|select)[name=\''+this.name+'\']',$this);
        if($t.attr("type")=='radio'){
            $.each($t, function(i,n) {
                if($(this).val()==o[this.name]) {
                    $(this).attr("checked",true);
                }else{
                    $(this).attr("checked",false);
                }
            });
        }else{
            if (o[this.name]) {
                   $t.val(o[this.name].valueOf());
            } else {
                $t.val("");
            }
        }
    });
};

//数据

var o={id:'1000',name:'JTtao',sex:'男',age:21};

//调用

$("#dome-form").resetObjectForm(o);

</script>

大家可以试一试，我觉得蛮好用的，特别是使用jquery实现mvc模式时可以帮我们减少很多没必要的代码,当然这里也有一定的局限性，具体使用是否方便还得看情况啦。

嘻嘻，

下一章我将为大家介绍其他的方法，欢迎大家给我留言。共同探讨技术.