精华内容
下载资源
问答
  • 你将收获动态表单开发的一般思路可视化领域中的表单引擎从零实现一款动态表单设计器利用H5-Dooring开发一款表单设计平台正文按照习惯,我们先看看表单设计器实现的效果展示:上图中我们将表单设计器集成到了H5-...

    7fddaa448802adbba41dd6aa9af0f1a2.png

    前言

    之前笔者有写过一篇如何设计动态表单配置平台的文章,但是由于笔者电脑问题代码丢失,所以后期重新实现了一套表单设计器,并优化了之前的设计方式,特地做一下总结和复盘。

    你将收获

    • 动态表单开发的一般思路
    • 可视化领域中的表单引擎
    • 从零实现一款动态表单设计器
    • 利用H5-Dooring开发一款表单设计平台

    正文

    按照习惯,我们先看看表单设计器实现的效果展示:0e9773c300a8fc6932b666d7d7ed1cce.png74f3e78b07c708fc7a2ec98164508d22.png

    上图中我们将表单设计器集成到了H5-Dooring中,使其可以实现拖拽生成表单。

    其次我们可以根据右边的配置项,动态的添加某个表单组件或或者修改组件字段和数据源。在配置好表单之后我们还可以定制表单提交的api接口地址,以便实现用户数据的可溯源性。

    在开发之前,我们先分析一下动态表单设计的一般实现思路。

    动态表单开发的一般思路

    1. 静态化配置列表 

    静态化配置列表是最传统的表单配置方式之一,基本思路就是利用母表来生成配置项,进而实现表单配置。类似于以下方式:

    e07a2d24822931ee32353bbfde8b9c49.png

    早期的网站配置就是类似于这种呢方案实现的,比如说我们要定制网站的主色,网站某些组件是否可见,是一种比较简单的方式。但是缺点是每增加一个配置属性,都要开发人员重新编写一个字段配置代码,这种方式在表单开发中非常不灵活,而且对代码层有强依赖性,所以只适合做小型配置系统。比如个人网站,简单的自定义表单。2. 基于json schema的动态表单配置

    基于json schema的动态表单配置有两种实现方案, 一种就是支持在线修改json文件从而实现定制化,另一种就是完全无代码操作,但是前提都需要提供一套通用的表单模版。类似于如下案例:

    70b7fd514bc8d305c18aa1419ed24997.png

    此种方案可以实现基本的表单自治。也是本文主要实现的方案。至于在线编写json文件的方案。笔者之前也也过成熟的方案,具体可以参考:

    基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)

    3. 支持在线coding的混合式表单设计 

    支持在线编程的混合式表单设计方案是终极方案,也是目前流行的无代码化平台的思想之一。一方面它提供了基于json schema的动态表单配置, 对于一些强定制的,需要在线设计组件方案的模式,采用在线编程,实时打包成动态组件的方式,最后根据平台的组件约定来实现组件库的方式。如下图所示:

    7a164544a8a6bb4e4da58b35616a24ea.png

    在线代码编辑可以使用react-codemirror2或者 react-monaco-editor插件来实现。至于在线打包,我们用nodejs完全可以实现,笔者在做Dooring项目的在线下载代码时就用到了该方案,感兴趣的可以了解一下。

    可视化领域中的表单引擎

    可视化领域一方面强调的是图形(可视化)的设计,一方面是动态表单。比如说我们想傻瓜式的改变一张图的数据,属性,交互等,我们需要通过表单这一桥梁来实现:

    407e27e93d8ba878ac230b098b1e13c8.png

    所以我们需要设计一款适合公司产品的“表单引擎”,来动态根据图形组件的类型渲染不同表单配置。这块思想也是表单设计器要解决的问题之一。在下面的文章中我们会详细介绍实现过程。

    从零实现一款动态表单设计器

    在实现表单设计器之前,我们先来整理一下思路和需求。在笔者的最初草图中,它长这样:

    c85077ab83cbb4049203557a643731d2.png

    从草图中我们可以提取到如下任务信息:

    • 定义一套表单组件库
    • 确定表单全局属性配置
    • 实现表单操作curd(增删查改)
    我们这里总结了几个常用的表单组件如下:
    • 单选框
    • 复选框
    • 单行文本
    • 多行文本
    • 下拉框
    • 文件上传
    • 日期框
    • 数值输入框

    以上这些基本满足我们的日常开发需求,其次我们还可以开发数据源表单组件,列表组件,比如dooring实现的那样:

    c7958e67f212f4629ab71bbe233e6a0a.png类似的还有颜色面板这些,我们可以更具业务需求自行定制。

    在完成表单组件库之后,我们就需要根据配置项动态渲染了。也有两种实现思路,一种就是类似于多条件判断,如下:

    {
    item.type === 'Number' &&label={item.name} name={item.key}>
    min={1} max={item.range && item.range[1]} step={item.step} />
    }
    {
    item.type === 'Text' &&label={item.name} name={item.key}>
    }
    {
    item.type === 'TextArea' &&label={item.name} name={item.key}>rows={4} />
    }复制代码
    这样做虽然可行,也有很多成熟系统采用该方案,但是一旦表单变多,比如一个页面有几十个甚至上百个表单项,那么我们将渲染m * n次(m为表单组件类型数,n为配置项个数)。另一种方式笔者看来是比较优雅的,可以将复杂度降低到O(n),也就是笔者常用的对象法。思路大至如下:将表单组件的类型作为对象的属性,属性值为对应的表单组件,这样遍历的时候只需要对应上对象的具体类型即可。 代码如下:
    // 维护表单控件, 提高form渲染性能
    const BaseForm = {
    "Text": (props) => {
    const { label, placeholder, onChange } = props
    return title={label}>
    type="text" placeholder={placeholder} onChange={onChange} />
    },
    "Number": (props) => {
    const { label, placeholder, onChange } = props
    return title={label}>type="number" placeholder={placeholder} onChange={onChange} />
    }
    }
    // 动态渲染表单
    {
    formData.map((item, i) => {
    let FormItem = BaseForm[item.type]
    return
    className={styles.formItem} key={i}>...item} />

    })
    }复制代码

    是不是很优雅呢?后期我们只需要在BaseForm里维护表单组件即可,而且还可以基于BaseForm对表单进行包装,实现动态删除,编辑等功能。如下:

    1a4ac2075c855a75f2ae2d6ba3c16f38.png

    包装后的代码如下:

    className={styles.disClick}>...item} />
    className={styles.operationWrap}>onClick={handleEditItem}>onClick={handleDelItem}>
    复制代码接下来我们看看表单的全局属性,通过实际分析我们可以知道表单有如下外观:
    • 表单标题
    • 表单背景图片
    • 表单背景颜色
    • 提交按钮样式
    所以他们因该成为表单设计的通用属性,如下图所示:6c801fa47dc31bcef018f45e0bc0e90b.png配置出来之后的表单可能长这样:d593cefe2c751e83749dd4df547015f1.png

    以上的表单通过H5-Dooring设计而来。当然我们可以利用它设计更加自定的表单页面。

    最后一个比较使用的需求就是api定制,一般公司可能需要将用户的录入数据收集到自己的平台,那么这个时候我们提供一个api表单提交接口积极很有必要了,上面笔者也展示过,实现很简单,就是配置里多一个api的文本框即可。

    最后一步就是实现表单的curd操作,展示如下:

    编辑表单项:e91fbd2075976625bbf8d5ab010631e8.png删除表单项:5f24c67de905a2d231b82c14add735b4.png添加表单项:0fa952b5914f2aaf60320027c03f854a.png

    具体实现也比较简单,只需要基于BaseForm进行包装,添加删除/编辑/添加按钮即可。具体可以参考我的开源项目H5-Dooring,地址:H5-Dooring传送门

    利用H5-Dooring开发一款表单设计平台

    在H5编辑器Dooring的实现中,我们可以做抽象,每一个页面组件可以看成特定的表单组件,如下图:

    f6eafea8eb8bb42d2abcd09fcf112794.png

    我们可以利用dooring的能力对表单平台进行拖拽,样式设计,数据录入等等操作,感兴趣的朋友可以基于Dooring设计思路改造成自己的表单设计平台。在文末笔者会附上dooring的github地址供大家研究参考。

    H5可视化编辑器Dooring功能迭代说明

    目前笔者实现的H5可视化编辑器H5-Dooring功能新增如下:
    • 实时保存功能

    • 添加进度条组件

    • 添加websocket通信

    • 实现在线下载代码功能

    • 添加Button组件

    • 添加动态表单设计器

    最后

    如果想学习更多H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战,欢迎在公众号《趣谈前端》一起学习讨论,共同探索前端的边界。

    更多推荐

    • 基于React+Koa实现一个h5页面可视化编辑器-Dooring
    • 深度剖析github star数15.1k的开源项目redux-thunk
    • TS核心知识点总结及项目实战案例分析
    展开全文
  • 基于BootStrap、jQuery的表单设计器。以前做的产品中的插件。用户可以根据临床科研方案设计eCRF功能。 现将设计其独立出来,作为一个通用工具,希望以后能够用到其他场景中。 项目核心是前台界面设计,属性设置及...

    基于BootStrap、jQuery的表单设计器。以前做的产品中的插件。用户可以根据临床科研方案设计eCRF功能。 现将设计其独立出来,作为一个通用工具,希望以后能够用到其他场景中。 项目核心是前台界面设计,属性设置及事件配置,后端的增删改查功能是为了程序能够运行临时做的,了解即可。目前用的后台是ASP.NET MVC3,因为VS开发项目效率高,对HTML,JS的支持强。本质上,WebFormDesigner就是个前台,可以与任何语言对接。数据格式使用标准的 http+json

    软件架构

    BootStrap 响应式页面 jQuery Drageable, Resizeable ,jQueryUI,实现拖拽设计功能 后台使用ASP.NET MVC3 Access数据库保存数据

    安装教程

    1. 安装.netframework4.5 (如果只看前台功能,不装这个也行,放在IIS或Tomcat下即可)
    2. IIS中新建应用,指向根目录
    3. 浏览器中打开网址

    使用说明

    1. 设计很简单,相信程序员都能看懂,不做说明。 2、事件配置需要一些内置函数,说来话长,后面补充。

    界面展示

    04a1699bebfdb364dfec69e26f125f8c.png
    1dc95751fdd781bb54492f9069fa199b.png
    c4c257f74ede15cc4499ddf5c0f54cd8.png

    项目地址:https://gitee.com/shebin/WebFormDesigner

    展开全文
  • 介绍自定义表单设计器,这是一个现代化应用中一个加分的模块,目前很多大型的系统都会存在很多表单,针对不同的客户,可能表单都会不一样,而且不够灵活,可能针对不同的场景都得去定制化的开发很多不一样的表单,...

    介绍

    自定义表单设计器,这是一个现代化应用中一个加分的模块,目前很多大型的系统都会存在很多表单,针对不同的客户,可能表单都会不一样,而且不够灵活,可能针对不同的场景都得去定制化的开发很多不一样的表单,因此现在很多大型应用程序都提供了自定义表单的功能,今天就为大家介绍一些在github上发现的比较符合需求的基本实现,需要自己配合后台,但是最难的部分,也就是前端设计器的部分基本上不需要动,一起来看一看!


    99a5daba9f3c9042c140ed978c6c4db4.gif


    开源项目首页

    笔者在接到项目要求后,在github上找了很久,也有好几个版本,现在全部都贡献出来,以便于大家参考,其中包括了PC端和移动端(分开的并不是集成在一起的,有点遗憾),有一些虽然开源,但是收费这里就不介绍了,下面是相关地址:

    1、https://github.com/wxjaa/ddvue(Vue+移动端)

    2、https://github.com/xiedajian/dingding(jQuery+移动端)

    3、https://github.com/chrunlee/formdesigner(jQuery+移动端)

    4、https://github.com/wxjaa/dingding(jQuery+移动端)

    5、https://github.com/mrabit/vue-formbuilder(Vue+PC)


    笔者是在第一个Vue版本的基础上修改的,其实大部分代码不需要修改,不过需要自行整合金自己的项目,可以根据自己的需求进行整合


    项目介绍

    因为笔者使用的是第一个,因此就直接拿第一个进行简单的介绍,遗憾的是没有找到React和Angular版本的,可以根据需要自行选择。

    • 1、项目结构

    大致的项目结构如下,这只是一个基础的脚手架项目,因为开源的时间较长,脚手架使用的不是最新版,不过这不是重点:

    38132c90921f5d0de1ff64826c584a43.png

    • 2、组件部分
    0684f26f73077e98ad17ded1cc4e9416.png

    这部分主要就是自定义的一些控件部分,像文本框、下拉框等的渲染部分都在这里,对应如下部分

    709d984517fa1c1279f86c3ff186b032.png

    • 3、中间界面部分

    也就是进行拖拽后的表单容器

    4ec22f90bad2bc8f14c89d15c250c84e.png
    975ce32d249d1f1323088fb40f3b1651.png
    • 4、设置部分
    d49226f8ca5bc915f77b8496298f2d10.png
    d9056335e5adf4fec74cf63dd6447164.png
    d2e53a752cd7ff683368968eac2ffad1.png
    da14e63c84000fcbca2c33fa1cd25540.png

    整个项目也就分为大致这几个部分,由于笔者刚刚接触Vue不久,有些地方也可能存在理解不到位的地方,这里就不在过多介绍,另外还包括头部和按钮部分,整个界面的核心就是中间的设计器部分,有需要的朋友自行修改即可,其中控件当中包含的明细,相信是大家需要的!

    • 5、开发

    首先先克隆或者下载下来源代码:

    # 安装依赖npm install# 启动服务npm run dev# 构建打包npm run build

    PC版的大致预览

    可实现自定义表单控件,可拖拽排序,自定义属性由于这部分笔者还没有用到,因此简单的一起来看看效果

    48a5b62bf7feb6c8a4c415c3d249383c.gif
    212cb53f1001753b83516cd69b6514e5.gif
    28fee057d472db2e6d2e0fb61b739b50.gif

    总结

    对于智能表单设计器,笔者目前也正在摸索如果能够实现的更好,以上的案例都提供了非常不错的思路,非常感谢开源的作者们,如果你也有同样的需求,可以参考以上几个,当然加入你有更好的思路,也可以在评论区留言分享,感谢!

    展开全文
  • 信息实体对象在对象模型的设计中,有一个普遍的业务就是信息实体类的设计。如果不把“信息实体对象”这个普遍业务来探讨说明清楚,那么你将在数据模型与对象模型之间摇摆不定,最终在不断尝试领域驱动设计感到困难后...

    信息实体对象

    在对象模型的设计中,有一个普遍的业务就是信息实体类的设计。如果不把“信息实体对象”这个普遍业务来探讨说明清楚,那么你将在数据模型与对象模型之间摇摆不定,最终在不断尝试领域驱动设计感到困难后敬而远之。

    实体对象(Entity Object)

    从哲学概念的角度来讲,客观存在并可相互区别的事物就是实体。简单理解为世间万都是实体。在软件设计中,实体又做了更具体的应用。

    比如在实体关系图中,一个实体就是对一类事物的抽象。不同实体之间是通过实体类型进行区分的,一般表现为实体名称:用户、角色、桌子、板凳、屋子等等。如果只理解为实体名称是不具严谨的,因为它的全程为实体类型名称,所以对物的抽象是对一类事物的抽象,而不是对名词的抽象。

    实体类是概念性的数据密集型类 - 它们的主要目的是存储数据并提供对这些数据的访问。在许多情况下,实体类是持久的,这意味着数据是长久存在的,并需要存储于文件或数据库中。

    这段话又强调了另一件事情,就是实体需要持久化。

    信息实体对象

    今天要讨论的重点是信息实体对象。再过去大家谈论领域模型时,基本再说领域模型的标志是充血模型。这种想法使得信息实体模型在你的设计中很难生存并使你很痛苦。为了信息实体对象能很好地让你接受,再次强调对象概念:领域模型的基础是对象模型,对象是由属性和方法组成的

    信息实体对象基本表现为表单数据对象,这类实体的基本特征就是属性很多,几乎没有方法。常见操作也就是 CRUD 和数据校验。如下图:

    217d0bfe2c5960557fd942783fa37c69.png

    看到这,感觉表单数据不再是领域模型或者不在是大家口中相传的那样“软件核心复杂性应对之道”,其实这种思维就是对领域建模和对象建模的误解,为了解开这份误解开始对表单数据的对象建模吧。

    Form 对象

    Form 就是表单或者表格的意思。比如人口普查时让大家会填一个普查表格,这其实就是在填写一份表单。在 JS 中 Form 是个对象,他包含提交和重置操作方法。如:$("#form").submit()$("#form").reset(),由此可以感觉到在 JS 中 Form 是个对象模型。

    表单数据

    在看到表单页面时,我们都应该有一个最基本的认识,表单对象是对表单数据的包装,然后表单数据通常又是一个实体对象,由此我们可以看出表单视图其实是在编辑实体对象。现在我们可以把上图的表单设计出一个领域模型:

    class Project {
        #id: string
        #title: string
        #startDate: Date
        #endDate: Date
        #goal: string
        #standard: string
        #clients: string[]
        #invites: string[]
        #weight: number
        #scope: number
    }

    就目前来看这个 Project 模型不具备任何操作方法,对于这种无操作方法的模型如果直接称之为贫血模型是不严谨的。

    补充:

    我一直认为在谈论贫血模型时,应该谈论的是由于失血症状而导致的贫血。失血症状简单表达为:本来属于一个人身上的血液流失掉了,是从身上流失掉的。而不是看到一盆猪血时,感觉自己的血流失掉了,然后非要把这盆猪血灌到自己身上去。

    在很长一段时间里大家对贫血模型的认识还不够严谨,通常来说大家认为只有属性并且很少或没有业务逻辑的模型是贫血模型是不严谨的。识别贫血模型有一个重要的指标是:模型自身需要处理的业务逻辑是否外漏

    如果模型本身没有需要处理的业务逻辑,只包含属性那么他不应该称为贫血模型。

    如果模型自身需要处理业务逻辑但是没有处理,而是由调用者来处理本属于模型本身的业务逻辑时就应该称之为贫血模型。

    数据校验

    考虑一个问题,领域对象的数据校验是属于领域对象本身要做的事情吗?

    我在填写人口普查表时,负责普查的工作人员告诉我需要填写的内容。我填写完成后,仔细地检查了一遍,发现没有问题提交给工作人员。工作人员仔细得检查了一下告诉我有几个字段没有填写,然后我又立即把这几个字段填写完成。最后她又检查了一下发现没有问题并提交给了她。

    在处理表单数据校验时,通常使用的是外部校验方式,比如:在 Java 开发中提供的 validation-api 框架,以及在大多数的前端 UI 组件库中提供的 Form 组件也是外部包装校验,而不是在数据本身上提供校验。

    操作方法

    就目前来看 Project 模型中不需要操作方法,而且校验也不由 Project 本身来完成,那它会包含操作方法吗?

    如果此时 Project 对象已经能够满足业务需求,确实不需要任何操作方法了。但是随着对领域的深入了解,模型也是会有变化的。比如我们要为 Project 对象添加一个创建时间字段如下:

    class Project {
        // ...
        #createdTime: Date
    }

    这个时候涉及到 createdTime 字段的赋值问题,可能稍有不慎整个模型就变成了贫血模型。

    法医在判断一个人的真实年龄时,可以通过活体的肩、肘、腕、髋、膝、踝六大关节 X 线片上所示的骨骼发育情况,准确地推断个体年龄,将骨龄与实际年龄的误差控制在 ±1 岁范围。

    这段话对于认识 createdTime 字段的赋值有着非常重要的帮助。

    思考一个问题,在现实中人的骨龄是外部设置的,还是人在初始化时内部设置的?

    外部设置:

    class Person {
        #createdTime: Date
    
        public get createdTime() {
            return this.#createdTime
        }
    
        public set createdTime(createdTime: Date) {
            this.#createdTime = createdTime
        }
    }

    内部设置:

    class Person {
        #createdTime: Date
    
        public constructor() {
            this.#createdTime = new Date()
        }
    
        public get createdTime() {
            return this.#createdTime
        }
    }

    你有没有见过一个人出生以后,可以随便地更换一套全身的新骨头?所以 createdTime 是在第一次初始化时被赋值的,并且是内部赋值。

    对于需要持久化的实体对象来说,ORM 框架需要对象提供无参构造器,因为 ORM 框架每次都需要通过无参构造器实例化对象。那么像 this.#createdTime = new Date()constructor 方法内的操作会重复赋值。一般会将实体对象生命周期中第一次需要做的事情放在一个自定义的有业务意义的方法里。如下:

    class Person {
        #createdTime: Date
    
        public get createdTime() {
            return this.#createdTime
        }
    
        public create() {
            if (this.#createdTime !== undefined) {
                throw new Error("Initialized")
            }
            this.#createdTime = new Date()
        }
    }

    回归到完整的 Project 对象模型:

    class Project {
        #id: string
        #title: string
        #startDate: Date
        #endDate: Date
        #goal: string
        #standard: string
        #clients: string[]
        #invites: string[]
        #weight: number
        #scope: number
        #createdTime: Date
        // getters & setters ...
        public create() {
            // ...
            this.#createdTime = new Date()
        }
    }

    信息实体对象是一种常见的业务,比如:文章、用户信息、店铺信息、客户信息、账户信息、各种表格等信息对象的 CRUD 。

    对于一直在试图追求凡事都需要设计成富有行为的充血模型,模型本身没有的行为也要给他设计出来一个行为的小伙伴是非常痛苦的。

    不要认为领域模型凡事都需要动作方法来操作,比如:

    class Project {
        #title: string
        #goal: string
        // ...
        public update(request : ProjectRequest) {
            this.#title = request.title
            this.#goal = request.goal
            // ...
        }
    }

    对象被设计成由属性和方法构成,那么你考虑模型时也要考虑属性和方法联合使用。在认识属性时有一个误区,那就是 field 和 property 的区别,这个问题留在后面单独去讨论。

    总结

    在很多时候,认为领域模型或者对象模型应该是通过行为操作方法进行更新数据,属性只是提供操作。然而对于侧重于信息的实体对象来说更多的还是 CURD 的操作。

    又通过补充说明贫血模型做了更详细的解释,希望能够感受到从自身失血的情景,从而认识到实体对象对自身业务封装的必要性。

    随后又通过一个填写普查表的故事来说明表单数据的校验是否属于实体自身的功能。最后又为 Project 实体模型设计了第一次初始化时的 create 方法。

    补充: 主动与被动对面向对象建模设计有一定的影响,需要去思考这个问题。

    展开全文
  • 表单是前端开发中最棘手的部分之一,您可能会在其中发现很多混乱的代码。Vue.js 2之类的基于组件...为什么表单代码经常很烂像Vue这样的基于组件的框架的关键设计模式是组件组合。该模式告诉我们将应用程序的特性抽象...
  • 一共两个htm页面和两个js... formCreate.htm: 修改表单 表单设计器——新建表单 添加元素   删除元素   回收元素   重 置   生成xml   重 建 表单模板名 :    var srcXmlStrin
  • 利用js生成设计表单表单为Bootstrap风格
  • js 表单布局设计器

    2011-08-06 11:23:39
    表单布局设计器 ! #formLable { float: left; width: 100px; min-height: 12em; margin-top:10px;margin-left:20px;} * html #formLable { height: 12em; } /* IE6 ...
  • js开发的表单设计器

    热门讨论 2010-01-28 17:11:27
    全部是用js实现 表单的动态定义 生成xml文件
  • 在设计表单设计器的时候,如果针对开发者(而非业务人员时),经常需要手动写JS或者CSS调整样式,那么 平台如何去覆盖这一层需求呢? 问题分析 可不可以 针对每一个组件,都设置一个 动态JS属性和CSS属性变量,...
  • 可视化布局web 控件拖拽、表单自定义、自定义控件自己开发,本来想在这个基础上改版成Bootstrap 添加布局组件,思路有了技术不到家,分享给大家
  • 需要进行二次开发配合项目的需求,基本四路和实现方法有一定的借鉴作用,需要有一定的JS开发基础需要进行二次开发配合项目的需求,基本四路和实现方法有一定的借鉴作用,需要有一定的JS开发基础
  • 提起表单设计器,网上会有很多,不过能让设计器可视化写脚本的还真是凤毛麟角 直接给大家上地址:http://lowcode.magicalcoder.com/magicaldrag/index-page.html 下面介绍一下这款布局器的特点 先来看一下整体预览...
  • vue-form-making 基于vue.js简单高效的表单设计器组件,star高达3.3K+。简单拖拽即可进行表单设计,可生成/导出json及代码,支持i18n国际化。功能特性可视化配置页面基于vue2.0桌面端组件库Element-UI提供栅格布局,...
  • 利用element ui 和 vue.js 自己尝试设计的表单设计器 视图列表设计器。仅供大家学习使用。欢迎来讨论! 要源码的可以留言!
  • 自由表单设计器,字段数据输入js验证发布说明   各位ccflow的爱好者:  期待已久的函数验证库功能与大家见面了,经历过多次的修改与设计,最后改成现在的操作与实现模式。目前已经提供部分系统函数验证库,这些...
  • 表单设计器ortum

    2020-11-14 12:05:17
    说明:ortum是一款使用jquery和requireJS模式开发的表单设计器。基本的form组件都有实现,做这个东西原本是项目启发。后来觉得这个可以做成页面设计器,当然这是后话。所以现在一直在往这个方向去走。设计出来的表单...
  • JS表单原生验证

    2015-12-17 10:21:00
    一、前言  最近在开发一个新项目,需要做登陆等一系列的表单提交页面。在经过“缜密”的讨论后,我们决定 不用外部流行的框架,如bootstrap,由于我负责的模块 ...二、设计理念  我们都知道,在抛开外部框架,...
  • formbuild拖拽表单设计器

    千次阅读 2017-04-23 13:38:00
    formbuild拖拽表单设计器 表单设计器适用于OA系统、问卷调查系统、考试系统等系统,具体使用请前至官网API请点击 formbuild拖拽表单设计器 formbuild迭代几个功能 1.升级BootStrap3.0版本、代码DOM结构有所...
  • ruoyi vue表单设计器

    2020-07-11 10:49:29
    ruoyi vue表单设计器 整了半个多月的表单设计器终于出来了! 说一下我的具体需求吧。 因为公司要做很多有关表单的业务,为了减少代码量和增加工作效率。 和工作流进行整合,在工作流中调用表单。 之前做过一个html...
  • 表单设计器

    2012-01-05 11:42:56
    由于工作流的需要,必须要有一个表单设计器,刚开始想自己设计,但工作量太大。 于是决定在编辑器上做扩展,参考了很多编辑器最终选定kindeditor。 可惜由于太久没关注KE了,用的是以前下载的3.5版本 发现4.X改进...
  • 工作流程引擎,表单设计器,表单字段的输入js脚本验证,设计思路,实现原理--------------------------------------------------------------------...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 450
精华内容 180
关键字:

js表单设计器