文档章节

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

--0_0--
 --0_0--
发布于 2015/07/29 15:59
字数 1302
阅读 274
收藏 7

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

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 或者站内留言

© 著作权归作者所有

--0_0--
粉丝 63
博文 11
码字总数 12440
作品 0
成都
前端工程师
私信 提问
加载中

评论(2)

--0_0--
--0_0-- 博主

引用来自“寻梦2012”的评论

有没有源码!应该把源码开源出来。

@寻梦2012 源码暂时不开源
寻梦2012
寻梦2012
有没有源码!应该把源码开源出来。
开源驰骋/CCFlow

CCFlow基本信息.### 产品名称:驰骋.net工作流引擎. 简称 CCFlow 版本: ccflow6 英文名称: ChiCheng Workflow Engine 官方网站: http://ccflow.org 开发历史: 2003-2016年. 性质: 100%开源,无...

开源驰骋
2016/05/21
0
0
工作流系统之二十八 工作流系统实例演练

工作流系统实例演练 有了工作流引擎,工作流设计器,工作流管理平台,自定义表单,然后业务流程确定之后,就可以快速的做好能运行的流程了。 首先业务要确定,包括业务细节部分。以一个 问题...

长平狐
2012/10/11
76
0
[Share]7月9号的精选好文链接

原文地址:http://www.joycode.com/scottgu/archive/2010/07/26/116035.joy [原文发表地址]:July 9th Links: ASP.NET, ASP.NET MVC, jQuery, Silverlight, WPF, VS 2010 [原文发表时间]:2......

吞吞吐吐的
2017/01/04
0
0
喵大斯/StarSparkSkin

【推荐】浙江西湖区高级人才交流,诸多猎头和企业人事汇聚,望都能找到满意的工作,招到满意的人才。 西湖区IT人才交流 QQ群:521852238 StarSparkSkin v1.5 1、设计实现 DatePicker 代替原生...

喵大斯
2015/07/23
0
0
DevExpress v15.1:ASP.NET WebForms功能增强(一)

<下载最新版DevExpress ASP.NET Controls v15.1.5> ASP.NET Rich Text Editor Word® Inspired富文本编辑器 DevExpress ASP.NET Rich Text Editor预览版去年首次发布,此次版本更新正式发布了......

Miss_Hello_World
2015/08/11
100
0

没有更多内容

加载失败,请刷新页面

加载更多

射频特征阻抗

Characteris Impendance(特性阻抗,也称为‘特征阻抗’)是我们经常看到并使用自己的术语之一,但非常模糊且难以解释。以下是来自几个不同来源的Characteris Impendance(特性阻抗)的一些定义。...

demyar
16分钟前
1
0
Spring Boot Tomcat配置项

参数配置容器 server.xx开头的是所有servlet容器通用的配置,server.tomcat.xx开头的是tomcat特有的参数,其它类似。 所有参数绑定配置类:org.springframework.boot.autoconfigure.web.Serv...

xiaomin0322
20分钟前
2
0
微课程 | 第二课《Docker 安装方式介绍》

微课程 | 第二课《Docker 安装方式介绍》视频 https://v.youku.com/v_show/id_XNDQ0NDUzNjkxNg==.html?spm=a2hzp.8244740.0.0 上一期我们介绍了 DBLE 的基本概况,下面进入我们的正题,正题基...

爱可生
20分钟前
2
0
GUAVA--基础工具(Preconditions)

1、前置条件 俗话说丑话讲在前面,在做某些事情的时候是需要做一些前置条件的。假如需要修改一条数据的话,当参数传进来,我们要先查询这条数据是否存在。这时候就需要一个if了,如果参数还需...

MrYuZixian
34分钟前
6
0
PythonSpot 中文系列教程 · 翻译完成

原文:PythonSpot Python Tutorials 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 在线阅读 ApacheCN 学习资源 目录 PythonSpot 中文系列教...

ApacheCN_飞龙
42分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部