TreeviewCopyright © aleen42 all right reserved, powered by aleen42
查询区
查询区概述
- 我们在开发过程中,特别是开发单据列表页面,或者参照页面,头部显示的查询条件部分,我们统称为查询区;
- 在日常开发过程中,如果想对查询区的内容加特色化需求,就需要先清楚查询的生命周期函数,以及查询区模型支持的方法和事件;
获取查询区模型
- 1、查询区的模型是目前所有模型里面比较特殊的,比较晦涩难懂一些,通过以下代码学习印象更深刻一些;
- 2、获取到真实模型以后,根绝获取的真实模型的模型类型,来确定模型支持哪些方法和事件,在进行下一步开发;
//查询前
viewModel.on('beforeSearch', function (data) {
//1、获取查询区最外层查询区容器模型(查询区的生命周期函数都是通过此模型触发)
let filterViewModelInfo = viewModel.getCache('FilterViewModel');
//2、通过查询区容器模型,查找需要特色化需求修改的查询条件模型(注意:这里是查询条件模型,还不是此组件的真实模型)
let filterModelInfo = filterViewModelInfo.get('new1');
//3.1、获取真实模型(除区间类型的使用getFromModel)
let realModelInfo = filterModelInfo.getFromModel();
//3.2、获取真实模型 (比较符为between区间的使用getFromModel getToModel分别获取开始和结束模型, 比如日期区间)
let beginModelInfo = filterModelInfo.getFromModel();
let endModelInfo = filterModelInfo.getToModel();
//4、获取到真实模型后,就可以使用模型原型上的方法和事件来进行特色化开发,结合以下图片理解
});
方法
getParams().filterRows
说明:调整查询区展示行数
参数:无
示例
//页面DOM加载完成
viewModel.on('afterMount', function (data) {
let filterViewModelInfo = viewModel.getCache('FilterViewModel');
//通过filterRows字段控制查询区显示行数
filterViewModelInfo.getParams().filterRows = 2;
});
setValue(value)
说明:赋予查询区面板字段初始值
参数:基本类型数据
示例
//页面DOM加载完成
viewModel.on('afterMount', function(){
//获取查询区模型
let filterViewModelInfo = viewModel.getCache('FilterViewModel');
//赋予查询区字段初始值
filterViewModelInfo.get('new1').getFromModel().setValue("123");
});
get('search').fireEvent('click')
说明:函数内通过代码触发搜索操作
参数:固定值
示例
//页面DOM加载完成
viewModel.on('afterMount', function(){
// 获取查询区模型
let filterViewModelInfo = viewModel.getCache('FilterViewModel');
//提前赋予初始值,用来验证是否触发搜索
filterViewModelInfo.get('new1').getFromModel().setValue("123");
//获取搜索模型后,使用fireEvent方法触发搜索模型上的点击事件
filterViewModelInfo.get('search').fireEvent('click');
});
get('reset').fireEvent('click');
说明:函数内通过代码触发重置操作
参数:固定值
示例
//页面DOM加载完成
viewModel.on('afterMount', function(){
// 获取查询区模型
let filterViewModelInfo = viewModel.getCache('FilterViewModel');
//获取搜索模型后,使用fireEvent方法触发重置模型上的点击事件,并自动搜索
filterViewModelInfo.get('reset').fireEvent('click');
//获取搜索模型后,使用fireEvent方法触发重置模型上的点击事件,取消默默查询动作
filterViewModelInfo.get('reset').fireEvent('click',{disabledSearch:true});
});
事件
afterInit
说明:我们一般在afterInit里处理一些查询条件的挂载事件或者其他事件,afterInit的执行时机在查询脚本加载之后且组件渲染以后,第一次搜索之前
//页面DOM加载完成
viewModel.on('afterMount', function (data) {
let filterViewModelInfo = viewModel.getCache('FilterViewModel');
//查询区afterInit事件,必须放在页面模型的afterMount事件中才生效
filterViewModelInfo.on('afterInit', function(data){
let filterModelInfo = filterViewModelInfo.get('new1');
let realModelInfo = filterModelInfo.getFromModel();
realModelInfo.setValue('123');//默认值赋值
})
});
afterResetClick
说明:点击重置按钮之后会将当前方案重置为默认状态,并执行一次搜索,在本次搜索之前会触发一次
//查询前
viewModel.on('beforeSearch', function (data) {
let filterViewModelInfo = viewModel.getCache('FilterViewModel');
//查询区afterResetClick事件,放在页面模型的afterMount和beforeSearch事件中可以生效
filterViewModelInfo.on('afterResetClick', function(data){
let filterModelInfo = filterViewModelInfo.get('new1');
let realModelInfo = filterModelInfo.getFromModel();
realModelInfo.setValue('123');
//在这个钩子里返回false的话可以阻止后续的搜索动作(默认为true)
return false;
})
});