`

Formweaver表单设计

 
阅读更多

表单设计概述

 

  • 支持自定义模板。表单编辑和查看页面共用同一个模板。
  • 完全不用考虑数据库是怎样操作的,所有都是保存表单设计后自动完成的,您只需要配置表单字段。
  • 如“人事档案”表单,表单设计完成后得到四个功能页面,新建人事档案、编辑人事档案、查看人事档案、删除人事档案。

 

表单实例演示

文章发布页面
新建客户页面
新建产品页面
新建销售订单页面

表单设计首页面

点击右键可以表单预览,设计表单模板(编写简单的HTML),编辑表单,删除表单。

新建表单页面

新建表单字段页面

字段描述是字段的中文名称,字段名称会作为数据库字段,必填,且必须为英文。

字段类型有:单行文本框、多行文本框、下拉菜单、单选框、复选框、附件、列表。

选项配合字段类型使用,下拉菜单、单选框、复选框类型时候,选项形如“选项一,选项二,选项三”。附件类型时候,选项中填写允许上传的附件类型,形如“jpg|gif|png”,选项为空则不限制上传附件类型。 列表类型时候,选项中填写列表名称,列表名称请从列表设计里选取。

验证规则对表单字段进行验证,所有表单字段通过验证后才能保持表单。例如:“required”,该字段为必填项。验证规则可以多个,例如:“required|integer”,该字段为必填且必须为整数。更多 验证规则参考手册

其他中填写字段的标签属性,如:onclick="alert();" style="width:200px;",最终在表单页面生成的代码为<input name="input" onclick="alert();" style="width:200px;" >

设计表单模板

设计表单模板,不要出现 form、body标签,系统会自动把"#[字段中文名称]"替换为设计好的字段。

表单验证规则

规则 参数 描述 举例
required No 必填,不能为空  
matches Yes 如果表单元素的值与参数中对应的表单字段的值不相等,则返回FALSE matches[form_item]
is_unique Yes 返回FALSE,如果表单元素并不是唯一的参数表和字段的名称。 is_unique[table.field]
min_length Yes 如果表单元素值的字符长度少于参数中定义的数字,则返回FALSE min_length[6]
max_length Yes 如果表单元素值的字符长度大于参数中定义的数字,则返回FALSE max_length[12]
exact_length Yes 如果表单元素值的字符长度与参数中定义的数字不符,则返回FALSE exact_length[8]
greater_than Yes 返回FALSE如果表单元素小于参数值的数值。 greater_than[8]
less_than Yes 返回FALSE,如果表单元素大于参数值数值。 less_than[8]
alpha No 如果表单元素值中包含除字母以外的其他字符,则返回FALSE  
alpha_numeric No 如果表单元素值中包含除字母和数字以外的其他字符,则返回FALSE  
alpha_dash No 如果表单元素值中包含除字母/数字/下划线/破折号以外的其他字符,则返回FALSE  
numeric No 如果表单元素值中包含除数字以外的字符,则返回 FALSE  
integer No 如果表单元素中包含除整数以外的字符,则返回FALSE  
decimal Yes 返回FALSE,如果表单元素并不是参数值。  
is_natural No 如果表单元素值中包含了非自然数的其他数值 (其他数值不包括零),则返回FALSE。自然数形如:0,1,2,3....等等。  
is_natural_no_zero No 如果表单元素值包含了非自然数的其他数值 (其他数值包括零),则返回FALSE。非零的自然数:1,2,3.....等等。  
valid_email No 如果表单元素值包含不合法的email地址,则返回FALSE  
valid_emails No 如果表单元素值中任何一个值包含不合法的email地址(地址之间用英文逗号分割),则返回FALSE。  
valid_ip No 如果表单元素的值不是一个合法的IP地址,则返回FALSE。  
valid_base64 No 如果表单元素的值包含除了base64 编码字符之外的其他字符,则返回FALSE。

弹出选择数据窗口JS函数

data_picker()是一个系统内置的JS函数,用于弹出小窗口选择数据。
参数说明:data_picker(title,vid,fields,items,width,height,template);

  • 第一个参数:弹出窗口标题
  • 第二个参数:选择列表页面ID
  • 第三个参数:需要自动填入表单的字段数组,形如:['chanpinid','chanpinmc','danjia']
  • 第四个参数:被选择列表的列序号数组,与第三个字段一一对应,形如[0,2,5]
  • 第五个参数:弹出窗口宽度,可不填,默认自动宽度。
  • 第六个参数:弹出窗口高度,可不填,默认自动高度。
  • 第七个参数:弹出列表应用模板,可不填。

例如订单明细中产品字段“其他”中加入readonly onclick="data_picker('选择产品','111',['chanpinid','chanpinmc','danjia'],[0,2,5]);"
“readonly”意为本字段不可写,“onclick”意为点击时弹出选择数据窗口。弹出列表中的1,3,6列内容自动分别填入到表单中字段名称为'chanpinid','chanpinmc','danjia'值中,并关闭该窗口。
以下给出该函数定义方法,可以看出并不复杂。您当然也可以在表单模板设计中加入自定义的JS函数和CSS样式。

  1. var url=location.href.replace(location.search,'');
  2. function data_picker(title,vid,fields,items,width,height,template){
  3. if(!template){template="select";}
  4. if(!width){width="auto";}
  5. if(!height){height="auto";}
  6. $.ajax({
  7. url: url+'?c=general&m=listview&vid='+vid+'&template='+template,
  8. success:function(c){
  9. $("#dialog").html("");
  10. var d=$("#dialog").append(c).dialog({title:title, width:width,height:height,modal:true});
  11. $(document).on('click','#dialog tbody tr',function(){
  12. for(var x in fields){
  13.  
  14. ob(fields[x]).val($(this).find("td").eq(items[x]).html());
  15. }
  16. d.dialog("close");
  17.  
  18. });
  19. }
  20. });
  21. }
分享到:
评论

相关推荐

    微信小程序 易打卡 表单设计 (源码)

    微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)...

    JavaScript实现的可视化表单设计器源码.zip

    JavaScript实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器,让表单开发简单而高效。 特性如下: 可视化配置页面 提供栅格布局,并采用flex实现对齐 一键预览配置的效果 一键生成...

    JAVA动态表单设计,自定义表单,自定义数据

    JAVA动态表单设计,自定义表单,自定义数据,在线设计,数据库存储

    C# winfrom 自定义表单设计器

    一个基于.NET C# 开发的 Winform 自定义表单设计组件。支持Xml保存和加载表单,支持控件的拖放和属设置,支持复制、粘贴、对齐、撤销、重做等设计时操作。

    拖拽式表单设计器(源码).zip

    拖拽式表单设计器(源码).zip拖拽式表单设计器(源码).zip拖拽式表单设计器(源码).zip拖拽式表单设计器(源码).zip拖拽式表单设计器(源码).zip拖拽式表单设计器(源码).zip拖拽式表单设计器(源码).zip拖拽...

    微信小程序——易打卡 表单设计(截图+源码).zip

    微信小程序——易打卡 表单设计(截图+源码).zip 微信小程序——易打卡 表单设计(截图+源码).zip 微信小程序——易打卡 表单设计(截图+源码).zip 微信小程序——易打卡 表单设计(截图+源码).zip 微信小程序...

    基于 vue 和 element-ui 实现的可视化表单设计器

    基于Vue的可视化表单设计器,让表单开发简单而高效;高级版本目前已支持 Vue3。MakingForm 表单设计器(基于可视化操作快速设计出表单页面)。GenerateForm 表单生成器(根据设计器中获取的配置 json 数据,快速渲染...

    自定义工作流+可视化表单设计器

    拖拽式表单设计器java版,排版可随意定制,提供丰富的表单控件,根据Ueditor改造,表单设计完成之后,可直接进行工作流的扭转,工作流纯源码,可以随意定制二次改造,微信搜索 开源码农 ,更多资源免费下载

    基于vue和element-ui实现的表单设计器 通过拖拽方式快速生成一个表单页面

    基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面,表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件(radio,select,checkbox)提供选择后触发...

    表单设计器源码 此款表单设计器

    此款表单设计器实现了自 表单设计器源码 此款表单设计器实现了自定义表单,并创建数据表及保存数据的功能,能移植以WEB上使用,但在WEB上无法实现数据的动态保存, 是以上传来大家帮忙看看,能否实现WEB表单设计...

    Web表单设计:点石成金的艺术.pdf

    Web表单设计:点石成金的艺术.pdf

    开普云表单设计器(离线表单设计器)v7.0.1.8官方安装版

    开普云表单设计器是一款离线表单设计器,可设计更复杂样式、更复杂运算规则的电子表单模板。 因在线设计器受浏览器限制很多功能不能完美展现,Windows表单设计器是在线电子表单应用的极好补充。在表单中心直接导入...

    小程序源码 易打卡 表单设计 (代码+截图)

    小程序源码 易打卡 表单设计 (代码+截图)小程序源码 易打卡 表单设计 (代码+截图)小程序源码 易打卡 表单设计 (代码+截图)小程序源码 易打卡 表单设计 (代码+截图)小程序源码 易打卡 表单设计 (代码+截图)小程序源码...

    RuoYi 3.0 + 雷劈表单设计 + UFLO工作流

    RuoYi 3.0 + 雷劈表单设计 + UFLO工作流RuoYi 3.0 + 雷劈表单设计 + UFLO工作流

    Web表单设计 创建高可用性的网页表单 PDF 带目录书签

    两位作者通过丰富的实例,明确阐述了如何从表单的关系、对话和外观三层模型出发,设计出具有高可用性的优质网页表单,并通过可用性测试及早发现表单的潜在问题。通过阅读本书,读者能够了解到如何定义需求,如何提出...

    表单设计器(基于silverlight的)

    表单设计器(基于silverlight的),个人感觉比较复杂,但功能是没话说的。

    vue_form_design:基于Vue3.0的表单设计器

    vue_form_design:基于Vue3.0的表单设计器

    自定义表单设计思路.docx

    为了满足和现有工作流系统的耦合,在适当改动现有工作流的基础上,对自定义表单系统(包括与工作流相关)的设计做出如下的规划: 1.基础功能模块:部门、角色、人员信息、班组、岗位(这些都可能是潜在的流程参与者...

    [网页设计相关]互联网表单设计

    互联网表单设计互联网表单设计互联网表单设计互联网表单设计互联网表单设计互联网表单设计互联网表单设计互联网表单设计互联网表单设计互联网表单设计互联网表单设计

Global site tag (gtag.js) - Google Analytics