Skip to end of metadata
Go to start of metadata

简介

DropDown是继承Trigger的一个控件对象,因此其具有Trigger的各种特性,详情请参考:Trigger(DCUG)

在定义Trigger的时候我们经常需要定义其icon,而DropDown提供了默认的icon实现,即如图:

这样看起来它就是一个下拉框元素。

使用简介

ListDropDown提供items属性定义下拉框的数据:

之后我们只要与支持trigger属性的控件的关联即可:

浏览器中就能看到这个控件包含下列框,打开后就能看到items中配置的下拉数据:

详细属性说明

items

items属性定义的方式有多种:

方式一:利用逗号分割符定义

前面范例中的items用了一个带逗号的字符串定义,其中逗号默认为分割符号。ListDropDown根据这个字符串自动生成下拉数据。

或者JS赋值:

方式二:利用IDE的向导工具定义

当然我们也可以利用IDE提供的向导定义对象类型的下拉数据:

单击上图中的Edit按钮打开向导窗口:

在向导窗口中添加一个含Entity的集合对象Collection,其中的Entity可以根据需要定义不同的属性。

这样就也可以定义下拉框,执行效果如:

当然上面的显示效果并不好,我们可以通过ListDropDown的displayProperty属性设置加以改善,本例我们定义了Entity中的两个属性:code和label,则我们将displayProperty设置为label:

则最终显示的效果如:

方式三:利用JSON定义

除了上述方式定义下拉框数据之外我们还可以通过JSON定义:

方式四:通过DataProvider提供数据

利用EL表达式:${dorado.getDataProvider("").getResult()}直接读取DataProvider的数据作为下拉数据,如下范例:

其中getDataProvider的参数即对于Dorado中的DataProvider方法:

范例1:返回String组成的Collection集合

范例2:返回Map集合

范例3:返回POJO组成的Collection集合

需要注意的是ListDropDown中的items数据是静态的,一般在初始化后就不再发生变化。因此与filter相关的几个属性默认都是对客户端已有数据的过滤操作,如果想利用ajax技术从服务器端过滤,则应该采用DataSetDropDown。

displayProperty

对于上述items生成的数据,如果是对象类型的数据,则需要通过displayProperty定义下拉数据默认显示对象中那个属性。

如上面方式三:利用JSON定义

如果设置displayProperty为label,则下拉框显示效果为:

如果displayProperty设置为code,则显示效果为:

如上方式四:通过DataProvider提供数据

已知Category.java的结构如:

如果设置displayProperty为categoryName,则下拉框显示效果为:

如果设置displayProperty为id,则下拉框显示效果为:

添加DataColumn功能

通过displayProperty只能显示JSON或Entity对象中的一个属性,如果我们希望以表格的形式展现多个属性的时候,就需要利用ListDropDown的DataColumn子元素。

如下图中在ListDropDown中添加了不同的DataColumn:

DataColumn通过property与对应的下拉框行数据对象的某一个属性绑定:

最终页面的执行效果如下:

有关DataColumn的各种用法请参考:Grid(DCUG)#基本使用中的各种DataColumn的使用说明

 

autoOpen

是否启用自动打开的功能。即当相应的编辑框获得输入焦点时自动打开此下拉框。

否则我们就需要通过鼠标单击打开,或通过F7快捷键才能打开下拉框。

buttonVisible

其在对应编辑框上的触发按钮是否可见。

如果将buttonVisible设置为false,则编辑框中的下拉按钮将不可见,但是我们能通过ListDropDown的autoOpen或F7快捷键打开下拉框,效果如:


dynaFilter

是否启用动态数据过滤的功能。如果设置为true,则打开下拉框的时候可以看到过滤按钮:

如果在编辑框中输入"C",并单击过滤按钮,就会自动过滤数据:

当然这儿的数据过滤只是针对ListDropDown中已有items中的数据做过滤,如果希望在服务器端过滤数据建议使用DataSetDropDown实现。

editable

是否允许用在相应的编辑框中进行文本输入。同:TextEditor(DCUG)

editable为true情况下,下拉框还可以使用,除非我们使编辑框的readOnly为true,才可以屏蔽下拉框的操作。

filterOnOpen

是否要在下拉框打开时自动根据编辑框中的内容执行一次数据过滤。

当然这儿的数据过滤只是针对ListDropDown中已有items中的数据做过滤,如果希望在服务器端过滤数据建议使用DataSetDropDown实现。

filterOnTyping

是否随着用户在编辑框中的输入动作自动的对下拉列表中的数据进行过滤。

如果将ListDropDown中的filterOnTyping设置为true,则下图中的过滤和刷新按钮将不可见:

在下拉框打开的情况下,编辑框中输入内容就会自动过滤:


minWidth和maxWidth

下拉框默认情况下会根据所关联的编辑框的宽度作为自身的宽度,但在有些情况下,这种效果会不太友好,如下的两个效果:

下拉框宽度太小:

下拉框宽度太大(内容很少,宽度很宽):

上面这种情况我们可以通过ListDropDown的minWidth和maxWidth改进:

效果如:编辑框宽度较小时,可以保证DropDown内容的完整性

编辑框宽度较大时,可以保证下拉框中留白区域较少:

minHeight和maxHeight

minHeight与maxHeight的功能与minWidth和maxWidth类似。不再重述。

minFilterInterval

该属性是针对filterOnTyping为true情况下的一个辅助属性,在业务并发量比较大情况下,filterOnTyping是一把双刃剑,方便用户操作的同时也给服务器带来巨大的ajax请求的压力(针对DataSetDropDown而言),该属性给你一个优化性能的机会,通过调整该参数从而找到一个最优解。

useEmptyItem

如果设置该属性为true,则在下拉的时候可以出现一个空的数据行,选择空的数据行会清空当前编辑框中的数据:

当然你也可以通过triggerClear实现类似功能(在trigger属性配置中添加triggerClear):

这样在浏览器对于的编辑框中就能看到一个带"x"的Trigger按钮,单击这个按钮就会将当前编辑框中的数据清空:

property

以图说明:

如果ListDropDown中包含的数据是JSON或Entity类型的数据时,需要指定property属性,从而便于当选择一个Entity对象的时候,ListDropDown知道将Entity对象的那个属性值取出,并赋值到对应的编辑框中。

如上图如果ListDropDown的property设置为id,则下拉选择后的效果就是将Entity中的id赋值给编辑框:

如上图如果ListDropDown的property设置为productName,则下拉选择后的效果就是将Entity中的productName赋值给编辑框:

assignmentMap

以图说明:

对于数据绑定的编辑框而言,它显示的是dataSet和dataPath所指向的一个Entity对象,如上图中最上面那个Entity对象。而下拉框同时也是采用JSON或Entity对象声明的时候,我们可以利用assignmentMap快速的完成两个实体对象间赋值的属性约定,如:

我们将下拉框选中的Entity对象的code和label属性分别赋值给上面编辑框所绑定的Entity对象的id和productName属性。

配置好这个属性后,ListDropDown会自动根据这个属性完成两个Entity对象间的数据复制。

另外当两个Entity对象间如果要复制的属性名称是一样的,则我们可以简写assignmentMap属性,如下图:

assignmentMap只要配置为:

可以省略等于符号的配置。

另外assignmentMap也支持逗号作为分割符,如上面的assignmentMap也可以配置为:

postValueOnSelect

是否在用户选择某个下拉框中的条目之后自动确认相应编辑框中的内容。也就是说在下拉框选择一个值回填到编辑框后是否自动触发编辑框的post()方法。

自动触发编辑框的post()方法能带来很多好处,例如:

  • 自动触发对应Entity对象的数据校验;
  • 如果是与DataSet绑定的,还会让DataSet通知其他与当前property属性一直的数据绑定控件自动刷新自身的展示数据

事件说明

onValueSelect

Labels
  • No labels