前言:
对代码有洁癖的同志们，当你们一遍遍的写着$('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>