下拉框组件（gridSelect、treeSelect、simpleSelect）

zhaixin

1、下拉组件的共同点

可以支持单选、多选
下拉选择后可以填充一列或多列数据

2、下拉组件的不同点

组件	gridSelect	treeSelect	simpleSelect
下拉数据的形式	列表	树形	列表
下拉数据展示的列数	任意	任意	一列
下拉数据能否模糊查询	能	能	不能
关联的data组件的store-type属性	grid	grid	simple
下拉选择后可以填充几列数据	最多3列	最多3列	最多2列
是否能放入grid组件	能	能	不能

jishuang

gridSelect下拉时显示“全部”或者空行

需要在data上添加一条数据
在gridSelect组件的itemset下的data-ref关联的data组件的onAfterRefresh事件调用data的insert方法实现，如下代码添加全部

1. var array = ["全部","全部"];
   
2. justep.xbl('dataDEMO_Custemor').insert('all', 0, array);
   

复制代码

insert(string rowID, integer index, array values)
前端新增一行数据
Parameters:
{string} rowID
[required]行的id
{integer} index
新增的位置
{array} values
行数据数组，依赖getColumns返回的列顺序

stephenewong

zhaixin 发表于 2012-11-5 15:39
1、表中只存ID，通过在queryAction中使用关联查询，查询出名称并显示（推荐）

（1）修改概念的标准动作que ...

容易搞混的内容
建议加上: grid里column里ref 设置为"关联查询的名称",表里保存的ID实为gridselect 里的ref指定

zhaixin

gridSelect组件、treeSelect组件

    在onCloseUp事件中获取event.rowId

simpleSelect组件

    在onCloseUp事件中获取event.source.rowId

zhaixin

点击前一个下拉框，后面下拉框的内容发生改变，这就是级联下拉。

实现后面下拉框内容改变的关键就是在后面下拉框的onDropDown事件中，刷新下拉框组件关联的data组件。代码如下

1. mainActivity.treeSelect2Dropdown = function(event){
   
2.     //获得已选择的申请部门ID
   
3.     var deptId = justep.xbl("dataMaster").getValue("fApplyDeptID");
   
4.     //设置申请人组件中的data组件的过滤条件，并刷新data
   
5.     var personData = justep.xbl("bizData2");
   
6.     personData.setFilter("_filter_dept_","SA_OPOrg.sParent = '" + deptId + "'");
   
7.     personData.refreshData();        
   
8. };

复制代码

获得前一个下拉框选择的值，作为后面下拉框过滤数据的条件。
提示：取值应该使用下拉框ref属性中指向的data组件的getValue方法，而不是从下拉框组件中取

如果重新选择了前一个下拉框的值，应该写代码清空后面下拉框中已选择的值。
提示：代码应该写在下拉框ref属性中指向的data组件的onValueChanged事件中，清空的写法采用data组件的serValue方法。
例如：

1. mainActivity.dataMasterValueChanged = function(event){
   
2.     //清空选择人员下拉框已选择的值
   
3.     justep.xbl("dataMaster").setValue("fApplyPersonName","");
   
4. };

复制代码

说明：dataMaster是这两个下拉框ref属性指向的data组件的ID
          fApplyDeptID是前一个下拉框ref属性指向的关系
          bizData2是后面下拉框组件itemset中data-ref属性的值
          fApplyPersonName是后面下拉框label-ref属性指向的关系

zhaixin

gridSelect组件支持模糊查询，效果如下图所示

1、支持输入拼音首字母查询，但需要从第一个字的拼音首字母开始输入
输入 g 过滤出公告、公示

2、支持模糊查询
输入 知 过滤出通知

设置方法如下

在gridSelect组件的columns属性中，设置列的label为#text_filter，即可在列头位置显示输入框，如下图所示

zhaixin

1、表中只存ID，通过在queryAction中使用关联查询，查询出名称并显示（推荐）

（1）修改概念的标准动作queryAction，使用关联查询，实现不仅返回ID也返回名称
（2）gridSelect组件的ref属性指向queryAction返回的ID关系
（3）gridSelect组件的label-ref属性指向queryAction返回的名称关系
（4）gridSelect组件的column-ref的value属性选择下拉中的rowID
（5）gridSelect组件的column-ref的label属性选择下拉数据中的名称关系

2、不填label-ref，使用gridSelect自动在下拉数据中的查找能力显示名称（不推荐）

（1）gridSelect组件的ref属性指向queryAction返回的ID关系
（2）gridSelect组件关联的data组件的auto-load属性必须设置为true
（3）gridSelect组件的column-ref的value属性选择下拉中的rowID
（4）gridSelect组件的column-ref的label属性选择下拉数据中的名称关系

zhaixin

（1）gridSelect组件的ref属性指向queryAction返回的ID关系
（2）gridSelect组件的label-ref属性指向queryAction返回的名称关系
（3）gridSelect组件的column-ref的value属性选择下拉中的rowID
（4）gridSelect组件的column-ref的label属性选择下拉数据中的名称关系

763558331wdp

学习啦，顶一个，好帖。

zhaixin

多个gridSelect组件或者treeSelect组件使用同一个data，需要设置independence属性。

设置方法是，设置其中一个gridSelect组件或者treeSelect组件的independence属性为false，其它gridSelect组件或者treeSelect组件的independence属性都设置为true

simpleSelect组件不需要设置
一个gridSelect组件和simpleSelect组件共用data，也不需要设置independence属性

zhaixin

gridSelect组件、treeSelect组件

1. div.ext-select-option table.obj tr.rowselected td.cellselected, div.ext-select-option table.obj tr.rowselected td{
   
2.         background-color: blue;
   
3. }

复制代码

simpleSelect组件

1. .dhx_selected_option{
   
2.         background-color: blue;
   
3. }

复制代码

将上面的css代码放入/UI/system/config/user.css文件中，会改变系统中所有的下拉组件显示的样式
将上面的css代码放入其它css文件，会改变引用了该css文件的w文件中的下拉组件显示的样式

zhaixin

把gridSelect组件或者treeSelect组件放到grid组件中，需要设置一下gridSelect组件或者treeSelect组件下拉数据的列宽，这样才能显示得美观

设置方式见下图，设置的各显示的列的总列宽等于grid组件的该列列宽即可