為了提高前端小夥伴的開發效率,造了一個基於json物件根據表單元素的name屬性自動賦值的輪子
json2form:function(obj){ var nodeParent = null; var value = undefined; var $el = null; var nodeName = ""; for(var i in obj){ value= obj[i] ; if(value === undefined || value===null){ continue; } if(typeof value == 'object'){ nodeParent=obj.nodeParent; value.nodeParent=nodeParent?nodeParent+"."+i : i; if(value instanceof Array){ for(var mm=0;mm<value.length;mm++){ var ms=value[mm]; if(typeof ms == 'object'){ nodeParent=ms.nodeParent; ms.nodeParent=ms.nodeParent?ms.nodeParent+"."+i+"["+mm+"]":i+"["+mm+"]"; arguments.callee(ms); } } $el=$("[name='"+i+"']"); if($el.is(":checkbox")){ $el.each(function(){ if($(this).val() == value){ $(this).prop("checked",true); } }) } else if($el.is(":radio")){ $el.each(function(){ if($(this).val() == value){ $(this).prop("checked",true); } }) } }else{ //递归 arguments.callee(value); } } else{ nodeName=obj.nodeParent?obj.nodeParent+"."+i : i ; $el=$("[name='"+nodeName+"']"); if($el.length > 0){ // console.log("匹配数据名称:"+nodeName+"值:"+value); if($el.is(":text")||$el.attr("type")=="hidden"){ if($el.data("money") && $el.data("money") == "money"){ value = outputdollars(value); } $el.val(value); }else if($el.is(":radio")){ $el.each(function(){ if($(this).val()==value){ $(this).prop("checked",true); } }) } else if($el.is("select")){ $el.find("option").filter(function(){return $(this).val() == obj[i];}).prop("selected",true); }else if($el.is("textarea")){ $el.val(value) } } } } }
注意: 表單的name屬於與json物件的屬性名為一致,保持繼承鏈。例如 input name='a.b.c' 表示json物件裡面的a屬性裡面的b屬性的c屬性。