1. 功能介绍

    ComboBox做为普通下拉列表的扩展方式,实现下拉列表中可以显示多列数据,即可下拉表格数据,同时完全兼容现有的PropertySelection组件,提供更好的可扩展需求。

  2. 主要特性

    实现单选按钮,但前提是这些值都是预先知道的,当在前台展现时,需要控制是哪一个选项选中了。

  3. 参数说明

    参数名 参数类型 是否必须 默认值 描述
    value java.lang.String   表单值
    model org.apache.tapestry.form.IpropertySelectionModel或com.linkage.appframework.data.IDataset     下拉表格的数据
    valueField java.lang.String     数据字段名,当model为Idataset类型时该参数必须
    textField java.lang.String     文本字段名,若未指定,该参数和valueField相同
    showHeads java.lang.String     下拉表格的表头
    showFields java.lang.String     下拉表格显示的数据列的字段名,各字段名用(,)隔开
    hideFields java.lang.String     列表项中要隐藏的字段,在js中可访问,各字段名用(,)隔开
    disabled boolean   false 是否禁用
    hidden boolean   boolean 是否隐藏
    full boolean   true 为false时,强制不显示表头
    className java.lang.String     CSS样式
    fieldName java.lang.String     自定义控件名,若设置了该参数,jwcid=name@..的名称不生效,适合在foreach自定义名称或重名组件使用
    skin java.lang.String     风格定义,默认通过统一配置风格
    dropWidth int     下拉表格宽度,单位为像素
    dropHeight java.lang.String     下拉表格高度,单位为像素
    dropUp boolean     是否向上弹出选择框
    enterAction java.lang.String     组件输入框回车键事件,用于通过回车时自定义脚本
  4. JavaScript用法

    分类 名称 数据类型 描述
    属性 text String 获取控件显示的文本
    属性 options Array 获取包含列表项的数组,该数组的第1项包含空值。列表选项对应于下拉表格中的行
    属性 selectedIndex Number 设置或获取选中项位于options数组中的位置,从1开始。若没有选中项,取值为0。当disabled=true时,不能设置
    属性 selectedOption Object 获取当前选中的选项
    属性 disabled Boolean 设置或获取控件是否可用的状态
    属性 hidden Boolean 设置或获取控件是否可见的状态。当disabled=true时,不能设置
    方法 selectOption Function 设置选中项,参数为选项在options数组中的位置
    方法 setValue Function 设置选中项,参数为选项的value值
    方法 disable Function 禁用或启用控件。可以传一个Boolean类型的参数
    方法 enable Function 启用控件
    方法 hide Function 隐藏或显示控件。可以传一个Boolean类型的参数
    方法 show Function 显示控件
    事件 onSetValue Event 当选中项发生改变时触发。该事件由用户动作引发,通过脚本改变选项不会发生
  5. 注意事项

    1. 当model为IDataset类型时,必须指定valueField参数;valueField,textField,showFields,hideFields各参数指定的字段名应为IDataset中的字段名称;若未指定showHeads,则下拉表格不显示表头,若指定了showHeads,则必须和showFields一一对应。
    2. 当model为IPropertySelectionModel类型时,valueField,textField,showFields,hideFields各参数指定的字段名可以是DATA_ID(参数值),DATA_NAME(参数名);也可以不指定,则valueField默认取参数值,textField默认取参数名,showFields默认包含这两项;若未指定showHeads,则DATA_ID(参数值)对应的表头为"编码",DATA_NAME(参数名)对应的表头为"名称";无论是否指定showHeads,都将显示表头,除非指定参数full="false"。
    3. options数组中的各个选项(不包括第一项),除具有标准select控件中选项的value和text属性外,还具有以在valueField,textField,showFields,hideFields参数中指定的各字段名为名称的属性
  6. 代码片段

    1. HTML写法一

       <select
      	jwcid="CONTACT_MODE@wade:ComboBox"
      	value="ognl:info.CONTACT_MODE"
      	model="ognl:@com.linkage.component.util.Utility@getStaticSelection(page, 'JOB_CONTACTMODE')"
      />
      
    2. HTML写法二

      <select
      	jwcid="RES_ID@wade:ComboBox"
      	value="ognl:info.RES_ID"
      	model="ognl:resDataset"
      	valueField="RES_ID"
      	textField="RES_NAME"
      	showHeads="物品编码,物品名称,可用数量,所属员工"
      	showFields="RES_ID,RES_NAME,RES_REMAINCNT,STAFF_ID"
      	hideFields="RES_PRICE"
      	className="e_input"
      	nullable="no"
      	onSetValue="changeRes()"
      />
      
    3. JavaScript写法

      var resId = getElement(“RES_ID”);			//取得上述用法二中定义的控件
      if (resId.disabled) resId.disabled = false;	//启用控件
      if (resId.hidden) resId.show();				//显示控件
      var options = resId.options;				//取得下拉列表选项
      var o = options[resId.selectedIndex];		//取得当前选中项。
      var o2 = resId.selectedOption;				//取得当前选中项。
      var count = o.RES_REMAINCNT;				//取得物品可用数量
      var price = options[options.length-1].RES_PRICE; //取得列表中最后一个物品的单价
      if(!resId.disabled) {
      	resId.selectedIndex = 4;				//设置选中项为第4项,当disabled=false时有效
      }
      resId.selectOption(0);						//清空控件取值(第一项包含空值) 
      resId.setValue("10031");					//设置选中项为物品编码为10031的选项
      
  7. 效果演示