v1.3 更新日志

  1. 输入控件的实现改为实例化模式,同类型多个输入控件在同一个表单不会冲突
  2. 输入控件实现了继承
  3. 可以使用AForm.create创建表单,和使用new AForm创建实例的参数和结果一样
  4. radio类型支持设置“其他”选项,使用needOther:true将额外增加其他选项以及一个文本输入框
  5. 修复表格无法设置ctrlId的bug
  6. 表格和fieldset均支持frontalHtml、extHtml和tips选项
  7. 输入项label的必填星号支持放置在label的前面,使用requireAtBegin为true即可
  8. 增加off方法,用于解绑一个事件监听处理程序
  9. 增加one方法,绑定的事件处理程序在执行后将被移除,常用于定义输入控件时在render方法中延迟绑定事件
  10. schemaMode为local时,支持2层的浅拷贝
  11. 表格的border默认不设置(此前设置为1),如需设置可以使用attr:{border:1}实现
  12. 修复schemaMode为local且jtype为Array时render空数据仍当成object渲染的bug
  13. 其他代码的优化和bug修复
  14. 若div.json-form-element或div.json=field-plugin设置了ignore属性,则其下所有input均会被忽略

介绍

AForm 是工业级的表单解决方案,它基于声明式编程和模型驱动,做到了大部分工作的自动化,使用AForm,您仅需关心数据模型、数据约束和表单的最终展现,而无需关心表单的实现细节,对于大量使用表单的应用系统来说,AForm可以极大地提高您的生产力。

主要特点

  1. 声明式,易用,轻量,无依赖,无侵入
  2. 模型驱动,AForm认为模型即表单,表单即模型,您仅需关心数据模型,而无需关心表单实现细节
  3. 自动化,支持任意复杂的数据模型生成表单,如嵌套对象,数组
  4. 一站式,支持输入验证、数据适配、自定义样式、输入插件等几乎与表单相关的所有机制
  5. 全适配,支持所有浏览器和移动终端,从ie6到html5无缝支持

安装或引用

1) 直接 clone 本仓库 git clone https://github.com/xiehuiqi220/AForm.git

2) 使用 bower bower install aform --save

3) 使用 npm npm install aform --save

4) 直接下载js源文件 aform.js

使用例子

查看 jsbin 范例

var af = new AForm("target",{
className:"form-horizontal",
fields:{
"name":{label:"姓名"},
"age":{label:"年龄",type:"number"},
"education":{label:"教育经历",fields:{
school:{label:"学校"}
from:{label:"开始时间",type:"date"},
end:{label:"结束时间",type:"date"},
degree:{label:"学位",required:false,type:"select",datalist:["学士","硕士",""]}
}}
}
});
af.render({
"name": 1,
"age": 2,
"education":[{
school:"中国理工大学",from:"2004-9-1",end:"2008-7-1",degree:"学士"
},{
school:"中国文化大学",from:"2008-9-1",end:"2010-7-1",degree:"硕士"
}]
}); console.log(af.getJson());//将输出与渲染数据一致的json结构

文档

  1. demo
  2. 文档,持续完善中
  3. 单元测试

联系

任何问题,请提issue https://github.com/xiehuiqi220/AForm/issues ,非休息时间一般可做到一小时内回复

协议

[MIT license]

组件化表单解决方案AForm 1.3 发布的更多相关文章

  1. react 项目实战(四)组件化表单/表单控件 高阶组件

    高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...

  2. 💡我们的表单解决方案 el-form-renderer

    前言 本文将介绍我们的表单解决方案 @femessage/el-form-renderer,展示我们在 Vue 技术栈下,我们是如何处理以下问题的: 表单项动态显示或隐藏 表单数据联动 表单输入/输出 ...

  3. Formily教程 | formily是中后台复杂场景的表单解决方案

    前言 formily 不是一个简单的前端轮子.Formily 是一个由阿里巴巴集团多 BU 共建的面向中后台复杂场景的表单解决方案,它也是一个表单框架.它的前身是供应链平台在 2019 年初对外开源的 ...

  4. Element-ui中为上传组件添加表单校验

    vue所依赖的Element的UI库在使用其中的upload组件时,可能很大几率会遇到这个题,需要给upload组件添加表单校验 大家这里直接看代码就可以 <el-form-item class ...

  5. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  6. django系列9--django中的组件(form表单)

    modelform整体 from django import forms from app01 import models import hashlib from django.core.except ...

  7. json化表单数据

    /** * josn化表单数据 * @name baidu.form.json * @function * @grammar baidu.form.json(form[, replacer]) * @ ...

  8. vue 中跨组件的表单验证

    使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...

  9. 组件 layui 表单抓取数据四步走

    注意事项: layui 中提交按钮是基于"监听"机制实现的. form.on() 的调用需置于 layui.use 的回调函数中. 末尾的 'return false' 不可或缺, ...

随机推荐

  1. bzoj3672【NOI2014】购票

    题目描述   今年夏天,NOI在SZ市迎来了她30周岁的生日.来自全国 n 个城市的OIer们都会从各地出发,到SZ市参加这次盛会.        全国的城市构成了一棵以SZ市为根的有根树,每个城市与 ...

  2. 使用kafka消息队列解决分布式事务(可靠消息最终一致性方案-本地消息服务)

    微服务框架Spring Cloud介绍 Part1: 使用事件和消息队列实现分布式事务 本文转自:http://skaka.me/blog/2016/04/21/springcloud1/ 不同于单一 ...

  3. python中的常用模块(2)

    在自动化测试中,经常需要查找操作文件,比如说查找配置文件(从而读取配置文件的信息),查找测试报告(从而发送测试报告邮件), 经常要对大量文件和大量路径进行操作,这就依赖于os模块. 1.当前路径及路径 ...

  4. Java基础-IO流对象之转换流(InputStreamReader与OutoutStreamWriter)

    Java基础-IO流对象之转换流(InputStreamReader与OutoutStreamWriter) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.转换流概述 我们之前 ...

  5. 【转载】C#, VB.NET如何将Excel转换为PDF

    在日常工作中,我们经常需要把Excel文档转换为PDF文档.你是否在苦恼如何以C#, VB.NET编程的方式将Excel文档转换为PDF文档呢?你是否查阅了许多资料,运用了大量的代码,但转换后的效果依 ...

  6. asp.net获取当前页面的url地址

    设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.jb5 ...

  7. Nlog写日志到数据库

    https://github.com/nlog/NLog/wiki/Database-Target

  8. Swing教程

    //用多线程刷新状态 new Thread(new Runnable(){ @Override public void run() { try { for(int i=0;i<1000;i++) ...

  9. Fiddler 使用

    一.模拟post请求 User-Agent: FiddlerContent-Type: application/json; charset=utf-8Content-Length: 138Conten ...

  10. 6个动作4种难度选择!家庭减肥就用hiit

    今天推荐一组课程计划,6个动作,后面会教你如何调整课程难度,以便让课程更适合自己的身体情况. 一.深蹲:8-10次 二.俯卧撑:5-8次(女生如果完成不了标准俯卧撑,可以选择跪姿俯卧撑) 三.平板支撑 ...