首页 > 代码库 > Json填充到Form中
Json填充到Form中
很多框架都支持将json解释到grid的或者form中，个人手痒，自己写了一个。所用到的内容主要是javascript对json的遍历。如：
for (var key in json) { alert("name:" + key + " value:" + json[key]); }而具体到网页中，form中会有一些空间，这就要具体情况具体分析了，废话不说，帖代码
var fillForm = function ($form, json) { var jsonObj = json; if (typeof json === ‘string‘) { jsonObj = $.parseJSON(json); } for (var key in jsonObj) { //遍历json字符串 var objtype = jsonObjType(jsonObj[key]); // 获取值类型 if (objtype === "array") { //如果是数组，一般都是数据库中多对多关系 var obj1 = jsonObj[key]; for (var arraykey in obj1) { //alert(arraykey + jsonObj[arraykey]); var arrayobj = obj1[arraykey]; for (var smallkey in arrayobj) { setCkb(key, arrayobj[smallkey]); break; } } } else if (objtype === "object") { //如果是对象，啥都不错，大多数情况下，会有 xxxId 这样的字段作为外键表的id } else if (objtype === "string") { //如果是字符串 var str = jsonObj[key]; var date = new Date(str); if (date.getDay()) { //这种判断日期是本人懒，不想写代码了，大家慎用。 $("[name=" + key + "]", $form).val(date.format("yyyy-MM-dd")); continue; } var tagobjs = $("[name=" + key + "]", $form); if ($(tagobjs[0]).attr("type") == "radio") {//如果是radio控件 $.each(tagobjs, function (keyobj,value) { if ($(value).attr("val") == jsonObj[key]) { value.checked = true; } }); continue; } $("[name=" + key + "]", $form).val(jsonObj[key]); } else { //其他的直接赋值 $("[name=" + key + "]", $form).val(jsonObj[key]); } }}var setCkb = function (name, value) { //alert(name + " " + value); //$("[name=" + name + "][value="http://www.mamicode.com/+ value +"]").attr("checked", "checked"); 不知为何找不到具体标签; $("[name=" + name + "][val=" + value + "]").attr("checked", "checked");}
由于多选会有一些不同的方式，没办法，只能继续具体情况具体分析
var fillckb = function (name, json) { var jsonObj = json; if (typeof json === ‘string‘) { jsonObj = $.parseJSON(json); } var str = jsonObj[name]; if (typeof str === "string") { var array = str.split(","); $.each(array, function (key, value) { setCkb(name, value); }); }}
貌似少了判断类型的方法
var jsonObjType = function (obj) { if (typeof obj === "object") { var teststr = JSON.stringify(obj); if (teststr[0] == ‘{‘ && teststr[teststr.length - 1] == ‘}‘) return "class"; if (teststr[0] == ‘[‘ && teststr[teststr.length - 1] == ‘]‘) return "array"; } return typeof obj;}
接下来是html中的了。
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <script src="http://www.mamicode.com/~/Scripts/jquery-1.10.2.min.js"></script> <script src="http://www.mamicode.com/~/Scripts/json2.js"></script> <script src="http://www.mamicode.com/Scripts/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script> <link href="http://www.mamicode.com/~/Scripts/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://www.mamicode.com/~/Scripts/fillform.js"></script> <title>Index</title> <script type="text/javascript"> $(function () { $("#btntest").click(function () { $.post("/test2/getjsonstr", {}, function (data) { fillckb("Teammate", data); fillForm($("#fm1"), data); }); }); }); </script></head><body> <div class="container"> <form id="fm1" role="form" class="form-horizontal"> <h2 class="h2 text-center">运动员资料</h2> <div class="form-group"> <label class="control-label col-sm-2">Id:</label> <div class="col-sm-10"> <input type="text" name="Id" class="form-control" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Name</label> <div class="col-sm-10"> <input type="text" name="Name" class="form-control" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Birthday</label> <div class="col-sm-10"> <input type="text" name="Birthday" class="form-control" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Number</label> <div class="col-sm-10"> <select id="sel1" class="form-control" name="Number"> <option value="http://www.mamicode.com/7" selected>7</option> <option value="http://www.mamicode.com/8">8</option> <option value="http://www.mamicode.com/9">9</option> <option value="http://www.mamicode.com/10">10</option> <option value="http://www.mamicode.com/11">11</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Friends</label> <div class="col-sm-10"> <input type="checkbox" class="checkbox-inline" name="Friends" val="1" value="http://www.mamicode.com/1">Saviola <input type="checkbox" class="checkbox-inline" name="Friends" val="2" value="http://www.mamicode.com/2">Batistuta <input type="checkbox" class="checkbox-inline" name="Friends" val="3" value="http://www.mamicode.com/3">Lopez <input type="checkbox" class="checkbox-inline" name="Friends" val="4" value="http://www.mamicode.com/4">Veron </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Teammate</label> <div class="col-sm-10"> <input type="checkbox" class="checkbox-inline" name="Teammate" val="1" value="http://www.mamicode.com/1">Van Nistelrooy <input type="checkbox" class="checkbox-inline" name="Teammate" val="2" value="http://www.mamicode.com/2">Messi <input type="checkbox" class="checkbox-inline" name="Teammate" val="3" value="http://www.mamicode.com/3">Veron <input type="checkbox" class="checkbox-inline" name="Teammate" val="4" value="http://www.mamicode.com/4">Nedved </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Position</label> <div class="col-sm-10"> <input type="radio" class="radio-inline" name="Position" value="http://www.mamicode.com/dc" val="dc" />后卫 <input type="radio" class="radio-inline" name="Position" value="http://www.mamicode.com/mc" val="mc" />中场 <input type="radio" class="radio-inline" name="Position" value="http://www.mamicode.com/fw" val="fw" />边锋 <input type="radio" class="radio-inline" name="Position" value="http://www.mamicode.com/st" val="st" />射手 </div> </div> <div class="text-center"> <button type="button" class="btn btn-info col-sm-offset-2" id="btntest">确定</button> </div> </form> </div></body></html>
附赠json数据
{"Id":100,"Name":"Crespo","Birthday":"2014-08-19T16:06:01.0522081+08:00","Number":9,"Cotch":{"Id":1,"Name":"me"},"Friends":[{"Id":1,"Name":0},{"Id":3,"Name":0}],"Teammate":"3,4","Position":"st"}最后帖张成功图片
总结：没什么难点，估计大家用点心都能做出来。对于类型的判断，写完后才觉得应该根据控件类型判断会更好，快下班了，回家再改吧。还有就是代码注释中$("[name=" + name + "][value="http://www.mamicode.com/+ value +"]").attr("checked", "checked");这句话找不到具体的值，不知道是什么原因，还望大神指教。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。