介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定. 文档 | github 安装 CDN 引入 目前可以通过 unpkg.com/@form-create/ant-design-vue 获取到最新版本的资源,在页面上引入 js 即可开始使用. <!-- import Vue.js --> <script src="//

form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 详细查看: Github地址 | Composer地址 本项目还在不断开发完善中,如有建议或问题请在这里提出 安装 composer require xaboy/form-builder 示例 例子 (TP框架) 版本1 编辑权限 $form = Form::create(Url::build('up

介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定. 文档 | github 演示项目: 开源的高品质微信商城 功能 自定义组件 可生成任何Vue组件 自带数据验证 轻松转换为表单组件 通过 JSON 生成表单 通过 Maker 生成表单 强大的API,可快速操作表单 双向数据绑定 事件扩展 局部更新 数据验证 栅格布局 内置组件17种常

前几天记录了一下表单生成器(Form Builder)之表单数据存储结构mongodb篇,之后便想着伪造一些数据.为什么要伪造数据呢?说来惭愧,因为拖拉拽设计表单以及表单对应的列表的PC端和移动端该显示哪些字段并且是否支持搜索打印(即表单的列表配置)等一系列配置都还没有做,还有就是前面只说了表单相关的设计,设计完了之后就是要使用(录入数据等)对应的这些也还没有做……总之就是现在只有数据结构,但是又想写一下查询,所以只能伪造一些数据.又想着这些数据尽量真实,所以就想写点代码来伪造数据.在写代码的时

从这篇笔记开始,记录一下表单生成器(Form Builder)相关的一些东西,网上关于他的介绍有很多,这里就不解释了. 开篇说一下如何存储Form Builder生成的数据.

这篇文章终于回到了正轨:为mongodb伪造数据.之前的随机数.随机车牌照.随机时间还有这篇笔记中的获取指定长度的中文字符串,都是为这篇笔记做准备.看一下我们的准备(基础代码) // 1.获取指定范围随机数-包括最大值和最小值 var getRangeRandomNumber = function(num1,num2){ num1 = Number.isInteger(num1) ? num1: 0; num2 = Number.isInteger(num2) ? num2: 0; var mi

上一篇笔记仅是记录了一下简单的关联查询,根据笔记中的场景:将某一车辆关联的耗损记录全部放在了一个字段当中.不知道现在中有没有这种场景,我们的应用中没有类似的场景,可能我们更关注的是某车辆的总耗损金额和总营收金额.总里程数等,因此这篇笔记记录一下怎么得到这些数据.要想获取这些记录我们首先想到的就是先按照车辆ID分组之后再对指定字段求和,可能是先入为主的原因(有了上一篇笔记),我没有按照传统的思路走下去,而是想着看看能不能在上一篇笔记的基础之上得到想要的结果. 我们沿着这条路在分析一下,车辆相关的耗

这一篇接着记录一下查询相关的操作.想象一下,如果想要在一张表格中展示某些车辆的耗损和营收情况,我们该怎么处理.车辆.耗损.营收各自存储在一张表中,耗损和营收中冗余了车辆信息……我们便想到了关联查询.mongodb 3.2+中开始支持关联查询,下面介绍一下写关联查询的过程. 测试一. db.getCollection('FormInstace').aggregate([ { $match: { "FormItems.key": { $ne: null } } }, { $addField

上一篇笔记将开始定义的存储结构处理了一下,将FormItems数组中的表单项都拿到mongodb document的最外层,和以前的关系型数据类似,之不过好多列都是动态的,不固定,不过这并没有什么影响.结果就是方便我们更好的查询和统计:还有一点就是转换之后从服务器端返回客户端的对象也是如此,这样更加方便了获取每个表单项的值(例如渲染列表). 我们的好多应用场景都是分页加载,并且都需要显示总的条数.以前是弄了两个API:一个是获取查询结果:一个是获取条数.为了这样一个功能要多发送一个API觉得有点

在上篇笔记中,为车辆信息表.车辆耗损表以及车辆营收表插入了一些数据.之后便是查询了,重点也在查询……按照之前定好的数据结构,如果查询mongodb document的最外层比较简单,但是我们的重点应该是FormItems表单项集合中的表单项,对他们进行查询.统计等.针对插入的数据,我写了一个查询:查询车辆信息表中主键ID为1的车辆的所有耗损记录.分析一下,因为所有的表(上面的三张表都放在FormInstace表中)都在一个真实的表中,所以我们首先要确定FormId,之后是怎么确定是哪辆车,车辆耗

为了伪造一些尽量真实的假数据,也真是够费劲的.上一篇笔记记录了一下获取一个随机车辆牌照,这篇笔记记录一下怎么获取一个随机时间.这篇就不说那么多废话了,直接上代码 // 获取指定范围的随机数 var getRangeRandomNumber = function(num1,num2){ num1 = Number.isInteger(num1) ? num1: 0; num2 = Number.isInteger(num2) ? num2: 0; var minNum=Math.min(num1,

对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最重要的内容. Symfony2 的Form组件是一个独立的类库,你可以在Symfony2项目之外使用它. 创建一个简单的表单:假设你要创建一个应用程序的todo列表,需要显示一些任务.因为你的用户需要编辑和创建任务,所以你需要创建一个表单.在你开始之前,首先来看通用的Task类,用来表示和存储一个单

本文转载:http://www.oschina.net/news/24327/10-ajax-css-html-online-form-builder 在这篇文章中,我们将介绍10个超棒的在线表单生成器,帮助你整合web表单到你的网站中,希望大家喜欢! 1. Form Assembly 这是个web表单的CSS样式集合 2. JotForm 第一款基于可见即可用的表单生成器.使用你的浏览器创建和发布web表单.一个拖拽的用户界面使得表单创建对于任何人都是轻而易举的事件 3. pForm (Fre

form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,支持双向数据绑定.事件扩展以及自定义组件,可快速生成包含有省市区三级联动.时间选择.日期选择等17种功能组件. Github | 文档 欢迎大家收藏.点赞,多多支持. form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素.目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发.使用 form-creae 可快速.便捷的生成日常开发中所需的各种表单. 下面向大家介绍一下 fo

form-create 表单生成器 具有数据收集.校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框.单选框.输入框.下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件.详细查看: github地址 npm地址 文档地址 如果对您有帮助,您可以在Github点右上角 "Star" 支持一下 谢谢! 示例 1.2 版本重大更新 内部结构优化 新增 规则生成器$formCreate.maker 新增 滑块.

引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form/)表单页面的大概样子如下:

还是拿代码来讲吧,详情见注释 子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; const FormItem = Form.Item; class Forms extends Component{ getItemsValue = ()=>{ //3.自定义方法,用来传递数据(需要在父组件中调用获取数据) const valus= this.props.form.getFieldsVa

痛点 在使用antd的表单时,大家觉得不够清爽,总结如下: 大量的模板语法,需要一定的学习成本. 需要手动地进行数据绑定,使用大量的onChange/setFieldsValue去控制数据. 无法通过state动态地控制表单. 提交表单时,需要将props.form的数据和其他数据组合. 表单联动时处理复杂.   解决方向 现状 类比Angular与Vue,大家觉得双向绑定的模式,在表单的开发中是比较好的,所以如果能将表单的数据直接绑定到state上,那么react的开发表单就会相对高效一些.

import React from 'react'; import {Form, InputNumber, Input, DatePicker, Button, Select, Icon} from 'antd'; import moment from 'moment'; // 推荐在入口文件全局设置 locale import 'moment/locale/zh-cn'; moment.locale('zh-cn'); import PageTitle from "component/page

编写antd配置表单组件 整体思路 抽取formitem的配置数组:包含组件类型.名称.label名称,相关的opts和扩展的opts,传递进入组件 组件通过Form.create()进行表单创建,能够带有form属性.并且上层组件引用后能够ref的方式获取form进行操作处理 基于form能够抽取出来,上层组件能够对下层组件进行调用和操作,在此基础上还能够进行扩展配置和扩展功能的实现 组件通过props中获取配置数组,动态生成FormItem的表单元素,实现动态配置表单的功能 组件通过在cre