一、文档说明该文档会通过几个例子讲解组件的基本使用，如怎么取值，赋值，改变组件的使用状态等；用视图编辑页面作为例子：二、页面全局对象的获取1.方法一jsBinder2.方法二shr.getCurrentViewPage();获取到的数据结构格式如下：页面全局对象可以在当前页面的作用域内随处使用，可以获取到跟当前页面相关的基础信息，如uipk，tittle等；当在一些回调函数，如按钮点击触发事件的回调函数中的this已经不是我们想要的当前页面的全局对象，这个时候用我们页面全局对象就非常有用；三、页面组件的基本使用方法1.输入框名称是一个输入框组件，对应的组件源码为textFiled.js1、获取组件：如果不知道对应组件的属性可以借助浏览器选择器定位到元素找到元素的属性$("#name")2、组件获取值3、组件设置值$("#name").shrTextField('setValue','这是一个文本框设置值得例子');4、组件变为不可用状态，禁灰：$("#name").shrTextField('disable');5、组件变为可用状态：$("#name").shrTextField('enable');2.下拉框视图类型是一个下拉组件，对应的组件源码为select.js1、获取组件的操作：利用浏览器选择器选中元素，找到其id或者class等，能定位到该组件的属性所以该组件为：$('#type');2、组件获取值$('#type').shrSelect('getValue');3、组件设置值将视图分类变为普通：$('#type').shrSelect('setValue','core');注意setValue的是下拉对象的value值，不是text值，如这里为core而不是普通；4、组件变为不可用状态，禁灰：$('#type').shrSelect('disable');5、组件变为可用状态：$('#type').shrSelect('enable');3.F7视图分类是一个F7类型，对应的源码文件为promptBox.js1、组件获取$('#tree');2、组件设置值$('#tree').shrPromptBox('getValue');3、组件赋值F7组件的值是一个对象，所以赋值的时候要准备一个对象varvalue={id:"ty2wSZ2CSm2X9gdYbQOy3ndTPHE=",name:"员工管理"};$('#tree').shrPromptBox('setValue',value);4、组件变为不可用状态，禁灰$('#tree').shrPromptBox('disable');5、组件变为可用状态$('#tree').shrPromptBox('enable');4.复选框是否标准视图是复选框，源码文件为checkbox.js1、组件获取$('#inner')2、组件获取值$('#inner').shrCheckbox('getValue');3、组件设置值$('#inner').shrCheckbox('setValue',false);4、组件变为不可用状态，禁灰：$('#inner').shrCheckbox('disable');5、组件变为可用状态：$('#inner').shrCheckbox('enable');下面通过请假单和出差单页面讲解按钮和日期组件的使用：5.按钮保存是一个按钮，对应的组件源码为shrButton.js:1、组件获取$('#save')2、按钮对应点击事件根据按钮的name值来确定按钮的点击事件回调函数，这里name为save，所以对应的点击回调事件为saveAction2、组件获取值$('#save').shrButton('getValue');可以获取按钮上绑定的一些数据3、组件从dom元素移除掉$('#save').shrButton('destroy');6.日期组件（年、月、年月日）请假开始时间是一个时间，对应的组件源码为datePicker.js:（显示年月日）1、组件获取$('#entries_beginTime-time')2、组件获取值$('#entries_beginTime-time').shrDatePicker('getValue');3、组件设置值$('#entries_beginTime-time').shrDatePicker('setValue','2019-06-26');4、组件变为不可用状态，禁灰$('#entries_beginTime-time').shrDatePicker('disable');5、组件变为可用状态：$('#entries_beginTime-time').shrDatePicker('enable');7.时间组件（年、年月、年月日、年月日时分）出差开始时间是一个时间组件（年月日时分），对应的组件源码为dateTimePicker.js:1、组件获取$('#entries_tripStartTime')2、组件获取值$('#entries_tripStartTime').shrDateTimePicker('getValue');3、组件设置值$('#entries_tripStartTime').shrDateTimePicker('setValue','2019-06-2610:53');4、组件变为不可用状态，禁灰$('#entries_tripStartTime').shrDateTimePicker('disable');5、组件变为可用状态：$('#entries_tripStartTime').shrDateTimePicker('enable');四、与服务器交互1.在视图中配置handler的情况下发送请求的方式GET请求：varoptions={action:'getShrWarnTree',uipk:_self.uipk,type:'GET',success:function(response){},complete:function(jqXHR,textStatus){$('.file-loading').remove();}};shr.remoteCall(options);POST请求saveAction:function(){var_self=this;if(!_self.validate()){return;}varlistData=_self.$editGrid.jqGrid('getAllRowData');varpostData={};postData.configModel=listData;varoptions={action:'saveWarnConfig',uipk:_self.uipk,type:'POST',param:{"listData":shr.toJSON(postData)},success:function(response){shr.showInfo({message:"保存成功！",hideAfter:3});},};shr.remoteCall(options);},2.视图中没有配置handler的情况下GET请求：varoptions={action:'getConfigFileAndDataSource',handler:com.kingdee.shr.base.syssetting.web.handler.ConfigFileManagerHandler',type:'get',success:function(response){_self.renderPageByData(response);}};shr.callHandler(options);POST请求：//将数据组装成对象发送到服务器端保存，post请求sendDataToServer:function(){var_self=this;varconfigFile=_self.assembleConfigFile();varoptions={action:'saveConfigFile',handler:com.kingdee.shr.base.syssetting.web.handler.ConfigFileManagerHandler',type:'POST',param:{data:shr.toJSON(configFile),},success:function(response){}};shr.callHandler(options);},五、表单操作1.获取表单中属性的值用行政组织编辑来列举表单中的值怎么获取，如想获取行政组织名称和业务模块的值：通过shr.js中的getFieldValue来获取表单中各个字段的值（注意字段要处于编辑状态）shr.getFieldValue('name');shr.getFieldValue('orgProperty');六、表格的操作通过行政组织维护列表来列举一系列的表格操作视图配置如下：页面效果如下：用浏览器定位工具插到表格的id为grid，所以获取表格的代码为：$('#grid')1.获取行对表格行操作的源码文件是：grid.wafrow.js通过getRowRealData获取行的数据：需要传入rowid的值，通过以下方式查找你要修改那条数据的rowid:$('#grid').jqGrid('getRowRealData','00000000-0000-0000-0000-000000000000CCE7AED4');2.选中行想选中某行，传入那行的rowid:方法：$('#grid').jqGrid('setSelection','00000000-0000-0000-0000-000000000000CCE7AED4');3.删除行删除某行，传入那行的rowid（注意只是前端删除，数据库并没有删除）方法：$('#grid').jqGrid('delRowData','00000000-0000-0000-0000-000000000000CCE7AED4');4.获取表格中当前页所有数据方法：$('#grid').jqGrid('getAllRowData');七、调试技巧调试技巧，从列表界面和表单编辑界面进行分析调试。先从列表界面进行调试。列表界面按照组成界面的组成不同区域进行，比如面包屑、按钮、组织导航树、快速过滤，列表等等进行。如图：1.面包屑调试第一步就是对css，js文件进行解压，在地址栏加上&debug=true。如果对面包屑对应的JS不熟悉，如何快速对面包屑功能所对应的JS进行快速定位。这里分两种方法进行定位，这里以行政组织维护列表为例：第一种方法：在面包屑上鼠标右键->检查，找到行政组织维护对应的DOM节点（本文档调试都以谷歌浏览器作为工具），如图：在DOM结构中可以看到，id为breadcrumb的ul节点，见词知义，显然是跟面包屑有关，拿到breadcrumb在sources进行全局搜索，找到包含breadcrumb的所有文件。如图：通过文件名可知，大概知道面包屑对应的JS文件为shrBreadcrumb。第二种方法：找到请求返回的html界面，在该界面中直接搜索行政组织维护，找对应的JS插件调用。如图：取出上图中目标代码块：$(function(){if(shr.isWorkareaFrame()||shr.isWizardFrame()){$($('#breadcrumb').parent()[0]).attr('class','');//默认样式为6列布局，去除这个布局，为12列布局varbreadcrumb=$('#breadcrumb').shrBreadcrumb();varurl=window.location.href;varuipk=shr.getUrlRequestParam('uipk',url);breadcrumb.shrBreadcrumb('addItem',{name:'行政组织维护',url:url,uipk:uipk});}});如上述代码块可知，包括面包屑插件的初始化和'addItem'方法调用以及调用的插件时插件名称（shrBreadcrumb），知道调用插件时名称，定位相对应的JS文件。定位JS文件调试步骤如下：1.1谷歌浏览器调试，断点在addItem方法处，如图：Stepintothefunction跳入该方法，比如call和apply等方法，如图：代码如下：this.each(function(){varmethodValue,instance=$.data(this,fullName);if(!instance){return$.error("cannotcallmethodson"+name+"priortoinitialization;"+"attemptedtocallmethod'"+options+"'");}if(!$.isFunction(instance[options])||options.charAt(0)==="_"){return$.error("nosuchmethod'"+options+"'for"+name+"widgetinstance");}methodValue=instance[options].apply(instance,args);if(methodValue!==instance&&methodValue!==undefined){returnValue=methodValue&&methodValue.jquery?returnValue.pushStack(methodValue.get()):methodValue;returnfalse;}});断点在红色代码处，继续跳入该方法，如图：代码如下：returnfunction(){var__super=this._super,__superApply=this._superApply,returnValue;this._super=_super;this._superApply=_superApply;returnValue=value.apply(this,arguments);this._super=__super;this._superApply=__superApply;returnreturnValue;};断点在红色代码处，继续跳入该方法，如图：到此，定位到自定义面包屑的插件，其他的插件的调试方法与此类似，均能用这个方法定位到具体执行代码的位置。2.按钮这里要介绍的按钮是调用自定义插件的按钮，触发点击事件时，执行的代码的基本调试。基本上述截图区域的按钮全部可以一下方法进行调试。如何判断一个按钮是调用s-HR自定义插件的按钮，还是普通的button按钮。在谷歌下，鼠标右键，检查，确定按钮在Elements中的位置。如图：由此可见，创建按钮调用了自定义插件shrButton.js。调试自定插件按钮，点击时触发了什么逻辑，直接断点shrButton.js的点击触发。如图：查看代码片段：setTimeout(function(){varaction;if(o.subAction){shr.proxyCall.call(this,o.actionBinding,jsBinder,event,o.subAction);action=o.subAction;}else{shr.proxyCall.call(this,o.actionBinding,jsBinder,event);action=o.actionBinding;}if(jsBinder.gridOptions&&jsBinder.gridOptions.gridId){$('#'+jsBinder.gridOptions.gridId).jqGrid('setGridParam',{actionName:action});}//shr.trackEvent(document.title,action);},100);查看代码执行，如图：继续调试代码跳转，如图：由上图可知，触发创建按钮，执行逻辑代码的JS文件和文件中的方法。调用自定义插件按钮，点击事件触发执行的代码，用上述调试方法都能准确定位。3.组织导航树组织导航树在交互上由两部分组成，导航树设置和树的展示两个方面。这部分包含的JS文件分别为gridNavigation.js和orgNavigation.js。涉及到这两个部分的问题，直接调试这两个文件即可。首先从gridNavigation.js进行调试说明。3.1主要方法介绍3.1.1插件创建，如图：自定义插件创建时，必须执行的方法就是上图中红色方框内的方法，插件由此开始创建，所有的逻辑方法在此展开。（适用全部自定义插件，前提是熟悉该插件对应的功能）3.1.2组织导航树根节点加载上述为组织导航树根节点节点的加载逻辑，根节点相关问题都可以调试该方法。在此方法中定位问题。3.1.2组织导航树子节点加载组织导航树插件创建，根节点和子节点设计到此部分问题，调试这些主要方法大概能定位到问题。3.1.3组织导航树辅助插件orgNavigation.js，涉及到是否包含下级、是否显示已封存、是否显示提示等等，如图：3.1.4涉及到这部分代码，主要是点击确定时所触发的事件。组织导航树查询数据有误时，应该考虑调试该部分代码。如图：4.快速过滤快速过滤(shrFastFilter.js)需要与快速搜索区分开，属于两个不同的功能。这里调试技巧针对的是快速过滤，后面会针对快速搜索进行说明。快速过滤功能简介，视图配置支持，过滤项的类型支持配置，比如：日期类型、时间类型、复选框类型、单选框类型、F7、高级过滤等等。另外涉及到对快滤过滤辅助的js文件，shrFastFilterService.js文件。4.1根据视图配置widget类型，对问题进行定位。由上图可知，创建过滤项时按widget分为特殊类型和普通类型。特殊类型，如图：普通类型，如图：4.1.1widget为date类型。如图：按照单个日期或者时间范围进行分开，如图：4.1.2widget为percent类型。如图：4.1.3widget为F7类型。如图：涉及到快速过滤中F7值的问题时，以此为起点进行调试，涉及单独的F7插件的内容，需要对插件进行调试，前面以有插件的单独介绍。4.1.4widget为select类型。如图：4.1.5widget为高级过滤类型。如图：点击添加时，初始化高级过滤插件：4.2高级过滤高级过滤作为快速过滤的一个过滤项，在这里进行介绍。高级过滤对应的js文件为shrSetSeniorFilter.js。涉及到与高级过滤有关的问题，统一对这个文件进行调试。4.2.1高级过滤创建，初始化部分，如图：_buildDOM方法初始化插件，界面的创建，数据的初始化和事件的监听等。调试时，抓住插件初始化时的主要入口，一步一步的跟代码，定位相应的功能。4.2.2事件监听，如图：包含所有的交互，事件触发。八、一般问题解决方案1.选择器包含‘.’用Jquery选择元素时，元素选择器的值中包含‘.’时jquery会选择不到元素，比如某个元素的id为’test.test1’，通过$(‘#test.test1’)是选择不到该元素的，解决办法如下：varrightId=‘test.test1’.replace(/\./g,'\\.');$(‘#’+rightId);通过以上方法可以获取元素2.没有加上下文，元素取不到开发过程中会出现通过jquery去找一个元素的时候，dom元素中明明有这个元素，但是返回的却为空：例子如下：这里的解决方案是，通过上下文查找，先找到该组件所在的iframe，在通过iframe查找该组件：$('#resume-001').contents().find('#number');弹框，多层弹框等都是这个原理，先定位到要找到元素的父元素，再根据父元素去找到目标元素；3.iframe多层嵌套选择目标窗口的方法top:最顶层窗口window.parent:当前窗口的父窗口4.全局静态变量、实例变量如果这两个概念弄混，你会发现当一个页面中同时初始化了几个相同的组件时，如果是每个实例需要独自拥有的属性声明成了全局静态变量，会造成组件间互相改属性值得情况，隐藏的高危代码bug就会存在系统中；keydownkeypresskeyup的区别触发顺序：keydownkeypresskeyup1.IE10中用keyup拦截不到enter键触发的事件；2.keyup中无法禁止默认事件，因为默认事件在keypress中已经执行完5.keydown、keypress、keyup区别触发顺序是：keydown>keypress>keyup1.IE10中用keyup拦截不到enter键触发的事件；2.keyup中无法禁止默认事件，因为默认事件在keypress中已经执行完；6.不要轻易用js设置样式和操作dom节点CSS的重新设置会造成dom节点重绘；js操作dom节点，如新增节点，删除节点等，会不断的造成dom节点回流和重绘；重绘和回流的开销都会很大，糟糕的情况页面非常卡顿甚至卡死；7.学会利用缓存当一个方法中需要对一个dom节点超过两次使用时，建议用个变量缓存起来：8.不要做空循环当对一个比较大的数组做循环的时候，如果满足条件了需要循环了，马上退出循环，不要去做大量次数的空循环，空循环浪费了太多的时间：9.样式优先级开发过程中会发现自己明明设置了样式，但是效果不是自己想要的效果，这个时候先看看是不是自己设置的样式被其它优先级高的样式覆盖了：！important强制应用样式>内联样式（style中设置的）>id选择器>类选择器样式>元素选择器样式建议不要轻易使用!important样式10.事件阻止默认行为和阻止冒泡默认行为：如点击form的submit按钮时，会触发表单交等；冒泡行为：子元素和父元素都监听了一个事件，事件会先在子元素上触发，然后在父元素上触发，会发现开发过程中遇到的一个事件触发多次；实现方式：
