最近学了dorado的下拉框,简单记录下步骤,方便后面回顾,后台代码比较简单就不贴上来了
静态下拉框
在view下添加
ListDropDown,设置好id和items(下拉框中显示的内容) 然后回到autoform的下拉框那项设置其tigger属性
动态下拉框 (以employee中的dept为例子)
1、先设置格式 添加dept的dataType 设置
defaultDisplayProperty(理解为要显示的数据时哪个)和name属性,并在employee中添加一propertyDef关联dept
2、接着添加容器 添加dept的dataSet 设置其dataProvider (后台记得提供相应的服务)和dataType
3、添加dataSetDropDown控件并设置其dataSet属性
4、在autoform里面的下拉框那项设置其tigger ,name,property
5、接着在autoform下面添加一element,设置其tigger,name,editable属性
6、提供后台服务
带过滤动态下拉框(还是同样的例子,这里添加部门名称查询的功能)
在动态下拉框基础之上做修改
1、首先修改数据来源,把dataSet的dataProvider属性修改为对应的服务名称(这里的以
getDeptByDeptNamewe为参考)
2、接着修改dataSetDropDown控件,使其支持过滤
dynaFilter
:true 开启动态过滤功能
filterOnTyping true :true 在过户输入过程中就过滤
autoOpen: true 获取焦点的时候是否自动打开下拉框
3、准备后台服务
婚否类型的下拉框
dorado对0和1 还有Y和N这种二进制格式的数据,做了mapping的处理机制 这里以结婚否来做例子
1、在
SlEmployee这个DataType下新增一个PropertyDef,设置属性name 、label、mapping->mapValues
其中这个mapping->mapValues 代表的是映射数据来源
一般设置方法有三种
通过View配置mapping
利用JS初始化mapping
通过后台方法进行配置 (这里采用就是这种 用了el表达式 ${dorado.getDataProvider("marriedDropDownInterceptor#getMarriedState").getResult()}
)
2、修改autoformEmployee的married字段的editorType属性为TextEditor 表示表单项编辑类型
3、准备后台服务
树形部门下拉框
1、修改SlDept这个dataType,为了提高性能采用延迟加载 添加reference 并设置属性
name:slDeptSet dataProvider:deptService#getDeptByParendId dataType:[SELF] paramter:$${this.deptId}
2、修改
datasetDept这个
DataSet
dataProvider deptService#getTopDept
3、添加CustomDropDown这个容器 修改id 为
customDropDownCommonDept 然后就是宽度和高度
接着在这个容器下面添加dataTree控件 设置id和dataset属性
在节点BindingConfigs下添加一个BindingConfig子节点 设置4个属性
labelProperty:deptName 把实体对象的label作为树节点的标题信息
name:dept 名称
childrenProperty:slDeptSet 获取当前节点的slDeptSet属性,作为子节点的数据
recursive:true 是否支持递归处理
接下来为递归树绑定事件,要实现以下效果:
点击树节点时候,部门对象传递了输入框中并关闭下拉框
为datatreeDept绑定onDataRowClick事件,在onDataRowClick事件
var dropDown = dorado.widget.DropDown.findDropDown(self);
var node = self.get("currentNode");
dropDown.close(node.get("data"));
4、修改autoformEmployee的
slDept字段
trigger customDropDownCommonDept 关联的编辑框触发器