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

  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前台系统
  • 任何使用表单收集用户数据的场合

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

{
  "Name": "张三丰",
  "Age": 32,
  "Height" : 165,
  "Married":true,
  "Sexy":1,
  "Hobby": "篮球,电影,旅行",
  "Address": {
    "Street": "南汇\"区xx路xx号",
    "City": "上海",
    "Country": "中国",
    "zipCode": "543210"
  },
  "Children": [
    {
      "Name": "小明",
      "Age": 7
    },
    {
      "Name": "小丽",
      "Age": 4
    },
    {
      "Name": "小淘",
      "Age": 3
    }
  ]
}

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

{
        arrayIndex: {
            show: true
        },
        fields: {
            Name: { label: "姓名", readonly: true },
            Married: { label: "已婚" },
            Height: { label: "身高", required: true, type:"number" , ctrlAttr : {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: "女"}] },
            Children: { label: "子女", noCreate: false, noDelete: false },
            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: "居住所在地" , inline: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: ['美国', '中国', '韩国'] }
        }
    }
    

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

快速上手

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

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

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

<script>
var jf = new AForm("divOutput",{
        arrayIndex : {
                show : true
        },
        fields:{
                Name:{label:"姓名",readonly:true},
                Sexy:{label:"性别",type:"radio",datalist:[{value:0,text:"男"},
                {value:1,text:"女"}]},
                Country:{label:"国家",readonly:true,type:"select",datalist:[
                'USA','CHINA','KOREA']}
        }
});
jf.render({
  "Name": "John Smith",
  "Sexy": 1,
  "Country":"CHINA"
});
</script>

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

<script>
jf.getJsonString();
</script>

下载和文档:

https://github.com/xiehuiqi220/AForm 

AForm的更多相关文章

  1. json2form已改名为AForm

    相信大部分程序员都接触过表单,表单是收集用户输入的不二之选,但是表单的开发又是最繁琐.最复杂的,简单地说,开发表单你需要涉及到很多知识: 布局,表单如何布局排版,看起来最清晰整洁,且符合用户体验 控件 ...

  2. AForm — 模型驱动的自动化表单解决方案

    http://xiehuiqi220.github.io/AForm/doc/book/#

  3. 组件化表单解决方案AForm 1.3 发布

    v1.3 更新日志 输入控件的实现改为实例化模式,同类型多个输入控件在同一个表单不会冲突 输入控件实现了继承 可以使用AForm.create创建表单,和使用new AForm创建实例的参数和结果一样 ...

  4. Atitit.异常处理 嵌套  冗长的解决方案

    Atitit.异常处理 嵌套  冗长的解决方案 1. 异常处理的需要改进的地方1 2. +异常设计的初衷是, 在程序中出现错误时, 由程序自己处理错误, 尽量不要以exit(0)这种粗暴的方式中止程序 ...

  5. Batsing的网页编程规范(HTML/CSS/JS/PHP)

    特别注意!!!我这里的前端编程规范不苟同于Bootstrap的前端规范. 因为我和它的目的不同,Bootstrap规范是极简主义,甚至有些没有考虑到兼容性的问题. 我的规范是自己从编程实践中总结出来的 ...

  6. Delphi 查找标题已知的窗口句柄,遍历窗口控件句柄(转)

    用我的方法来控制其他程序窗体上的窗口控件,必须先了解什么是 回调函数.我的理解是这样的: 回 调函数写出来不是自己的程序去调用的,反而是让其他的东西去调用,比如windows操作系统,比如其他的程序等 ...

  7. atitit agt sys 设置下级代理功能设计.docx

    atitit agt sys 设置下级代理功能设计.docx 显示界面1 先查询显示 set_sub.js1 设置代理2 /atiplat_cms/src/com/attilax/user/Agent ...

  8. XE8 for iOS 状态栏的几种效果

    XE8 实现 iOS 状态栏的几种效果: 一.状态栏底色: 开一个新工程. 设定 Fill.Color 颜色属性. 设定 Fill.Kind = Solid. 无需修改任何官方源码. 二.隐藏状态栏( ...

  9. 单页面网站关于id冲突的解决办法

    最近做了一个单页面的网站,所有的页面加载都是通过局部刷新的方式,并且不用iframe,并且我们引入了动态tab页签: 所有的页签里的内容都只是一个元素,都在同一个html页面上,没有任何iframe分 ...

随机推荐

  1. Tomcat - JNDI 配置

    1. Create Your JavaBean Class Create the JavaBean class which will be instantiated each time that th ...

  2. Android Sqlite 使用 注意事项

    1.Sqlite 写操作 并不是线程安全的 1.在多进程或多线程中使用sqlite,同时操作同一个数据库的话,会导致异常抛出. 2.不同线程或实例化多个SqliteOpenhelper来操作同一个数据 ...

  3. linux中vsftpd登陆慢卡问题解决方法

    1.修改服务器上的/etc/resolv.conf令其内容只有类似 nameserver 192.81.133.229 nameserver 114.114.114.114 出现问题的机器的resol ...

  4. NodeJS缓存机制:畅销货,就多囤一点呗

    上一篇文章,我们已经实现了客户端向NodeJS服务器发出请求时,服务器从磁盘读取文件内容后,向客户端返回文件的数据.而对于爱莲(iLinkIT)的1对n的场景,即将文件共享出来之后,让多个用户同时下载 ...

  5. 3月31日学习笔记(CSS基础)

    背景属性 文本属性 direction 属性影响块级元素中文本的书写方向.表中列布局的方向.内容水平填充其元素框的方向.以及两端对齐元素中最后一行的位置. 注释:对于行内元素,只有当 unicode- ...

  6. dorado问题查询&快捷键重命名

    重命名还有一个快捷键  F2 有关dorado的问题可以进 www.bsdn.org提问,而且更好

  7. C++与Lua交互(五)

    引言 要将C++中的对象类型映射到Lua中,就不得不要先了解Lua面向对象的机制.在这里,我们先看一下Lua面向对象的实现基础--metatable,再以此实现C++对象到Lua的映射. Lua面向对 ...

  8. L007-oldboy-mysql-dba-lesson07

    L007-oldboy-mysql-dba-lesson07 [root@web01 ~]# mysqldump -uroot -ptestpassword -A >/root/mysql_ba ...

  9. PHP 类的静态变量索引

    直接上代码 <?php class example{ public static $pa; public $pb; public function __construct(){ $this-&g ...

  10. ListView 复制到剪切板

    private void 导出ToolStripMenuItem_Click(object sender, EventArgs e) { Clipboard.SetText(GetListView(l ...