公司任务:解析一个二次封装dojo组件,进一步解析dijit/form/FilteringSelect的搜索功能。
2016-09-09 10:20
435 查看
GridFilteringSelctl.js组件的搜索原理,具体到挂号界面的实现如下:
在 phis-web\resources\dojo\his\outpatient\register\main.js
有这样一段代码:
下面是这段设置的涉及的官方API的解释:
自定义属性:
所以组件表现的“按空格键触发搜索”实际上,是对_endinput赋值为“ ”实现的。
而在组件代码:
有改写FilteringSelect的一个方法,方法名为:
可以看出该方法触发后,将检查最后一位是否为空格,如果为空格则去掉,并且展开dropDown并且执行_sendRequest进行查询。
下面是_starSearch的官方API解释,可以看出该方法就是官方组件中,将输入文本在Store中进行搜索的支持。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
其实到了这里,我们就可以认为解析完毕了,抱着研究学习的心态,我们去看看dojo关于FilteringSelect的实现:
首先:_startSearch是在dijit/form/_AutoCompleteMixin下定义的,FilteringSelect相关的继承是
_SearchMixin->_AutoCompleteMixin->ComboBoxMixin->FilteringSelect
在_SearchMixin中有一个方法,该方法是输入触发事件的回调函数:
(因FilteringSelect继承了_TextBoxMixin.js,在这个内模块内有对该事件的注册代码,这里不贴出来了。)
红字部分其实执行了:
嗯...所以按键就会触发_starSearch方法。。然后就执行SendRequest,如果去看SendRequest还可以看到查询结果返回成功后,对dropdown的更新。
巴拉巴拉就清晰了。。
在 phis-web\resources\dojo\his\outpatient\register\main.js
有这样一段代码:
var req = {url: "/his/crm/patient/page-list", pageSize: 10, pageNo: 1, orgId:orgId}; var columns = [{label:"姓名", field: "name", width: "80px"}, {label:"性别", field:"sex", width:"40px", labelFunc:genderFormatter}, {label:"出生日期", field:"birthDate", width:"65px", labelFunc:dateFormatter}, {label:"住址", field:"familyAddr", width:"200px"}, {label:"身份证号", field:"idNum", width:"125px"}, {label:"门诊病历号", field:"opCaseNum", width:"80px"}]; patientIdWidget.set("searchAttr", "name"); patientIdWidget.set("labelAttr", "name"); patientIdWidget.set("columns", columns); // patientIdWidget.set("store", patientStore); patientIdWidget.set("allowInput", true); // patientIdWidget.set("queryExpr", "${0}"); patientIdWidget.set("request", req); patientIdWidget.set("endInput", " "); patientIdWidget.set("allowBackspace", true) patientIdWidget.set("promptMessage", "输入姓名或拼音码,按空格进行查询!");
下面是这段设置的涉及的官方API的解释:
自定义属性:
/**考虑到实时载入数据对后台产生压力,用户可以使用该属性来决定:当输入的搜索字符串遇到什么结尾时才会向后台发送请求,该字符只能一位的长度,多余部分会被忽略**/ _endInput: null,
/**向后台请求用的对象,包括url、pageSize、pageNo、search属性**/ _request: null,
所以组件表现的“按空格键触发搜索”实际上,是对_endinput赋值为“ ”实现的。
而在组件代码:
有改写FilteringSelect的一个方法,方法名为:
_startSearch: function(key){} (函数体在:health-dojo-2.1.0\WebContent\resources\dojo-src\fly\form\GridFilteringSelectL.js)
可以看出该方法触发后,将检查最后一位是否为空格,如果为空格则去掉,并且展开dropDown并且执行_sendRequest进行查询。
下面是_starSearch的官方API解释,可以看出该方法就是官方组件中,将输入文本在Store中进行搜索的支持。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
其实到了这里,我们就可以认为解析完毕了,抱着研究学习的心态,我们去看看dojo关于FilteringSelect的实现:
首先:_startSearch是在dijit/form/_AutoCompleteMixin下定义的,FilteringSelect相关的继承是
_SearchMixin->_AutoCompleteMixin->ComboBoxMixin->FilteringSelect
在_SearchMixin中有一个方法,该方法是输入触发事件的回调函数:
(因FilteringSelect继承了_TextBoxMixin.js,在这个内模块内有对该事件的注册代码,这里不贴出来了。)
_processInput: function(/*Event*/ evt){ // summary: // Handles input (keyboard/paste) events if(this.disabled || this.readOnly){ return; } var key = evt.charOrCode; var doSearch = false; this._prev_key_backspace = false; switch(key){ case keys.DELETE: case keys.BACKSPACE: this._prev_key_backspace = true; this._maskValidSubsetError = true; doSearch = true; break; default: // Non char keys (F1-F12 etc..) shouldn't start a search.. // Ascii characters and IME input (Chinese, Japanese etc.) should. //IME input produces keycode == 229. doSearch = typeof key == 'string' || key == 229; } if(doSearch){ // need to wait a tad before start search so that the event // bubbles through DOM and we have value visible if(!this.store){ this.onSearch(); }else{ this.searchTimer = this.defer("_startSearchFromInput", 1); } } },
红字部分其实执行了:
_startSearchFromInput: function(){ this._startSearch(this.focusNode.value); },
嗯...所以按键就会触发_starSearch方法。。然后就执行SendRequest,如果去看SendRequest还可以看到查询结果返回成功后,对dropdown的更新。
巴拉巴拉就清晰了。。
相关文章推荐
- UILable 详解
- Windows中使用TortoiseGit提交项目到GitLab配置
- window 10 专业版 永久激活
- 温故知新----5种数据存储方式之File
- 微信开源PhxSQL:高可用、强一致的MySQL集群
- Activity生命周期
- C#高级编程笔记 Day 1, 2016年8月 30日 名词定义
- Xamarin.Android模拟器提示HAX kernel module is not Installed
- Unity5网络模块UNet介绍
- 各种排序算法的原理、Java实现与比较分析(二)
- jquery获取checkbox属性为undefined解析
- Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
- SQL操作 - 插入时更新数据
- Cornerstone的Merge方法
- Python(x,y)中没有包括的算法包
- 一.设计模式入门--策略模式
- WSARecv MSG_PARTIAL
- Xamarin.Android模拟器提示HAX kernel module is not Installed
- java源码编译成dex文件
- icecap录制gif文件