Heim >Web-Frontend >js-Tutorial >jQuery weist Formularelementen basierend auf JSON-Objekten automatisch Werte zu
Um die Entwicklungseffizienz von Front-End-Partnern zu verbessern, haben wir ein Rad erstellt, das automatisch Werte basierend auf dem JSON-Objekt entsprechend dem Namensattribut des Formularelements zuweist
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) } } } } }
Hinweis : Der Name des Formulars gehört zum Attributnamen des JSON-Objekts. Seien Sie konsistent und behalten Sie die Vererbungskette bei. Beispielsweise stellt Eingabename='a.b.c' das c-Attribut des b-Attributs im a-Attribut im JSON-Objekt dar.