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

下午好像么有什么事情,接着写,这篇文章跟大家讲讲表单设计器里面一些细节的操作和值得注意的地方,

firstBlood,表格的宽、高调整。

默认情况下,我们会给表格的每个td设置一个默认的宽度和高度,如图所示:

我们可以看到 A B C D每列的宽度和高度都是一样的,那么同城情况下 我们期望 输入的地方变宽点。同样,操作很简单,比如我们想要B和D列变宽点,只需拖动B和D右边的调整按钮 向右边拖动即可,操作细节如下:

鼠标hover按钮 ---> 按下鼠标左键 ---> 向右平移 --->  鼠标左键 Up

这个调整和 excel里面的调整一样,相信大家都会玩。效果如图所示:

同理,我们可以纵向调整每列的高度。



secondBlood,特殊的checkbox ,raido

说到特殊,其实还应该包含select, 因为它和heckbox ,raido都需要指定 可选项。在该表单设计器中,最开始我这边是提供2种 可选项 设置的。最后和老大协商确定了通过指定数据字典来确定可选项。

真正的特殊来自于 当我们给checkbox和radio指定完可选项后,很有可能可选项会有很多内容,这样我们的td就会被撑破! 如果我们不及时调整的话 图1 中 红色方框标示的拖动按钮就会和受影响的表格的所在的横向和纵向的线不在同一条线上, 也就意味着 如果这个时候用户再去调整表格的宽度和高度的话就会有问题。因此在设置可选项的时候一定要执行一个表格宽度和高度调整的程序来矫正, 这个程序块也会在多个地方被执行,因此相当重要。 来看看一个例子:

我们通过配置面板来指定数据字典,程序会根据数据字典取回可选项并添加相应的内容到对应的radio上。仔细观察右边,可以看到序号  1  所在的表格已经字典变高了。

再来个蛋疼的事情,这个时候我们横向拖动D列,让其变的更宽

必须的是, 这个是一个联动动作! 举一反三,凡事要将表格撑开的操作都必须通过这个调整函数来执行一次。



thirdBlood,来点愉快的操作

我们来看看excel中,合并,拆分表格的一些操作:

  1. 合并,拆分操作和excel里面类似。

    mousedonw任意一个td,不触发mouseup ---> 上下左右任意移动,程序会自动计算选中范围----> mouseup  这个操作有个特殊的地方就是 合并范围夸 一个或者多个已经做了合并操作的td,有点绕是不?如下所示:

    我们在 1 所在的td 按下鼠标 并开始移动 当我们从1 进入2的左上角时 正确的结果是这样的:

    一旦鼠标从1 进入到2的任意范围我们这个遮罩层的范围应该是 从1 的左上角 到 2的右下角,进入3 也是一样的。 反正,退出这个范围也是一样的。

    PS : 虽然这个操作在实际的设计时 肯定 真的是  然并卵, 但是我觉得既然有这个选择操作 那就应该把它做出来,做到极致。

  2. 添加提示

    我们可以在 可添加列表上看到:

    这个上面的添加和设置操作,是根据当前用户的选择做一次过滤的,这样可以避免用户的不当操作。



?forthBlood,子表的插入?

很多时候,我们需要在一个大的表单中插入一个子表单,做特殊的数据展示。同样的,插入子表单也是非常简单的:

遮罩层是我们要添加表格的地方,先点击 合并单元格 合并,合并后再右键添加 子表,系统会弹出提示要用户设置行和列,这里我们设置一个2行4 列,结果如下:

如图所示,我们需要注意一下几点:

  1. 左侧 2 所在的td的高度已经被调整拉高
  2. 任何一个新加进来的子表都会有一个表头,在表头上面我们又熟悉的看到了调整按钮。是的, 很多时候我们需要调整子表中某一列的宽度,操作不变。但是,和在外层表格做调整的区别是,子表中列的宽度增加或者减少是建立在减少或者增加相邻列的宽度来实现的, 也就意味着该操作不会增加该子表所在的td的宽度。

同样的,欢迎大家来交流或者沟通, QQ : 775486560 注明来自OSC 或者站内留言

时间: 2024-12-13 10:39:07

表单设计器系列之一些细节操作的相关文章

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

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

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

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

表单设计器系列之初窥

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

表单设计器系列之消失的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要简单非常多.在做