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

在做表单设计器之初,我也考虑过表单会涉及到的和JS交互,我们留了一个textarea,准备让开发人员把 js代码写在那里。然后人算不如天算,当那天需求说 他们不写代码的时候,一切都变了。

firstBlood,radio 不同值 切换 不同的显示

我相信,这个是表单中最常见的一种动态效果,不多说直接上图,不然你们又要来 n p s j b了。

  1. 选中我们将要操作的 raido,鼠标点击后 配置面板自动出来:

  1. 点击 红色方框 标示的那个 链条按钮,会弹出下面这样一个界面:

    在这个配置面板中, raido里面的每个可选项 都会有2个列表:显示与隐藏。 这是因为 当我们选择了radio里面的人一个值的时候 可能同时进行 显示/隐藏操作!

  2. 这里举个例子: 当我们选择了 ‘无变化’时 想去隐藏一些东西, 操作如下:

    点击  无变化 下面的 隐藏 的 ‘点击添加’ 界面将会变成如下:

    我们可以通过上图看到 在中文描述的左上角会出现 选择的小圆圈。在本次案例中, 我们要隐藏 变化原因,变化时照片, 变化情况 这3个可输入项,只需 点击其对应的左上角小圆圈即可,选择后效果如下:

    点击 确定按钮,选择完毕。界面会回到最开始 的设置值关联界面,同时,刚刚的选择结果也会被列出来:

    需要注意的是,在 隐藏的 右边 会出现一个 复制  按钮,这样做是为了 快速选择这3个也选择项。比如 当我们要选择 ‘围垦河道’ 这个选项的时候 要显示 变化原因, 变化时照片, 变化情况。 我们只需点击这个复制按钮, 其他 可选项的  显示/隐藏的右边会出现 粘贴 按钮,如图所示:

    这个时候 我们点击 ‘围垦河道’ 下面 显示的右边的 粘贴按钮,效果如下:

    (sorry,这个地方 X 按钮忘记加了, 后面补上)

    在这样一个操作中,用户就不需要再次去选择了,是不是很方便呀!

  3. 点击下面的 ‘完成配置’ 整个过程就OK了。
  4. 嗯,是不是觉得 只是配置了,么有看到效果呢,

    该万能的预览 按钮出场了! 么有错, 点击预览,效果如下:

    这是正常情况下,么有做任何 选择操作的界面。这个时候,我们选择  无变化, 效果如下:

    我们可以看到 那 三行已经被隐藏了! bingo...  我们再来选择 ‘围垦河道’:

    bingo, 这就出来啦!

    帅气的同学已经想到了, 我们只需要把相同的代码封装到实际的代码中, 开发人员都不用写代码啦。。。

?secondBlood, 插件关联?

帅气的同学又已经想到了,类似的  选部门, 选人插件之间的关联也可以这样来实现,因为这里面的数据涉及到了公司的一些信息,我就不显示出来了,当然 这个功能也已经显示咯。

同样的, 欢迎大家的吐槽, 可以站内留言,或者 QQ交流 775486560

时间: 2024-11-06 13:01:20

表单设计器系列之消失的javascript的相关文章

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

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

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

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

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

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

表单设计器系列之初窥

总体来说,市面上的表单设计器还是有很多,先进点的比如 ace那套,陈旧点的如封装一个编辑的.就在我做表单设计器的时候公司又新来一个娃儿,弄了套bootstarp做的模板,也有表单设计.而且一天不停的把  托拉拽放在嘴边.那么托拉拽真的好么? 断断续续,差不多写了一个半月应该完成了80%+的工作,代码量在1W行左右. firstBlood,让我们先来看看我做的表单设计器的样子吧: 是的,我是往excel那个方向做的,正如我之前做的流程设计器一样模仿viso做的,这样的好处有一下几点: 用户比较习惯

基于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要简单非常多.在做