Skip to end of metadata
Go to start of metadata

预览

基本使用

ListBox中的元素通过items属性定义,如:

技巧一:IDE设计items

如果不想通过JS定义,也可以直接在IDE中设计:

选择Edit..按钮打开设计器设置:

技巧二:利用JSON定义items

通过上面的代码我们将一个JSON数组设置到ListBox的items属性中,之后再设置列表中显示内容对应JSON中的那个属性。

技巧三:利用现有的EntityList或JSON数组

当然了,如果数据是来自DataSet,则建议直接使用DataListBox

技巧四:JS动态设置当前行

重要属性说明

selectionMode

ListBox支持多选设定功能,使用时需要将其selectionMode设置为singleRow或multiRows,这样我们就可以通过ListBox的如下方法获取当前选中的行:

需要特别指出的如果selectionMode的值为multiRows的时候还支持 shift 和 ctrl 的快捷键操作,效果:

highlightCurrentRow

一些特殊场景下,ListBox可能不需要有交互功能,仅仅用来展现数据,那么其当前行可能没有任何意义,这种情况下我们可以设置highlightCurrentRow为false。效果:

默认情况下highlightCurrentRow为true。效果:

highlightHoverRow

highlightHoverRow是用于控制当鼠标暂停在ListBox中的某一数据行上的时候是否高亮显示,如下图左侧就是highlightHoverRow为true的效果,右侧是highlightHoverRow为false的效果

allowNoCurrent

highlightCurrentRow为true情况下,如果我们选择其中一行数据就会有高亮的背景显示,如图:

并且这个时候ListBox会将这一行作为自身的currentItem属性,你可以直接通过如下的JS代码获取:

currentItem用于界面操作的一个辅助属性,因而是一个只读属性,你无法通过JS代码动态设置currentItem的值。如果你希望清空currentItem的值,只要将ListBox的allowNoCurrent设置为true,之后只要在ListBox的空白区域单击即可取消currentItem的设置:

快捷键说明

快捷键功能说明
home当前光标定位到第一行
end当前光标定位到最后一行
up向上移动一行
down向下移动一行
Labels
  • No labels