`

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. }
分享到:
评论

相关推荐

    基于vue Ant-Design 的表单设计器,快速开发.zip

    基于vue Ant-Design 的表单设计器,快速开发.zip基于vue Ant-Design 的表单设计器,快速开发.zip基于vue Ant-Design 的表单设计器,快速开发.zip基于vue Ant-Design 的表单设计器,快速开发.zip基于vue Ant-Design ...

    C# winfrom 自定义表单设计器

    **C# WinForm自定义表单设计器** 在.NET框架中,C#是一种广泛使用的编程语言,尤其在开发桌面应用程序时,WinForm是一个重要的选择。本文将深入探讨如何使用C#来构建一个自定义的WinForm表单设计器。这个设计器允许...

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

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

    基于layui的表单设计器

    《基于layui的表单设计器深度解析》 在Web应用开发领域,用户界面的构建往往是一项繁琐而关键的任务,尤其在处理复杂表单时。layui,一个轻量级、模块化的前端框架,因其丰富的组件和易用性,已经成为许多开发者的...

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

    《Web表单设计:点石成金的艺术》这本书由著名的设计师卢克·罗博乌斯基(Luke Wroblewski)撰写,他不仅是Web设计领域的顶尖设计师,还曾在易趣(eBay)和雅虎(Yahoo!)等知名互联网公司中担任设计要职。在这本书...

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

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

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

    总的来说,"JAVA动态表单设计,自定义表单,自定义数据"涉及的技术栈包括Java后端开发、前端界面设计、数据库管理和RESTful API设计。通过以上各模块的协同工作,可以构建出一个高效、易用的动态表单系统,满足不同...

    基于Layui的拖拽式表单设计器设计源码

    本源码提供了一个基于Layui的拖拽式表单设计器设计。项目包含174个文件,其中包括122个JavaScript文件、24个CSS样式文件、4个GIF图片、4个WOFF字体文件、4个HTML文件、2个Markdown文档、2个PNG图片、2个EOT字体文件...

    表单设计器(基于silverlight的)

    **表单设计器(基于Silverlight的)** 在IT领域,表单设计器是一种工具,它允许用户无需编程知识就能创建和自定义复杂的表单。在这个特定的案例中,表单设计器是构建于Microsoft Silverlight技术之上的。...

    基于vue Ant-Design 的表单设计器.zip

    Vue.js Ant-Design 表单设计器是一个强大的工具,它允许开发者在Vue项目中快速构建复杂的动态表单。这个工具结合了Vue.js的响应式特性和Ant Design的优美UI组件库,为开发人员提供了一种高效、灵活的表单设计解决...

    基于 ElementUI 的表单设计器

    基于Vue.js的扩展组件则进一步提升了开发效率,例如"基于ElementUI的表单设计器",即本文要讨论的"f-render"。 标题中的"基于ElementUI的表单设计器"指的是一款专门用于创建表单的工具,它利用了ElementUI这一优秀...

    基于ElementUI的表单设计器f-render设计源码

    f-render表单设计器 - 基于ElementUI开发,包含60个文件,如JS、VUE、MD、JSON、BROWSERSLISTRC、YML、GITIGNORE、NPMIGNORE、LICENSE和WEBP等。该设计器为用户提供了基于ElementUI的表单设计功能,帮助用户快速构建...

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

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

    图形化WINFORM表单设计器

    【图形化WINFORM表单设计器】是一款用于创建和编辑Windows Forms(WINFORM)应用程序界面的工具,它允许开发者通过拖放的方式,直观地构建应用程序的用户界面,而无需编写大量的UI布局代码。这款设计器通常包括丰富...

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

    【Vue3.0表单设计器基础介绍】 Vue3.0是Vue.js框架的最新版本,它带来了许多性能优化和新特性,旨在提升开发效率和应用性能。Vue Form Design是一款基于Vue3.0的表单设计器,它允许开发者通过拖拽方式快速构建动态...

    自定义表单设计思路.docx

    ### 自定义表单设计思路详解 #### 一、概述 自定义表单系统的设计目标是为了更好地与现有的工作流系统相结合,提升工作效率与灵活性。本文档将深入探讨自定义表单设计的关键点及其实施策略。 #### 二、基础功能...

    40多款漂亮的form表单设计

    网页表单设计是构建互动性网站的关键组成部分,它在用户界面中扮演着收集信息和提供交互功能的角色。本文将深入探讨“40多款漂亮的form表单设计”,这些设计不仅美观,而且注重用户体验,旨在提高用户参与度和数据...

    自定义表单设计思路

    自定义表单设计思路 本文主要讲述了自定义表单设计思路的总体规划,旨在满足和现有工作流系统的耦合,通过对自定义表单系统的设计来实现表单权限、记录权限、字段权限等功能。下面是自定义表单设计思路的详细内容:...

Global site tag (gtag.js) - Google Analytics