<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../resources/javascript/json2form.min.js"></script>
    <script src="../resources/javascript/jquery-1.8.3.min.js"></script>
    <script src="../resources/javascript/json2.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
    <form id="MyForm">
        <div id="form1"></div>
        &nbsp;&nbsp;&nbsp;
        <input type="button" value="获取json" onclick="GetString()" />
    </form>
    <script type="text/javascript">
        var jf = new JsonForm("form1", {
            arrayIndex: {
                show: true
            },
            fields: {
                Name: { label: "姓名", readonly: true },
                Married: { label: "已婚" },
                Height: { label: "身高", required: true, type: "number", ctrlArrt: { min: 100, max: 200, step: 1 } },
                Age: { label: "年龄", maxlength: 3, required: true, pattern: "\\d+", title: "请输入数字", tips: "小于100" },
                Sexy: { label: "性别", type: "radio", datalist: [{ value: 0, text: "男" }, { value: 1, text: "女" }] },
                Childrent: { label: "子女", noCreate: false, noDelete: true, cssText: "" },
                Hobby: {
                    label: "爱好", required: true, cssText: "background:infobackground;border:1px solid gray", type: "checkbox",
                    delimiter: "、", multiple: true, size: 5, datalist: ["烹饪", "音乐", "电影", "篮球", "旅行"]
                },
                Address: { label: "居住地" },
                Street: { label: "街道", width: "300px", tips: "居住所", inline: true },
                zipCode: { label: "邮政编码", tips: "居住地", inlint: true },
                City: { label: "城市", cssText: "", inline: true, ctrlCssText: "color:red", hideLabel: false, maxlength: 2, size: 15, tips: "hello" },
                Country: { label: "国家", width: "300px", inline: true, readonly: true, type: "select", datalist: ['美国', '中国', '韩国'] }

            }
        });

        var data = {
            "Name": "XXX",
            "Age": 32,
            "Height": 165,
            "Married": true,
            "Sexy": 1,
            "Hobby": "篮球、电影",
            "Address": {
                "Street": "济南\"区XX路XX号",
                "City": "山东",
                "Country": "中国",
                "zipCode": "543210"
            },
            "Children": [
                {
                    "Name": "XXX",
                    "Age": 8
                },
                {
                    "Name": "YYYY",
                    "Age": 4
                }
            ]
        }

        jf.render(data);

        function GetString() {
            var jsonTxt = jf.getJsonString();
            alert(jsonTxt);
        }
    </script>

</body>
</html>

json2form实例的更多相关文章

  1. 最近学习工作流 推荐一个activiti 的教程文档

    全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...

  2. js-静态、原型、实例属性

    本篇来说一下js中的属性: 1.静态属性 2.原型属性 3.实例属性 静态属性: function klass(){} var obj=new klass(); klass.count=0; klas ...

  3. ZIP压缩算法详细分析及解压实例解释

    最近自己实现了一个ZIP压缩数据的解压程序,觉得有必要把ZIP压缩格式进行一下详细总结,数据压缩是一门通信原理和计算机科学都会涉及到的学科,在通信原理中,一般称为信源编码,在计算机科学里,一般称为数据 ...

  4. EntityFramework Core 1.1是如何创建DbContext实例的呢？

    前言 上一篇我们简单讲述了在EF Core1.1中如何进行迁移,本文我们来讲讲EF Core1.1中那些不为人知的事,细抠细节,从我做起. 显式创建DbContext实例 通过带OnConfiguri ...

  5. redis集成到Springmvc中及使用实例

    redis是现在主流的缓存工具了,因为使用简单.高效且对服务器要求较小,用于大数据量下的缓存 spring也提供了对redis的支持: org.springframework.data.redis.c ...

  6. 流程开发Activiti 与SpringMVC整合实例

    流程(Activiti) 流程是完成一系列有序动作的概述.每一个节点动作的结果将对后面的具体操作步骤产生影响.信息化系统中流程的功能完全等同于纸上办公的层级审批,尤其在oa系统中各类电子流提现较为明显 ...

  7. UWP开发之Template10实践：本地文件与照相机文件操作的MVVM实例(图文付原代码)

    前面[UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理]章节已经提到过Template10,为了认识MvvmLight的区别特做了此实例. 原代码地址:ht ...

  8. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

  9. 【HanLP】HanLP中文自然语言处理工具实例演练

    HanLP中文自然语言处理工具实例演练 作者:白宁超 2016年11月25日13:45:13 摘要:HanLP是hankcs个人完成一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环 ...

随机推荐

  1. NOIP模拟赛 寻找

    题目描述 “我有个愿望,我希望穿越一切找到你.” 这是个二维平面世界,平面上有n个特殊的果实,我从(0,0)点出发,希望得到尽量多的果实,但是出于某种特殊的原因,我的运动方式只有三种(假设当前我在(x ...

  2. background-size背景缩放

    特别注意:背景图片缩放是相对于背景图片所在容器的宽高而言的,并不是相对背景图片本身的宽高 比如,一个div的宽高是300和200像素,背景图片本身的宽高是100*100的像素,设置div的backgr ...

  3. FJOI省队集训 chessboard

    (题目懒得打字了,建议到新窗口查看) 显然这玩意儿是可以按位搞的...然后就是一个裸的最小割模型? 然而这样做理论上只有30分实际上有40分. 事实上我们可以发现,每一列的取值只和上一列有关,这样我们 ...

  4. laravel5.3引入第三方类库的方法

    laravel版本:5.3 今天做的是引入第三方的phpquery类库,方法: 在laravel的app目录下自定义一个文件夹,我用的名字是:Libs 然后直接将phpquery类库扔进这个目录 在c ...

  5. IT教程网

    这个IT教程网(印度),我认为是最好的.里面的知识基础实用,覆盖面很广,作为IT入门和了解都是极好的. http://www.tutorialspoint.com/

  6. DEDECMS之六 网站地图、RSS地图

    在用织梦CMS做网站的都知道,在它的robots.txt是屏蔽掉了data目录的,可是,不巧dedecms默认的网站地图是在data下的,为了让蜘蛛更好的爬行,有必要将dedecms生成的网站地图放在 ...

  7. C# Winform应用程序占用内存较大解决方法整理（转）

    原文:http://www.jb51.net/article/56682.htm 背景: 微软的 .NET FRAMEWORK 现在可谓如火如荼了.但是,.NET 一直所为人诟病的就是“胃口太大”,狂 ...

  8. ASP.NET MVC使用jQuery来POST数据至数据库中

    学习ASP.NET MVC程序,结合jQuery客户端代码,Post数据至数据库去.Insus.NET今天写一个完整性的例子. 在数据库中,创建一个表[dbo].[TestUser]: 既然是把数据存 ...

  9. Validate Binary Search Tree

    Validate Binary Search Tree Given a binary tree, determine if it is a valid binary search tree (BST) ...

  10. Asp.net,C# 纯数字加密解密字符串

    也就是说加密后的数据不再是:N8lAaHMFtSAQgaf3+RUFng== 希望encryptedString是"1203877893704809384098328409234923840 ...