1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7.     <script src="../resources/javascript/json2form.min.js"></script>
  8.     <script src="../resources/javascript/jquery-1.8.3.min.js"></script>
  9.     <script src="../resources/javascript/json2.js"></script>
  10.     <style type="text/css">
  11.     </style>
  12. </head>
  13. <body>
  14.     <form id="MyForm">
  15.         <div id="form1"></div>
  16.         &nbsp;&nbsp;&nbsp;
  17.         <input type="button" value="获取json" onclick="GetString()" />
  18.     </form>
  19.     <script type="text/javascript">
  20.         var jf = new JsonForm("form1", {
  21.             arrayIndex: {
  22.                 show: true
  23.             },
  24.             fields: {
  25.                 Name: { label: "姓名", readonly: true },
  26.                 Married: { label: "已婚" },
  27.                 Height: { label: "身高", required: true, type: "number", ctrlArrt: { min: 100, max: 200, step: 1 } },
  28.                 Age: { label: "年龄", maxlength: 3, required: true, pattern: "\\d+", title: "请输入数字", tips: "小于100" },
  29.                 Sexy: { label: "性别", type: "radio", datalist: [{ value: 0, text: "男" }, { value: 1, text: "女" }] },
  30.                 Childrent: { label: "子女", noCreate: false, noDelete: true, cssText: "" },
  31.                 Hobby: {
  32.                     label: "爱好", required: true, cssText: "background:infobackground;border:1px solid gray", type: "checkbox",
  33.                     delimiter: "、", multiple: true, size: 5, datalist: ["烹饪", "音乐", "电影", "篮球", "旅行"]
  34.                 },
  35.                 Address: { label: "居住地" },
  36.                 Street: { label: "街道", width: "300px", tips: "居住所", inline: true },
  37.                 zipCode: { label: "邮政编码", tips: "居住地", inlint: true },
  38.                 City: { label: "城市", cssText: "", inline: true, ctrlCssText: "color:red", hideLabel: false, maxlength: 2, size: 15, tips: "hello" },
  39.                 Country: { label: "国家", width: "300px", inline: true, readonly: true, type: "select", datalist: ['美国', '中国', '韩国'] }
  40.  
  41.             }
  42.         });
  43.  
  44.         var data = {
  45.             "Name": "XXX",
  46.             "Age": 32,
  47.             "Height": 165,
  48.             "Married": true,
  49.             "Sexy": 1,
  50.             "Hobby": "篮球、电影",
  51.             "Address": {
  52.                 "Street": "济南\"区XX路XX号",
  53.                 "City": "山东",
  54.                 "Country": "中国",
  55.                 "zipCode": "543210"
  56.             },
  57.             "Children": [
  58.                 {
  59.                     "Name": "XXX",
  60.                     "Age": 8
  61.                 },
  62.                 {
  63.                     "Name": "YYYY",
  64.                     "Age": 4
  65.                 }
  66.             ]
  67.         }
  68.  
  69.         jf.render(data);
  70.  
  71.         function GetString() {
  72.             var jsonTxt = jf.getJsonString();
  73.             alert(jsonTxt);
  74.         }
  75.     </script>
  76.  
  77. </body>
  78. </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. [No000066]python各种类型转换-int,str,char,float,ord,hex,oct等

    int(x [,base ]) #将x转换为一个整数 long(x [,base ]) #将x转换为一个长整数 float(x ) #将x转换到一个浮点数 complex(real [,imag ]) ...

  2. 读Java面向对象编程(孙卫琴)

    2.1创建Java源文件 Java应用由一个或多个扩展名为".java"的文件构成,这些文件被称为Java源文件,从编译的角度,则被称为编译单元. 本章包含两个Java源文件:Do ...

  3. 使用Access-Control-Allow-Origin解决跨域

    什么是跨域 当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同). 跨域就指着 ...

  4. ubuntu下crontab编辑方法的设定

    在ubuntu下,首次编辑crontab计划任务的时候,会提示让选择编辑器.由于对nano编辑器不是很熟悉,若是选择nova编辑的话,会有些麻烦.可以重置编辑器,方法如下:[root@wang ~]# ...

  5. Android平台的一些常用命令

    一.Android常见目录结构 1.  apk文件在/data/app目录下 2.  /data/data/[package.name]目录,存放程序数据缓存等等 3.SD卡安装方式的,则在/mnt/ ...

  6. 使用spring boot+mybatis+mysql 构建RESTful Service

    开发目标 开发两个RESTful Service Method Url Description GET /article/findAll POST /article/insert 主要使用到的技术 j ...

  7. Ztree 随笔记

    Ztree方法是一个单体对象方法,假如一个页面有多个的话,每申明一个新对象前面的Ztree对象就要被覆盖. 解决:在生成tree控件的时候就要设置其控件ID,然后通过$.fn.zTree.getZTr ...

  8. 单例模式的两种实现方式对比：DCL (double check idiom）双重检查 和 lazy initialization holder class（静态内部类）

    首先这两种方式都是延迟初始化机制,就是当要用到的时候再去初始化. 但是Effective Java书中说过:除非绝对必要,否则就不要这么做. 1. DCL (double checked lockin ...

  9. xml入门

    1.why xml? 如果说JSON是一种轻量级的数据交换格式,那么xml就是重量级的.xml应用于web开发的许多方面,常用于简化数据的存储和共享.永远要记住,xml跟JSON一样是用来存储和传输数 ...

  10. SQL基础之XML

    1.XML数据类型 在SQL Server中xml数据类型可以用来保存xml文档,这个文档即可以是完整的xml文档和xml片段,这样开发者就可以像使用int数据类型一样来使用xml数据类型.不过xml ...