好久不写博客了,手都生了,趁着最近老大让我研究动态表单生成的时机,撸一发博客~~ 开源项目比较 老大丢给我了两个比较不错的开源的动态表单生成工具,这两个项目在github上的star数量基本持平: https://form.io/#/ https://github.com/udos86/ng-dynamic-forms form.io 其中from.io本身是一个商业项目,只是开源了其中动态表单生成的部分.他的功能有点强大,从官方简介的视频来看看,支持拖拽.验证.设置各种默认值等等,商业版本甚至

前言:在企业数据处理过程中,经常需要通过定制表单来输入业务数据.由于涉及的数据比较离散,并不同于ERP系统的紧密关联数据.假如由开发人员每个增加页面,工作量会比较大,后期后期的维护很升级也耗费时间和精力.所以表单设计器是一个实现动态表单的解决办法,用户无需重复编写表单代码就可以管理表单和存储表单数据. 1. 表单设计器 表单设计器是一款基于Bootstrap3风格的WEB应用,操作过程描述主要是将左侧面板控件拖动到表单编辑区域进行排版,每个控件可以编辑对应的数据库字段属性,常见属性有:字段类型,

背景:搭建一个适合公司erp业务的开发平台.   架构概要图: 表单设计开发部署示例图    表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如果开发交叉功能也比较容易冲突和调试冲突,特别是服务经常调试产生冲突).完成某个功能开发以后,通过项目一键发布至测试环境进行集成测试.在集成测试ok后,一键发布至线上开发环境.2) 正式线上部署可以按照项目为单位建立负载均衡,按照项目为单位整体建立集群.单个web站点包含表单文件服务和表单代码服务.表

程序=数据结构+算法,而企业级的软件=数据+流程,流程往往千差万别,客户自身有时都搞不清楚,随时变化的情况更是家常便饭,抛开功能等不谈,需求变化很大程度上就是流程的变化,流程的变化会给开发工作造成很大麻烦.而本审批流程具有较强的通用性,同时也有很大的灵活性,虽然无法100%的解决各种非常个性化的审批流程,但至少也能解决其中80%以上的较为通用的流程了.本文将就分享部分心得! 本审批流程从实现上来说由流程设计器.流程控制组件和表单设计器三大部分组成.下面将分别进行描述: 1. 流程设计器 流程设计

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式定义 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计 基于Extjs的web表单设计器 第八节——表单引擎设计 这一节我给大家介绍一下表单设

这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计

如今为了适应需求的不断变化,动态表单设计器应运而生.它主要是为了满足界面的不断变化和提高开发速度.比如:一些页面客户可能也无法确定页面的终于布局,控件的位置,在哪种情况下显示或不显示等可能须要随时改动.为了应对这些需求而不去多次改动源码进行公布,就能够在项目中使用动态表单设计器.如今分享一下我做的动态表单设计器的设计思路,共同学习.      想做一个表单设计器,首先要确定是做c/s的还是b/s.我考虑到以后的发展方向是c/s向b/s转化,所以就选择了b/s的方向,并且做b/s比做c/s要简单非

    formbuild拖拽表单设计器 表单设计器适用于OA系统.问卷调查系统.考试系统等系统,具体使用请前至官网API请点击 formbuild拖拽表单设计器     formbuild迭代几个功能 1.升级BootStrap3.0版本.代码DOM结构有所修改 2.form.build.core.js源代码解读3.新增复制源代码copyToClipboard.js功能.html格式化4.新增单列预.两列预览功能(layer.ui 交互)5.popover文本控件自定义属性 form.buil

由于这样工作和自身的一些原因很长一段时间没有写过博客了.最近想把自己前面一段时间搞出的一个表单设计器的相关经验或者经历记录下来.分享给大家,也算是对自己前2个月的一个总结回顾吧. 首先介绍一下开发此版本的表单设计器的原因及背景.该项目是公司为中国某大型国有企业开发网上经费报销系统,主要是处理改集团及其二级单位,三级单位等子分公司的各种日常经费报销,预算控制及其他常用业务审批(比如:备用金借支.出差申请及差旅费报销.合同管理.资产调拨等).系统主要由两个最重要的部分组成一个WF流程设计及流程引擎—

前面一节介绍了表单设计器的背景和最终的大概样式,本节主要介绍表单设计器的需求及功能设计. 在讲需求之前先明确几个常用的概念: 主表或者卡片表——具有多行多列的一个区域的控件块,如下图所示. 明细表——就是常用的表格类型的控件块,表头信息就确立了该列的数据类型,如下图所示. 卡片式的表:指的是一个表单模板只包括一个主表: 主子表:指的是一个表单模板包含一个主表.一个明细表: 多子表:指的是一个表单模板包含一个主表.多个明细表: 嵌套多子表:指的是一个表单模板嵌套了多个主子表或者多个多子表: 表单设

这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基本元素,更是核心组成部门. 一.区域控件,它主要包含三个类型的控件:卡片区域.表格区域.混合区域.这三个控件是我们的其他控件的容器或者叫包装器,相当于VS里面的各种Panel.它们很重要,每种区域控件的作用都不一样,能够包含的控件类型也不大一样,它们三个区域相互配合使用,可以为我们的表单提供强大的支

看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性区域.这样的UI设计肯定就得支持控件的拖拽设计,用户只要拖放一个控件到我们的画布上,那么画布就应该立即能够看到我们拖放的控件在画布中的位置.大小.以及一些控件自带的默认信息.不用说这样的设计对于用户来说不论在操作体验上还是设计的感官上都更加直接和方便,因为我在设计阶段就可以知道我设计后的表单在系统运

表单设计器公式设计参考 整体说明 Ø 公式以javascript方式解析,最终支持JS语法或计算方式: Ø 公式变量以数据项为主,以{}符号表示数据项,例如数据项A,表示为{A}:如果是子表中的数据项,那么表示为{子表名称.字段名称}: 计算公式(ComputationRule) 1. 求和,例如数据项C=A+B. 设置ComputationRule值为:2,{A}+{B} 语法:保留小数位数,计算表达式,公式中的2表示保留小数位数,也可以是其他值: 2. 求乘积,例如数据项C=A*B 设置Co

包含表单设计器和运行展现 一个完整的应用 页面部分都是使用XML和XHTML进行服务端的组合出来的,具体逻辑有些复杂 设计器缺少一个最常用的:repeat,如果需要只能手动编写代码(参考官方文档步骤有些繁琐),只有Form Runner中可用 网上展示内容 http://www.orbeon.com/orbeon/home/ 设计 http://localhost:8080/orbeon/fr/orbeon/builder/summary applicationName/ Form Name P

接着上一节介绍控件拖放的设计. 通过前面的介绍知道,我们的区域类型的容器控件有三种:Card.Table.Mixed. Card 可以支持几乎所有的常用控件,包括:文本TextField.多文本TextArea.数字NumberField.金额NumberField.日期DateField.下拉树NetDropDown.按钮Button.复选框CheckBox.单选框Radio:Table可以支持的常用控件比Card稍微少一点,它不支持button类型的控件以及多文本TextArea控件:Mix

表单设计 在前面文章中,我们通过一系列案例介绍了表单设计的一些基本功能,表单设计起到非常重要作用,也是crudapi核心,所以本文会详细介绍表单设计中一些其它功能. 概要 表单字段column属性 列英文名称 描述 name 英文名称 caption 中文名称 autoIncrement 是否自增长 description 描述 displayOrder 序号,UI中显示的顺序 dataType 数据类型,比如字符串.整数等 seqId 序列号ID,用于设置流水号 indexName 索引名称

<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ padding: 50px; font-family: "微软雅黑"; } input{ margin-bottom: 20px; padding-lef

angular编写表单验证 一.整体概述 表单内容如下图,包括常用的用户名.密码.确认密码.手机.邮箱等 整体js代码很少,就一个指令用于写确认密码和密码是否相等.其他 验证都是使用angular自带的指令进行校验和显示. 本demo还使用了bootstrap的栅栏功能进行布局,因为想写的是demo所以很多样式以及其他限制就不写了,我认为越是简单越好让别人改写使用 二.重点说明 1.表单属性: $dirty:已经修改过 $invalid:不合法 $valid:合法 $error:错误 $pris

如何用angular实现表单的一些问题?核心步骤大概如下: 创建模型类 创建控制此表单的组件. 创建具有初始表单布局的模板. 使用ngModel双向数据绑定语法把数据属性绑定到每个表单输入控件. 往每个表单输入控件上添加name属性 (attribute). 添加自定义 CSS 来提供视觉反馈. 显示和隐藏有效性验证的错误信息. 使用 ngSubmit 处理表单提交. 禁用此表单的提交按钮,直到表单变为有效. -------------理论到此结束,我是最不华丽的分割线-------------

使用Angular提交表单 我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用 步骤为: 1. 加载Angular 2. 设置module 3. 这是controller 4. 将module和controller应用于HTML 5. 设置双向变量绑定 6. 这是错误和信息 看起来好像是很多内容,但是最终,我们会用非常少的代码,并且看起来会非常简洁.另外,创建带有更多输入更大的表单,也会更容易. Angul