前言:
對代碼有潔癖的同志們，當你們一遍遍的寫着$('xx').val(response.xx)的時候，有沒有想過就不能一次性自動綁定嘛？？？
一念生，則一發不可收拾，是的，我要自己封裝一個自動綁定數據的方法！！！
附上代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="http://code.jquery.com/jquery-latest.js"></script> 6 <title>Title</title> 7 </head> 8 <body> 9 <form action=""> 10 <input type="text" name="text"> 11 <input type="radio" name="radio" value="0"> 12 <input type="radio" name="radio" value="1"> 13 <input type="checkbox" name="checkbox" value="1"> 14 <input type="checkbox" name="checkbox" value="2"> 15 <input type="checkbox" name="checkbox" value="3"> 16 <select name="select" id=""> 17 <option value=""></option> 18 <option value="1">下拉1</option> 19 <option value="2">下拉2</option> 20 <option value="3">下拉3</option> 21 </select> 22 <textarea name="textarea" id="" cols="30" rows="10"></textarea> 23 <input type="text" name="childObj.text"> 24 <input type="radio" name="childObj.radio" value="0"> 25 <input type="radio" name="childObj.radio" value="1"> 26 <input type="checkbox" name="childObj.checkbox" value="1"> 27 <input type="checkbox" name="childObj.checkbox" value="2"> 28 <input type="checkbox" name="childObj.checkbox" value="3"> 29 <select name="childObj.select" id=""> 30 <option value=""></option> 31 <option value="1">下拉1</option> 32 <option value="2">下拉2</option> 33 <option value="3">下拉3</option> 34 </select> 35 <textarea name="childObj.textarea" id="" cols="30" rows="10"></textarea> 36 <input type="text" name="childObj.thirdObj.text"> 37 <input type="radio" name="childObj.thirdObj.radio" value="0"> 38 <input type="radio" name="childObj.thirdObj.radio" value="1"> 39 <input type="checkbox" name="childObj.thirdObj.checkbox" value="1"> 40 <input type="checkbox" name="childObj.thirdObj.checkbox" value="2"> 41 <input type="checkbox" name="childObj.thirdObj.checkbox" value="3"> 42 <select name="childObj.thirdObj.select" id=""> 43 <option value=""></option> 44 <option value="1">下拉1</option> 45 <option value="2">下拉2</option> 46 <option value="3">下拉3</option> 47 </select> 48 <textarea name="childObj.thirdObj.textarea" id="" cols="30" rows="10"></textarea> 49 </form> 50 <script> 51 var obj = { //模擬一個json數據 52 text : '普通text', 53 radio : 1, 54 select :1, 55 checkbox :['1','2','3'], //這邊遇到個坑！！！如果是數字，下面用數組的方法時，取的val是字符串，竟然不匹配 56 textarea : '普通textarea', 57 childObj : { 58 text : '二級text', 59 radio :0, 60 select : 2, 61 checkbox :['1','2'], 62 textarea : '二級textarea', 63 thirdObj :{ 64 text : '三級text', 65 radio :0, 66 select : 3, 67 checkbox :['1'], 68 textarea : '三級textarea', 69 } 70 } 71 }; 72 73 function jsonIntoForm(obj){ //接收一個json對象，可以是多級的 74 var nodeParent = null; //用來保存它的祖級信息,設計思路：如果item是子json的話，我就給它加上一組值：nodeParent:index 75 $.each(obj,function(index,item){ 76 // debugger; 77 console.log(index); 78 console.log(item); 79 console.log(item instanceof Object); 80 if(item === null || item === undefined){ 81 //不需要賦值 82 }else if(item instanceof Object && !(item instanceof Array)){ //需要遞歸的是對象，但是又不是數組 83 //如果是對象的話，要么是數組，要么又是一個json 84 nodeParent = obj.nodeParent; //取出obj的nodeParent值 85 item.nodeParent = nodeParent ? nodeParent+'.'+index : index; //如果nodeParent存在,我就在它的基礎上再拼上現在的model的key,不存在我就把現在的model的key賦值給它，這樣如果它的下面還有model的話，也能在它的基礎繼續拼接。 86 //對象的話就是子級的json了，需要遞歸 87 jsonIntoForm(item); 88 }else{ 89 //普通文本框,單選框，下拉框和復選框賦值 90 index =obj.nodeParent?obj.nodeParent+"."+index : index ; //如果obj.nodeParent有值，也就是遞歸后的信息就需要拼接，反之直接賦值就行 91 var $ele = $('[name = "'+index+'"]'); 92 if($ele.is(':radio')){ 93 //單選框的值 94 $ele.prop('checked',false); //先初始化 95 $ele.each(function(){ 96 if($(this).val() == item){ 97 $(this).prop('checked',true) 98 } 99 }) 100 }else if(item instanceof Array){ 101 //數組的話，這類值是checkbox的值 102 $ele.prop('checked',false); //先初始化 103 if($ele.is(':checkbox')){ 104 //復選框的值 105 $ele.each(function(){ 106 // debugger; 107 if(item.indexOf($(this).val()) != -1){ 108 $(this).prop('checked',true) 109 } 110 }) 111 } 112 }else { 113 $($ele).val(item); 114 } 115 116 } 117 }) 118 } 119 jsonIntoForm(obj); 120 </script> 121 </body> 122 </html>