相信大部分程序员都接触过表单,表单是收集用户输入的不二之选,但是表单的开发又是最繁琐、最复杂的,简单地说,开发表单你需要涉及到很多知识:

  1. 布局,表单如何布局排版,看起来最清晰整洁,且符合用户体验
  2. 控件的选用,用select还是radio,用多选的select还是用复选框,有时还需要编写个性化的输入控件
  3. 数据有效性的验证、输入的提示文案等
  4. 针对个别输入控件的特殊设置,输入控件之间的联动
  5. 表单中如果有数据列表,那么你还需要编写内嵌表格以收集这些数据

以上这些随便哪一条都不是一件简单的工程,尤其是遇到复杂的表单,会令人更加头疼,但是一直以来,表单的开发鲜有敏捷的框架可用,我们可以找到表单的css框架、数据验证框架、数据填充或序列化函数,以及一些输入控件的组件,如日期选择器等,但我们很难找到一个统一的省事的表单框架,因此我们开发的表单很难复用、保持风格的一致以及进行高度的扩展。

那么是否有这样一种框架,让我们能够轻易创建风格统一、兼容各种浏览器以及高度定制的表单呢?答案是有!这里介绍一个组件,名叫json2form,可以轻易地把json数据转换成表单,无论json数据中是嵌套了多么复杂的数据,包含何种数据类型,甚至是数组,它都可以轻松应对。

json2form的介绍

json2form是一个可以把json数据转换成表单输入项的javascript组件,并可以轻松把输入的数据又还原成json,您仅需输入几行配置即可轻松生成各式各样的标准表单;在web系统中,只要您使用表单收集数据,相信您一定可以通过json2form来大大提高开发表单的效率。

主要特点:

  1. 使用和配置简单,仅包含3个函数,可快速上手
  2. 表单标准化,支持文本框、文本区域、单选框、复选框、下拉列表等各种输入控件
  3. 支持对数组元素的增删改操作
  4. 支持html5的新特性
  5. 支持输入验证,输入提示
  6. 可高度定制,支持自定义样式、界面以及各种验证处理函数

适用场景:

  • 各种WEB后台管理系统
  • 可由用户自定义表单的WEB前台系统
  • 任何使用表单收集用户数据的场合

现在我们来试验一下,把如下的数据生成表单:

  1. {
  2. "Name": "张三丰",
  3. "Age": 32,
  4. "Height" : 165,
  5. "Married":true,
  6. "Sexy":1,
  7. "Hobby": "篮球,电影,旅行",
  8. "Address": {
  9. "Street": "南汇\"区xx路xx号",
  10. "City": "上海",
  11. "Country": "中国",
  12. "zipCode": "543210"
  13. },
  14. "Children": [
  15. {
  16. "Name": "小明",
  17. "Age": 7
  18. },
  19. {
  20. "Name": "小丽",
  21. "Age": 4
  22. },
  23. {
  24. "Name": "小淘",
  25. "Age": 3
  26. }
  27. ]
  28. }

再加上一些配置代码,配置字段的名字、控件类型等:

  1. {
  2. arrayIndex: {
  3. show: true
  4. },
  5. fields: {
  6. Name: { label: "姓名", readonly: true },
  7. Married: { label: "已婚" },
  8. Height: { label: "身高", required: true, type:"number" , ctrlAttr : {min:100,max:200,step:1} },
  9. Age: { label: "年龄", maxlength: 3, required: true, pattern: "\\d+", title: "请输入数字", tips: "小于100" },
  10. Sexy: { label: "性别", type: "radio", datalist: [{ value: 0, text: "男" }, { value: 1, text: "女"}] },
  11. Children: { label: "子女", noCreate: false, noDelete: false },
  12. Hobby: { label: "爱好" , required: true,cssText : "background:infobackground;border:1px solid gray", type: "checkbox", delimiter: ",", multiple: true, size: 5, datalist: ["烹饪", "音乐", "电影", "睡觉", "篮球", "旅行"] },
  13. Address: { label: "居住地址" },
  14. Street: { label: "街道",width:"300px", tips: "居住所在地" , inline:true },
  15. zipCode: { label: "邮政编码", tips: "居住所在地" , inline:true },
  16. City: { label: "城市",cssText:"", inline:true,ctrlCssText:"color:red",hideLabel:false, maxlength: 2, size: 15, tips: "hello" },
  17. Country: { label: "国家",width:"300px", inline:true, readonly: true, type: "select", datalist: ['美国', '中国', '韩国'] }
  18. }
  19. }

下面是最终生成的表单界面:

快速上手

使用json2form极其简单,您首先需在调用页面的head部分引入如下js文件和样式文件(样式文件是可选的):

  1. <link href="aform.css" rel="stylesheet" />
  2. <script src="aform.js"></script>

然后,准备好需要渲染的json数据和针对该数据的一些配置(同样也是json格式),以及用于显示表单的DOM容器(比如一个form或者div,假设命名为“divOutput”),最后像下面这样使用:

  1. <script>
  2. var jf = new AForm("divOutput",{
  3. arrayIndex : {
  4. show : true
  5. },
  6. fields:{
  7. Name:{label:"姓名",readonly:true},
  8. Sexy:{label:"性别",type:"radio",datalist:[{value:0,text:"男"},
  9. {value:1,text:"女"}]},
  10. Country:{label:"国家",readonly:true,type:"select",datalist:[
  11. 'USA','CHINA','KOREA']}
  12. }
  13. });
  14. jf.render({
  15. "Name": "John Smith",
  16. "Sexy": 1,
  17. "Country":"CHINA"
  18. });
  19. </script>

这样就会在指定的容器中生成一组输入项,当您想收集用户数据时,执行getJsonString函数即可,该函数返回一个符合json标准的字符串:

  1. <script>
  2. jf.getJsonString();
  3. </script>
  4. 下载和文档:
  5. https://github.com/xiehuiqi220/AForm

json2form已改名为AForm的更多相关文章

  1. 红米3 SM71.1(android-7.1.1_r6)更新发布20161229年末增强版

    一.写在前面 我只是个人爱好,本ROM未集成任何第三方推广软件,我只是喜欢把好的资源分享出来,若可以,我们一起学习,一起进步. 请不要问我怎么刷机! 请不要问我玩游戏卡不卡(有钱你就换好点的手机)! ...

  2. Wordpress 所有hoor列表

    d 在插件加载的时候执行 wp_footer 加载页面底部时执行 admin_menu 加载管理员菜单时执行 wp_head 在body标签的开始添加html内容 after_setup_theme ...

  3. JDBC第四次学习

    传智播客李勇老师的JDBC系列学习终于接近尾声了,好开心,能学到这么多的东西,还不赶快记录下来,留待以后回味! 如何使用开源项目DBCP(实际项目中常用)    主要分为三个步骤: 使用DBCP必须用 ...

  4. 1. SQL Server服务器监控实现方法

    对于服务器的监控,和对数据库的监控,很少有合二为一的工具,如果有的话,一般是付费软件,或者自行开发的工具.所以如果不想购买软件,也不想花精力去开发的话,可以结合一些免费/开源的工具.自定义脚本,来完成 ...

  5. Python 开源异步并发框架的未来

    http://segmentfault.com/a/1190000000471602 开源 Python 是开源的,介绍的这几个框架 Twisted.Tornado.Gevent 和 tulip 也都 ...

  6. linux运维面试题

    一.有文件file1 1.查询file1 里面空行的所在行号 grep -n "^#" file1 or awk ‗{if($0~/^$/)print NR}‘ file or g ...

  7. linux上安装shell编辑器与linux运维面试题

    分两个部分 一.安装B-shell解释器 安装cygwin  Eclipse要找到安装的bin路径 https://cygwin.com 二.安装编辑器shellEd 下载可以得到一个:net.sou ...

  8. TR069协议向导——一个帮助你了解TR069协议的简明教程(一)

    您也能够到下面地址下载: http://download.csdn.net/source/993034 1.为什么须要TR069    随着VoIP.IPTV等越来越多IP终端设备的普及(尤其在家庭中 ...

  9. 让 Dreamweaver 支持 Emmet(原ZenCoding)

    注:目前暂不支持 DW CC,期待作者早是更新.Update:2013/10/12 鉴于某些原因,每个 Coder 所钟爱的 IDE 各不相同.而作为一个软件爱好者,我几乎所有 IDE 都使用过一段时 ...

随机推荐

  1. UESTC 900 方老师炸弹 --Tarjan求割点及删点后连通分量数

    Tarjan算法. 1.若u为根,且度大于1,则为割点 2.若u不为根,如果low[v]>=dfn[u],则u为割点(出现重边时可能导致等号,要判重边) 3.若low[v]>dfn[u], ...

  2. HDU 4865 Peter's Hobby --概率DP

    题意:第i天的天气会一定概率地影响第i+1天的天气,也会一定概率地影响这一天的湿度.概率在表中给出.给出n天的湿度,推测概率最大的这n天的天气. 分析:这是引自机器学习中隐马尔科夫模型的入门模型,其实 ...

  3. 使用PS3手柄在PC玩Unity3D游戏

    PS3手柄玩Unity游戏 今天把公司的PS3手柄接到PC上,想用手柄试一下玩赛车的感觉,老感觉用键盘按键玩的不爽. 把PS3的手柄接到PC上之后,系统提示正在安装驱动--,百度找资料,如何在PC上使 ...

  4. POJ 1182 食物链

    G - 食物链 Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  5. 13SpringMvc_限定某个业务控制方法,只允许GET或POST请求方式访问

    这篇文章要实现的功能是:在一个Action中,有些业务方法只能是post提交上来的才能执行,有些方法是只能get提交上来的才能执行. 比如上篇文章中的UserAction.java(代码如下) pac ...

  6. google的glog的用法:

    验证宏: 功能类似assert断言,但不受DEBUG模式控制即非DEBUG模式也生效 如果验证失败,会写FATAL日志并终止程序运行 CHECK(condition) 比较验证: CHECK_EQ(a ...

  7. 转载:有关SQL server connection Keep Alive 的FAQ(2)

    转: http://blogs.msdn.com/b/apgcdsd/archive/2012/05/18/sql-server-connection-keep-alive-faq-2.aspx 在下 ...

  8. list to csv

    import csv # ============================== # list to csv # ============================== a = [1,2, ...

  9. 在windows下python,pip,numpy,scipy,matplotlib的安装

    系统:win7(64bit) 如果只需要安装python,执行步骤一就可以了,不用管后面.如果还需要其它的库,则只需要执行第二步,第一步可省略(因为在安装anaconda的时间,python就自动装好 ...

  10. JNDI全面总结(zz)

    原理:         在DataSource中事先建立多个数据库连接,保存在数据库连接池中.当程序访问数据库时,只用从连接池中取空闲状态的数据库连接即可,访问结束,销毁资源,数据库连接重新回到连接池 ...