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 ...

随机推荐

Servlet简介及使用
javaweb学习总结(五)——Servlet开发(一) 一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口 ...
js html 交互监听事件学习
事件处理程序(handler): HTML事件处理程序: <input type="button" value="Click Here" onclick= ...
java下发电子邮件demo
在实际项目中会遇到需要使用邮件注册,或者是使用邮件找回密码等操作,需要使用到邮件发送功能. 其实邮件的发送主要是依赖于邮件协议,只要能实现邮件协议,那么发送邮件其实还是很容易的.这一步java类库已经 ...
从零深入 tomcat
1.tomcat的安装使用 tomcat是实现了J2EE标准的最简单轻巧的WEB服务器,所以使用tomcat必须安装JDK咯! ① 安装JDK并设置环境变量: ②设置tomcat的环境变量: 这两小步 ...
FusionCharts使用问题及解决方法(一)-FusionCharts常见问题大全
当你利用FusionCharts创建图表时报错,原因是多方面的.本文总结了一些常见问题及解决方法供大家参考,希望对大家有帮助. 如果你无法看到任何图表: 如果浏览器中的进度条一直加载,或者右键菜单显示 ...
android脚步---UI界面修改，增加按钮和监听
我的UU界面,其布局如下: 需要修改的部分: 意见反馈居中,还有增加backbutton 首先在mainactivity中找到我的UU的定义:dialogue public void showAbou ...
疯狂JAVA讲义---第十二章：Swing编程（五）进度条和滑动条
http://blog.csdn.net/terryzero/article/details/3797782 疯狂JAVA讲义---第十二章:Swing编程(五)进度条和滑动条标签: swing编程 ...
C. Bear and Colors
C. Bear and Colors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
HDU 5172 GTY's gay friends 线段树
GTY's gay friends Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
Contaminated Milk
Contaminated Milk 题目描述 Farmer John, known far and wide for the quality of the milk produced on his f ...

Json填充到Form中

Json填充到Form中的更多相关文章

随机推荐

热门专题