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=" + 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="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/json2.js"></script>
<script src="/Scripts/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<link href="~/Scripts/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/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="7" selected>7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="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="1">Saviola
<input type="checkbox" class="checkbox-inline" name="Friends" val="2" value="2">Batistuta
<input type="checkbox" class="checkbox-inline" name="Friends" val="3" value="3">Lopez
<input type="checkbox" class="checkbox-inline" name="Friends" val="4" value="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="1">Van Nistelrooy
<input type="checkbox" class="checkbox-inline" name="Teammate" val="2" value="2">Messi
<input type="checkbox" class="checkbox-inline" name="Teammate" val="3" value="3">Veron
<input type="checkbox" class="checkbox-inline" name="Teammate" val="4" value="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="dc" val="dc" />后卫
<input type="radio" class="radio-inline" name="Position" value="mc" val="mc" />中场
<input type="radio" class="radio-inline" name="Position" value="fw" val="fw" />边锋
<input type="radio" class="radio-inline" name="Position" value="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=" + value + "]").attr("checked", "checked");这句话找不到具体的值，不知道是什么原因，还望大神指教。
Json填充到Form中的更多相关文章
- ligerui_实际项目_003：form中添加数据，表格(grid)里面显示，最后将表格(grid)里的数据提交到servlet
实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...
- node.js+react全栈实践-Form中按照指定路径上传文件并
书接上回,讲到“使用同一个新增弹框”中有未解决的问题,比如复杂的字段,文件,图片上传,这一篇就解决文件上传的问题.这里的场景是在新增弹出框中要上传一个图片,并且这个上传组件放在一个Form中,和其他文 ...
- web form中自定义HttpHandler仿mvc
web form中自定义HttpHandler仿mvc 前言 在mvc大行其道的今天,仍然有不少公司的项目还是使用web form来实现的(其实mvc也是基于web form的),如果要在项目中引入m ...
- .net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】
1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...
- 仿各种APP将文章DOM转JSON并在APP中以列表显示（android、ios、php已开源）
背景 一直以来都想实现类似新闻客户端.鲜城等文章型app的正文显示,即在web editor下编辑后存为json,在app中解析json并显示正文. 网上搜过,没找到轮子.都是给的思路,然后告知是公司 ...
- 为Form中的控件增加自适应功能 转
创建一个基于Custom的类resizeable,并新建属性和方法程序,其说明如下: a) 新建属性: posiTyperList 可调整位置的控件类型列表sizeTypeList 可调整大小的控件类 ...
- HTML 之 Web页面表单form中只有一个input的text元素，按回车默认提交
WEB开发中,如果页面的 form 中只有一个input元素,在该input元素的输入框中按回车(注:此时并没有写对应的onkeydown等事件处理),则浏览器会默认提交表单,请看如下代码: < ...
- Oracle Developer Form中Block的重新查询
Form中某些按钮可能调用了Package对表中某些字段进行更新,但是数据库中字段的修改不会马上反映到form的界面上,所以要进行重新查询,但是用户可能使用了查询窗口进行查询之后然后再点击按钮动作,如 ...
- [Form Builder]Form中的validate验证事件
转:http://yedward.net/?id=70 Form的validate行为可以由一个总的form级别的validation属性来控制,可以通过set_form_property来设置成PR ...
随机推荐
- 分布式数据库Cobar
Cobar简介: Cobar是关系型数据库的分布式处理系统,它可以在分布式的环境下看上去像传统数据库一样为您提供海量数据服务. 产品在阿里巴巴B2B公司已经稳定运行了3年以上. 目前已经接管了3000 ...
- 转：WebDriver(Selenium2) 处理可能存在的JS弹出框
在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然后如果当这种弹出框出现,我们没有加以处理,WebDriver将无法进行下一步的操 ...
- VBS脚本随笔
1.定时运行程序与关闭程序的VBS处理方法: do set ws=createobject("wscript.shell") ws.run"你要运行的程序的路径(比如说d ...
- listview设置条目点击的时候不变色（让状态选择器不起作用）
未设置前的效果如下图: 很明显,“酷狗音乐”那个条目被点击的时候,条目背景变为蓝色,怎么去掉这个颜色呢? java代码可以这么写: listView.setSelector(new ColorDraw ...
- CF div2 D BFS
http://codeforces.com/contest/676/problem/D 题目大意: 勇者去迷宫杀恶龙.迷宫是有n*m的方格子组成的.迷宫上有各种记号,这些记号表达着能走的方向.当且仅当 ...
- 手机电话号码吉凶查询原理及ASP算法源码 转
随着手机的快速普及,越来越多的人都在使用手机,而号码的挑选也是用户越来越关心的事情.虽然号码只是个代号而已,但几千年的传统积淀仍给号码赋予其各种含义,至于号码的吉凶也是见仁见智的一种个人喜好问题,或许 ...
- zf-关于业务量统计柱形图（上月份的没显示出来的解决办法）
首先要想到是存储过程里面除了问题,导致没有显示出来 因为本年度和本季度 是能显示出来的 所以后台代码是没问题的 存储过程里 有个tj_type 这个tj_type有3个值 1 代表本年度 2 代表本 ...
- java.net.URLEncode编码 与 URLDecode解码问题
1.java内部加密和解密 String mytext = java.net.URLEncoder.encode("中国", "utf-8"); String ...
- iptables-过滤61开头的ip数据包
iptables -F root@android:/system/bin # iptables -L -n iptables -L -n Chain INPUT (policy ACCEPT) tar ...
- PAT (Advanced Level) 1051. Pop Sequence (25)
简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...