프런트엔드 파트너의 개발 효율성을 높이기 위해 폼 요소의 name 속성에 따라 json 객체를 기준으로 값을 자동으로 할당하는 휠을 만들었습니다
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) } } } } }
참고 : 양식의 이름은 json 객체의 속성 이름에 속합니다. 일관성을 유지하고 상속 체인을 유지합니다. 예를 들어, 입력 name='a.b.c'는 json 객체의 a 속성에 있는 b 속성의 c 속성을 나타냅니다.