起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 51697|回复: 46

下拉框组件(gridSelect、treeSelect、simpleSelect)

  [复制链接]

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
发表于 2012-11-5 15:29:53 | 显示全部楼层 |阅读模式
1、下拉组件的共同点

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

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



91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
35878
发表于 2013-7-2 17:20:57 | 显示全部楼层
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返回的列顺序
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴

11

主题

58

帖子

202

积分

中级会员

Rank: 3Rank: 3

积分
202
发表于 2013-7-9 18:00:10 | 显示全部楼层
zhaixin 发表于 2012-11-5 15:39
1、表中只存ID,通过在queryAction中使用关联查询,查询出名称并显示(推荐)

(1)修改概念的标准动作que ...

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

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-12-10 16:43:23 | 显示全部楼层

单选时 获得下拉data中选中行的ID

gridSelect组件、treeSelect组件

    在onCloseUp事件中获取event.rowId

simpleSelect组件

    在onCloseUp事件中获取event.source.rowId
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-12-10 15:56:47 | 显示全部楼层

级联下拉

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

实现后面下拉框内容改变的关键就是在后面下拉框的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属性指向的关系
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-12-7 15:31:48 | 显示全部楼层

模糊查询

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

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

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

设置方法如下
4.png
在gridSelect组件的columns属性中,设置列的label为#text_filter,即可在列头位置显示输入框,如下图所示
1.png
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-11-5 15:39:19 | 显示全部楼层

不冗余存储——表中只存ID,不存名称

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属性选择下拉数据中的名称关系
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-11-5 15:42:11 | 显示全部楼层

冗余存储——表中即存ID,又存名称

(1)gridSelect组件的ref属性指向queryAction返回的ID关系
(2)gridSelect组件的label-ref属性指向queryAction返回的名称关系
(3)gridSelect组件的column-ref的value属性选择下拉中的rowID
(4)gridSelect组件的column-ref的label属性选择下拉数据中的名称关系
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

229

主题

788

帖子

890

积分

高级会员

Rank: 4

积分
890
QQ
发表于 2012-12-8 17:57:34 | 显示全部楼层
学习啦,顶一个,好帖。

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-12-10 16:29:29 | 显示全部楼层

使用同一个data作为下拉数据

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

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

simpleSelect组件不需要设置
一个gridSelect组件和simpleSelect组件共用data,也不需要设置independence属性
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-12-10 16:47:19 | 显示全部楼层

改变下拉数据选中行的颜色

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文件中的下拉组件显示的样式
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2012-12-11 11:09:55 | 显示全部楼层

设置第一次下拉时的宽度

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

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

1.png
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 08:43 , Processed in 0.063639 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表