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

嗯,下午我正在做一个BT版本,准备放出来让大家玩玩。做的时候 还是发现有些地方不太严谨,需要做一下设置。

firstBlood,添加顺序

一般来说,我们添加一个表单是先添加中文描述,再添加输入。在我的表单设计器里面,每当添加一个 输入类型对象后 程序会自动去匹配其中文描述,匹配优先级如下:

  1. 优先匹配 当前输入对象所在td 紧挨着的左侧td,如果该左侧td是一个纯文本对象,那么就匹配它。
  2. 如果左侧td是一个输入类型对象,那么就会匹配 当前输入对象所在td垂直方向  上方的td
  3. 如果 1 和  2都么有匹配到就不匹配了,当然用户也可以手动指定。

因此,按照  先添加 文本描述, 后添加输入类型 的 顺序 是很重要滴!



secondBlood,模板实例

比如,我们需要录入一个学生的信息:

理所当然的,这是一个多行数据,选中 第二行里面的 4个输入对象所在的td(选择操作和excel一样):

然后点击  设置为模板  , 系统就会在该行下面 插入一个新行,并添加 添加/删除 按钮, 如图:

这样,一个模板行就设置好了。 可以在预览中 点击 按钮进行 添加/删除操作。



thirdBlood,模板应用高级篇

常规需求中,模板的应用到这就结束了,但是, 但是, 但是, 需求又来了:根据一个输入项,能够默认初始化多行模板。举个例子,我这个表单一打开,我就把 当前班级的所有学生列出来,让用户自己填 性别,身高这些其他项。

bingo,来吧,点击  设置模板,配置面板 飕飕的就出来了:

这里可见两个配置项:

  1. 模板初始化, 默认是不选中的。
  2. 按钮行的显示与隐藏,默认选中

根据刚刚的需求,选中  模板初始化:

额外的多出来两个选项, 初始化项 和URL,  初始化项的可选值内容来自于当前模板所有的文本描述,URL是用来设置默认值的取数url的,这里我们用一个 默认数据来做测试, 点击  go, 多行数据就生成了:

在这种情况下,我们基本上就不需要那个 添加/删除按钮 咯,  直接取消 配置面板的 那个 勾勾 让他消失吧:

那么问题又来了,如果我要替换输入对象呢? 没错! 帅的人已经想到了  替换应该是同列模板一起跟新: go-->

点击 单选框,效果如下:

再次 每次,帅的人已经想到了 应该来配置一下 可选项,这里直接点击配置面板的 加号,看效果:

是不是觉的太太长了, 调整一下:拖动C这一列的调整按钮,拖宽一点点:

wonderful  !

基本上,模板的操作就OK拉。

欢迎 站内留言,或者QQ交流 775486560

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

表单设计器系列之模板行的设置的相关文章

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

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

表单设计器系列之初窥

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

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

下午好像么有什么事情,接着写,这篇文章跟大家讲讲表单设计器里面一些细节的操作和值得注意的地方, 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表单设计器 第六节——界面框架设计

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计 基于Extjs的web表单设计器 第八节——表单引擎设计 这一节我给大家介绍一下表单设

基于Extjs的web表单设计器 第一节

前面一节介绍了表单设计器的背景和最终的大概样式,本节主要介绍表单设计器的需求及功能设计. 在讲需求之前先明确几个常用的概念: 主表或者卡片表——具有多行多列的一个区域的控件块,如下图所示. 明细表——就是常用的表格类型的控件块,表头信息就确立了该列的数据类型,如下图所示. 卡片式的表:指的是一个表单模板只包括一个主表: 主子表:指的是一个表单模板包含一个主表.一个明细表: 多子表:指的是一个表单模板包含一个主表.多个明细表: 嵌套多子表:指的是一个表单模板嵌套了多个主子表或者多个多子表: 表单设

基于Extjs的web表单设计器 第二节——表单控件设计

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