表单设计器系列之初窥

总体来说,市面上的表单设计器还是有很多,先进点的比如 ace那套,陈旧点的如封装一个编辑的。就在我做表单设计器的时候公司又新来一个娃儿,弄了套bootstarp做的模板,也有表单设计。而且一天不停的把  托拉拽放在嘴边。那么托拉拽真的好么?

断断续续,差不多写了一个半月应该完成了80%+的工作,代码量在1W行左右。

firstBlood,让我们先来看看我做的表单设计器的样子吧:

是的,我是往excel那个方向做的,正如我之前做的流程设计器一样模仿viso做的,这样的好处有一下几点:

  1. 用户比较习惯这个界面(至少excel用过吧,有一定的亲切感 乐于接受);
  2. 表格直接初始化好了,不需要用户再去定义当前表格多少行多少列,易于操作,而且那么大个表格应该能满足常规需求了。
  3. 所见即所得,每个操作都可以实时直观的感受看到。
  4. 整个界面比较干净,看起来舒服

secondBlood,表单元素跑起来。

页面打开,表格直接被绘制好,用户只需在添加表单元素就行了。操作很简单,只需要在任意表格上右键即可打开  可添加列表,点击对应元素即可添加,如图:

系统自定义了 如图所示的表单元素对象 点击即可添加,同时我们还看到 包括 时间,附件上传,弹出选择这些常用插件我们已经集成到上面了,非常方便哟。

让我们来看看一个表单实例:

姓名,性别,身高,生日这些文字类的 就直接是一个 纯文本, 而对应的输入内容就有 文本输入框 textarea ,附件这些。分分钟就创建好了!

thirdBoold, have a view!

通过 导航栏中的 预览按钮 我们就可以看到最终效果了:

是的,就是这样。我们还可以根据自己系统的表单设计风格来改造一样样式。

fourthBlood,配置

当然通常情况下我们是需要做一下配置的!这个时候我们需要观察一下下:

这个时候我们点击紫色放开区域 就可以选中  生日这个表单元素,如果是 点击 红色以内紫色以外的区域就可以重新选中这个表格进行更新操作,比如替换到当前表格里面的元素。

当我们点击紫色区域,右侧会弹出一个配置窗口,如图:

纯文本类型的对象就可以做属性面板内的配置,当然每种类型的表单对象其配置的内容也是不一样的。

接着我们来说说替换操作:点击 表格区域, 程序会在当前表格上生成一个半透明的遮罩层,如图:

右键点击该遮罩层区域,一样会弹出 选择表单 元素的面板,重新选择表单类型,该表格原因的表单对象将被替换,如图:

我们就将性别的输入类型由 下拉选择替换为了单选。

总结一下: 按理来说,类似于这种单页面富应用开发 不需要写操作手册之类的,做的好的话 用户拿着就直接用了。

最后, 还是感谢大家的阅读,后续我会把开发表单设计器需要注意的东西继续写出来,包括代码的组织和书写,敬请关注!

如果你有什么好的建议或者心得可以在站内留意或者 QQ(775486560)交流

时间: 2024-10-14 05:29:02

表单设计器系列之初窥的相关文章

表单设计器系列之代码的组织

当初之所以转前端,就是因为写JS代码不用去部署环境,方便,自由.然而,正是因为自由,才让我们在组织代码时十分头疼.在这里,我要感谢 Kener-林峰 @Kener-林峰 的 #echarts#,正是多次拜读了 echarts的源码,才让我知道如何去组织代码,谢谢! firstBlood,模块化开发 模块化开发的好处在这里就不再赘述了,当然现在各种模块加载框架也很多,比如我之前在系统中用的 seajs.在表单设计器里面我还是沿用了 echarts里面的 esl.js.文档结构如下图: 对应的esl

表单设计器系列之模板行的设置

嗯,下午我正在做一个BT版本,准备放出来让大家玩玩.做的时候 还是发现有些地方不太严谨,需要做一下设置. firstBlood,添加顺序 一般来说,我们添加一个表单是先添加中文描述,再添加输入.在我的表单设计器里面,每当添加一个 输入类型对象后 程序会自动去匹配其中文描述,匹配优先级如下: 优先匹配 当前输入对象所在td 紧挨着的左侧td,如果该左侧td是一个纯文本对象,那么就匹配它. 如果左侧td是一个输入类型对象,那么就会匹配 当前输入对象所在td垂直方向  上方的td 如果 1 和  2都

表单设计器系列之一些细节操作

下午好像么有什么事情,接着写,这篇文章跟大家讲讲表单设计器里面一些细节的操作和值得注意的地方, firstBlood,表格的宽.高调整. 默认情况下,我们会给表格的每个td设置一个默认的宽度和高度,如图所示: 我们可以看到 A B C D每列的宽度和高度都是一样的,那么同城情况下 我们期望 输入的地方变宽点.同样,操作很简单,比如我们想要B和D列变宽点,只需拖动B和D右边的调整按钮 向右边拖动即可,操作细节如下: 鼠标hover按钮 ---> 按下鼠标左键 ---> 向右平移 --->

表单设计器系列之消失的javascript

在做表单设计器之初,我也考虑过表单会涉及到的和JS交互,我们留了一个textarea,准备让开发人员把 js代码写在那里.然后人算不如天算,当那天需求说 他们不写代码的时候,一切都变了. firstBlood,radio 不同值 切换 不同的显示 我相信,这个是表单中最常见的一种动态效果,不多说直接上图,不然你们又要来 n p s j b了. 选中我们将要操作的 raido,鼠标点击后 配置面板自动出来: 点击 红色方框 标示的那个 链条按钮,会弹出下面这样一个界面: 在这个配置面板中, rai

基于Extjs的web表单设计器 第五节——数据库设计

这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于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表单设计器 第二节——表单控件设计

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

基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

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

.net web 开发平台- 表单设计器 一(web版)

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