Skip to end of metadata
Go to start of metadata

下拉框中的下拉数据的来源可以有多方面的,下面我们为你介绍的是DataSetDropDown控件,DataSetDropDown控件可以将视图中的一个DataSet中包含的数据作为下拉框中数据的来源。

创建视图

在sample.chapter09下新建视图DataSetDropDown,由于DataSetDropDown控件支持DataSet绑定,需要为视图添加一个DataSet对象作为数据的来源,本例中我们直接将sample.chapter05中SimpleCRUD视图中的dsProducts复制过来,并在视图中添加一个TextEditor控件和一个DataSetDropDown控件。

设定控件的相关属性

设定DataSetDropDown的属性:

属性

 说明

id

dropdown1

控件dropdown的ID

dataSet

dsProduct

设定下拉框的数据来源

设定TextEditor的属性:

属性

 说明

trigger

dropdown1

利用trigger机制,关联dropdown1控件

浏览测试

保存后可以查看页面。

http://localhost:8080/quick-start/sample.chapter09.DataSetDropDown.d

displayProperty和property

在页面中的下拉框已经显示,但是其中的显示数据是Entity对象,下面我们改进显示效果,设定DataSetDropDown的属性:

属性

 说明

displayProperty

productName

用于显示

property

productName

实际回写的值

保存当前的视图,并重新测试效果:

对于一个实体对象,我们可以通过displayProperty与property属性控制下拉框展示的数据内容以及最终下拉选择后实际赋值的处理逻辑。

assignmentMap

在一些场景下,可能会有多个回填的值,如选择一个产品,希望能同时回填产品名称,产品价格,库存数量等多个属性,则可以通过DropDown的assignmentMap属性设定,如:

productName,unitPrice,unitsInStock

多个属性之间以逗号分割。

另外当两个不同的数据实体间进行赋值时,有可能属性名称不完全一样,则可以做map映射:

proName=productName,uPrice=unitPrice,uStock=unitsInStock

等号后面的值代表下拉项中的属性名,等号前面的值代表被赋值属性名。

宽度调整

本例中由于产品名称稍长,我们修改DataSetDropDown的width属性:

属性

width

300

保存视图,并重新刷新页面测试下拉框,可以发现下拉框的宽度已经改变。

数据过滤

对于DataSetDropDown,在某些场景下由于下拉的数据量较大,如果让用户通过下拉滚动栏定位到自己需要的下拉选项可能比较费劲。因此提供一个数据过滤查询功能就特别重要。

数据trigger过滤

为了支持数据过滤,首先我们调整dsProducts的dataProvider方法为我们在sample.chapter05中SimpleCRUD.java里面定义的query1方法,便于做查询处理:

然后我们打开DataSetDropDown的过滤功能(设置dynaFilter属性为true):

保存视图,并在浏览器中刷新页面:

http://localhost:8080/quick-start/sample.chapter09.DataSetDropDown.d

打开下拉框后,在上面的页面中我们看到出现了两个新的trigger图标。这两个trigger图标分别代表过滤查询和刷新的功能.

这个时候我们将SimpleCRUD.java中的query1方法中增加一个断点:

然后尝试着在编辑框中输入T,并单击第一个trigger按钮,这个时候会自动激活debug调试界面:

在调试界面中我们看到查询的trigger按钮将编辑框中的"T"上传到query1方法中,query1执行结束后,在浏览器中我们就能看到所有产品名称中含T的产品的一个列表:

如果我们再单击第二个刷新的trigger图标按钮,则下拉框的数据就会恢复原样。

dynaFilter属性是用于打开下拉框的过滤功能的,但是仅仅将这个属性设置为true只能保证可以在打开下拉框的时候可以看到两个trigger快捷按钮,并单击按钮的时候能将编辑框中的值发送到DataProvider对应的java方法中,而下拉款最终是否能将过滤后的数据展示出来,还要由DataProvider对应的Java方法是否对这个查询参数做了处理有关系。因此要实现动态过滤的关键点有两个:dynaFilter和DataProvider

数据实时过滤

上面的例子中,数据过滤是发生在打开下拉框后,输入数据,并单击过滤按钮时才触发的,如果我们希望实时触发,则可以设置DataSetDropDown的autoOpen属性为true,且filterOnTyping的属性为true:

设置autoOpen属性为true是为了光标激活所绑定的TextEditor控件的时候就自动打开下拉框:

filterOnTyping属性是为了,当我们在编辑框中输入值的时候自动的根据输入的内容做过滤,如我们输入T:

下拉框就自动的将数据过滤出来。

Labels
  • No labels