组件化表单解决方案AForm 1.3 发布
v1.3 更新日志
- 输入控件的实现改为实例化模式,同类型多个输入控件在同一个表单不会冲突
- 输入控件实现了继承
- 可以使用AForm.create创建表单,和使用new AForm创建实例的参数和结果一样
- radio类型支持设置“其他”选项,使用needOther:true将额外增加其他选项以及一个文本输入框
- 修复表格无法设置ctrlId的bug
- 表格和fieldset均支持frontalHtml、extHtml和tips选项
- 输入项label的必填星号支持放置在label的前面,使用requireAtBegin为true即可
- 增加off方法,用于解绑一个事件监听处理程序
- 增加one方法,绑定的事件处理程序在执行后将被移除,常用于定义输入控件时在render方法中延迟绑定事件
- schemaMode为local时,支持2层的浅拷贝
- 表格的border默认不设置(此前设置为1),如需设置可以使用attr:{border:1}实现
- 修复schemaMode为local且jtype为Array时render空数据仍当成object渲染的bug
- 其他代码的优化和bug修复
- 若div.json-form-element或div.json=field-plugin设置了ignore属性,则其下所有input均会被忽略
介绍
AForm 是工业级的表单解决方案,它基于声明式编程和模型驱动,做到了大部分工作的自动化,使用AForm,您仅需关心数据模型、数据约束和表单的最终展现,而无需关心表单的实现细节,对于大量使用表单的应用系统来说,AForm可以极大地提高您的生产力。

主要特点
- 声明式,易用,轻量,无依赖,无侵入
- 模型驱动,AForm认为模型即表单,表单即模型,您仅需关心数据模型,而无需关心表单实现细节
- 自动化,支持任意复杂的数据模型生成表单,如嵌套对象,数组
- 一站式,支持输入验证、数据适配、自定义样式、输入插件等几乎与表单相关的所有机制
- 全适配,支持所有浏览器和移动终端,从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
使用例子
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结构
文档
联系
任何问题,请提issue https://github.com/xiehuiqi220/AForm/issues ,非休息时间一般可做到一小时内回复
协议
[MIT license]
组件化表单解决方案AForm 1.3 发布的更多相关文章
- react 项目实战(四)组件化表单/表单控件 高阶组件
高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...
- 💡我们的表单解决方案 el-form-renderer
前言 本文将介绍我们的表单解决方案 @femessage/el-form-renderer,展示我们在 Vue 技术栈下,我们是如何处理以下问题的: 表单项动态显示或隐藏 表单数据联动 表单输入/输出 ...
- Formily教程 | formily是中后台复杂场景的表单解决方案
前言 formily 不是一个简单的前端轮子.Formily 是一个由阿里巴巴集团多 BU 共建的面向中后台复杂场景的表单解决方案,它也是一个表单框架.它的前身是供应链平台在 2019 年初对外开源的 ...
- Element-ui中为上传组件添加表单校验
vue所依赖的Element的UI库在使用其中的upload组件时,可能很大几率会遇到这个题,需要给upload组件添加表单校验 大家这里直接看代码就可以 <el-form-item class ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- django系列9--django中的组件(form表单)
modelform整体 from django import forms from app01 import models import hashlib from django.core.except ...
- json化表单数据
/** * josn化表单数据 * @name baidu.form.json * @function * @grammar baidu.form.json(form[, replacer]) * @ ...
- vue 中跨组件的表单验证
使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...
- 组件 layui 表单抓取数据四步走
注意事项: layui 中提交按钮是基于"监听"机制实现的. form.on() 的调用需置于 layui.use 的回调函数中. 末尾的 'return false' 不可或缺, ...
随机推荐
- Apache+tomcat配置动静分离(一个apache一个tomcat,没有做集群)
1. 下载apache http server,tomcat,mok_jk.so apache下载地址:http://httpd.apache.org/download.cgi tomcat下载地址: ...
- 菜鸟合作伙伴日志接入规范之C#实现
由于行业的业务功能需要,需要与菜鸟对接登录日志,将我们系统的用户登录信息提交给菜鸟,菜鸟分析通过分析日志,检查存在的一些安全问题.根据菜鸟提供的标准,实现了C#的接入,下面分享给大家,让需要的朋友少走 ...
- k-Nearest Neighbor algorithm 思想
转载 KNN--K最邻近算法思想 KNN算法的决策过程 k-Nearest Neighbor algorithm 上图中,绿色圆要被决定赋予哪个类,是红色三角形还是蓝色四方形?如果K=3, ...
- vi的一些使用技巧
1.vi 编辑器中跳到文件的第一行:键盘按下 小写 gg vi 编辑器跳到文件最后一行:键盘按 shift + g (等于G) 跳转到当前行的第一个字符按0,跳转到当前行的最后一个字符按shift ...
- [postfix]转发邮件设置
http://stackoverflow.com/questions/22537523/postfix-recipient-bcc-maps-multiple-recipients-how-to ht ...
- JS--条件语句
一.If条件判断 1.1 if条件 if(条件){ //js代码 } 1.2 if...else if(条件){ //js代码 }else { //js代码 } 1.3 if..else if..el ...
- PyQt 5.4参考指南 ---- PyQt5和PyQt4之间的差异
欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/in ...
- (转)Tomcat配置调优与安全总结
tomcat配置调优与安全总结 作为运维,避免不了与tomcat打交道,然而作者发现网络上关于tomcat配置和调优安全的文章非常散,通过参考各位大神的相关技术文档,根据作者对tomcat的运维经验, ...
- Shell记录-Shell命令(定时任务)
在Linux系统中, at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron(crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因 ...
- Elasticsearch技术解析与实战(三)文档的聚合
1.计算每个tag下的商品数量 PUT /database/_mapping/product { "properties": { "tags": { " ...