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

摘要: 表单设计器中应该值得注意的一些细节，和优化。

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

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中，合并，拆分表格的一些操作：

合并，拆分操作和excel里面类似。
mousedonw任意一个td，不触发mouseup ---> 上下左右任意移动，程序会自动计算选中范围----> mouseup 这个操作有个特殊的地方就是 合并范围夸 一个或者多个已经做了合并操作的td，有点绕是不？如下所示：


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


一旦鼠标从1 进入到2的任意范围我们这个遮罩层的范围应该是 从1 的左上角 到 2的右下角，进入3 也是一样的。 反正，退出这个范围也是一样的。
PS ： 虽然这个操作在实际的设计时 肯定 真的是 然并卵， 但是我觉得既然有这个选择操作 那就应该把它做出来，做到极致。

添加提示
我们可以在 可添加列表上看到：


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

‍forthBlood，子表的插入‍

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


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



如图所示，我们需要注意一下几点：

左侧 2 所在的td的高度已经被调整拉高

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

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