Shr-前端彙總
F7控件監聽css
f7控件的監聽是指，在點擊F7控件時，對控件內的內容進行選中後出發該事件監聽；經過參數value能夠獲取當前F7控件的一些值信息。html
1 //人力編制方案監聽 回寫計劃期間 及分錄數據 2 initalRecruitment :function() { 3 var self = this; 4 if(this.getHistoryOperateState() != "VIEW"){ 5 $("#hrPlaitProject").shrPromptBox("option", { 6 onchange : function (e, value) { 7 if(value.current == null){ 8 return; 9 } 10 var currentId = value.current.id; 11 self.remoteCall({ 12 method : 'getEntry', 13 param : { 14 plaitProjectId : currentId 15 }, 16 success : function(data) { 17 $("#planPeriod").val(data.planPeriod); 18 self.initalEntry(data.entryData); 19 } 20 }); 21 } 22 }); 23 } 24 }
初始化F7控件值web
將初始化方法寫入到initalizeDOM() 初始化頁面方法中。給F7賦值時，須要提供id,name 格式數據。sql
1 /*初始化單位*/ 2 initAdminOrg: function(){ 3 var self = this; 4 self.remoteCall({ 5 method : "getCurrentCompany", 6 success : function(data) { 7 if(data != undefined && data != null) { 8 var adminOrg = {id:data.orgId,name:data.orgName}; 9 $("#unitOrg").shrPromptBox("setValue", adminOrg); 10 } 11 } 12 }); 13 }
初始化F7時，添加過濾後端
組裝好filter後，給F7控件設置過濾條件Filter。此處的list 須要進行處理，由於不符合 ‘1’，‘2’，‘3’ 格式。app
1 /*初始化攜帶證件的 證件類型F7*/ 2 initCredentialType: function(data){ 3 var self = this; 4 if(data != '' && data != null){ 5 var personId = data; 6 self.remoteCall({ 7 method : 'getPersonCredentialTypeId', 8 param : { 9 personId : personId 10 }, 11 success : function(datas) { 12 if(datas != '' && datas != null){ 13 var list = datas.types; 14 var filter = "id in ('" +list + "')"; 15 $("#credential").shrPromptBox("setFilter",filter); 16 } 17 } 18 }); 19 } 20 21 }
此處爲過濾條件的獲取Handler,着重對list進行處理。ide
1 * 2 * <p> 3 * Title: getPersonCredentialTypeIdAction 4 * </p> 5 * <p> 6 * Description: 7 * </p> 8 * 獲取出境員工的 出入境證件信息 證件類型id 9 * 10 * @param request 11 * @param response 12 * @param modelMap 13 * @throws SHRWebException 14 */ 15 public void getPersonCredentialTypeIdAction(HttpServletRequest request, HttpServletResponse response, 16 ModelMap modelMap) throws SHRWebException { 17 String personId = request.getParameter("personId"); 18 StringBuilder sb = new StringBuilder(); 19 if (StringUtils.isEmpty(personId)) { 20 throw new ShrWebBizException("初始化攜帶證件類型失敗！"); 21 } 22 try { 23 // 出入境證件信息 24 String sql = "select cftypesid from CT_E_EntryAndExitCredential where cfpersonid = '" + personId 25 + "'"; 26 IRowSet rowSet = DbUtil.executeQuery(ctx, sql); 27 List<String> list = new ArrayList<String>(); 28 while (rowSet.next()) { 29 String typeId = rowSet.getString("cftypesid"); 30 list.add(typeId); 31 } 32 33 for (int i = 0; i < list.size(); i++) { 34 String str = list.get(i); 35 sb.append(str); 36 if (i < list.size() - 1) { 37 sb.append("','"); 38 } 39 } 40 modelMap.put("types", sb.toString()); 41 42 JSONUtils.writeJson(response, modelMap); 43 } catch (BOSException e) { 44 e.printStackTrace(); 45 throw new ShrWebBizException("初始化證件類型中獲取出入境證件失敗！" + e); 46 } catch (SQLException e) { 47 e.printStackTrace(); 48 logger.error("執行sql失敗！" + e); 49 } 50 }
對分錄進行賦值post
首先是在視圖中定義好分錄及字段。以下：ui
...... //其他部分省略
<editGrid name="entrys" sorterItems="department asc" > <column name="familyMember" required="true" readonly="true" editable="false" width="185"/> <column name="name" required="true" readonly="true" editable="false" width="200"/> <column name="sex" readonly="true" editable="false" width="110"/> <column name="nationality" readonly="true" editable="false" width="110"/> <column name="company" rreadonly="true" editable="false" width="110"/> <column name="telphone" readonly="true" editable="false" width="110"/> </editGrid>
......
分錄賦值：this
//根據人力編制方案 初始化招聘計劃明細waf initalEntry: function(datas){ var rowdatas = datas; for(var i = 0, len = rowdatas.length; i < len; i++){ var info = rowdatas[i]; var datarow = { "adminOrg":info.adminOrg, "postion":info.postion, "plaitNum":info.plaitNum, "missNum":info.missNum }; waf("#entrys").jqGrid('addRow',{data:datarow}); } }
監聽分錄中的F7控件
視圖：
1 <group name="detail" caption="八級工報名明細" > 2 <editGrid name="entrys" sorterItems="department asc" > 3 <column name="person" required="true" label="姓名" uipk="shr.custm.person.F7" width="80"/> 4 <column name="gender" readonly="true" editable="false" width="50" /> 5 <column name="birthDate" readonly="true" editable="false" width="120"/> 6 <column name="education" readonly="true" editable="false" width="120"/> 7 <column name="applyWorkType" width="110" required="true"/> 8 <column name="applyLeavel" width="110" required="true"/> 9 <column name="applyType" width="110" required="true"/> 10 <column name="workYears" required="true"/> 11 <column name="entryDate" readonly="true" editable="false" width="120"/> 12 <column name="mType" readonly="true" editable="false" width="120"/> 13 <column name="remark" readonly="true" editable="false" width="110"/> 14 <column name="turnInto" readonly="true" editable="false" width="80"/> 15 </editGrid> 16 </group>
監聽值改變事件
1 tableCellChange: function(){ 2 var self = this; 3 var grid = waf("#entrys"); 4 grid.wafGrid("option", { 5 afterSaveCell:function (rowid, cellname, value, iRow, iCol) { 6 if(cellname=="person") { // 只監聽person 列的值改變 7 self.assignData(rowid); 8 } 9 } 10 }); 11 12 }
分錄grid當前行賦值
1 assignData: function(rowid){ 2 var self = this; 3 var person = $("#entrys").jqGrid('getCell',rowid,"person"); 4 if(person == null || person == ''){ 5 return; 6 } 7 var personId = person.id; 8 self.remoteCall({ 9 method:'getPersonData', 10 param : { 11 personId : personId 12 }, 13 success:function(data){ 14 if(data != '' && data != null){ 15 var gender = data.gender; 16 var birthday = data.birthday; 17 var degree = data.degree; 18 var entreDate = data.entreDate; 19 var typeName = data.typeName; 20 21 $("#entrys").jqGrid('setCell',rowid,"gender",gender); 22 $("#entrys").jqGrid('setCell',rowid,"birthDate",birthday); 23 $("#entrys").jqGrid('setCell',rowid,"education",degree); 24 $("#entrys").jqGrid('setCell',rowid,"entryDate",entreDate); 25 $("#entrys").jqGrid('setCell',rowid,"mType",typeName); 26 27 } 28 } 29 }); 30 }
單選按鈕
視圖：視圖中只定義一個出境類型的div,而後使用js進行填充單選組內容。
1 <group> 2 <div id="exitType"> 3 <div class="col-lg-4"> 4 <div class="field_label" title="出境類型">出境類型</div> 5 </div> 6 <div class="field-ctrl"> 7 <div class="radiowrap"> 8 <!-- 出境類型 --> 9 </div> 10 </div> 11 </div> 12 </group>
1 //初始化出境類型 2 initRecruitmentTypeContent: function(){ 3 var self = this; 4 if(this.getOperateState() != "VIEW"){ 5 self.remoteCall({ 6 method : "getExitTypeContent", 7 success : function(data){ 8 if(data != undefined) { 9 var recTypeHTML = ""; 10 for(var i=0; i<data.length; i++) { 11 var type = data[i]; 12 recTypeHTML += '<input name="exitType" type="radio" id="exitType'+type.number+'" class="radio" data-pk="'+type.id+'" data-name="'+type.name+'" /> <label for="exitType'+type.number+'" class="radio_label">'+type.name+'</label>'; 13 } 14 $("#exitType").find(".radiowrap").html(recTypeHTML); 15 } 16 } 17 }); 18 } 19 }
向服務端發送請求（經常使用）
method對應的參數名就是handler中的該參數名+Action方法
1 self.remoteCall({ 2 method : 'getEntry', 3 param : { 4 plaitProjectId : currentId 5 }, 6 success : function(data) { 7 $("#planPeriod").val(data.planPeriod); 8 self.initalEntry(data.entryData); 9 } 10 });
控件值改變時間（文本框 日期控件等）
1 $('#endDate').change(function(){ 2 self.countApplyDays(); 3 });
頁面彈框提示
showInfo showWarning等。其中hideAfter指得的控件消失時間（s）。
1 shr.showWarning({ 2 message:"截止日期不能小於起始日期", 3 hideAfter:5 4 });
頁面按鈕
提交生效
提交生效 指得是當前業務單據直接保存並審覈經過。
通常有兩種狀況，在handler中須要進行區分：
1. 當前業務單據完成信息錄入操做後，直接點擊的提交生效按鈕。（即該業務單據還沒有保存，此時傳遞到Handler的model中是不會有單據id的；此時業務單據若是有分錄信息的話，該model中也是能夠獲取的）
2. 當前業務單據完成信息錄入後，點進行了保存操做，然後點擊提交生效。（則在Handler中就不須要對該單據信息進行保存了，只須要更新單據狀態爲審批經過及其餘業務邏輯處理便可；此時保存後的單據，在提交生效Handler中獲取model 時，獲取不到分錄信息的，須要根據單據id查詢分錄信息）
1 /** 2 * 單據提交生效 3 * @param {} event 4 */ 5 submitEffectAction : function (event) { 6 var _self = this; 7 _self.remoteCall({ 8 method:'canSubmitEffect', 9 success:function(data){ 10 if("success" == data.state){ 11 if(_self.getOperateState() == 'VIEW' ){//&& _self.checkBillState() 12 shr.showConfirm('您確認要提交生效嗎？', function() { 13 _self.prepareSubmitEffect(event, 'submitEffect'); 14 }); 15 }else{ 16 if (_self.validate() && _self.verify() ) { //&& _self.checkBillState() 17 shr.showConfirm('您確認要提交生效嗎？', function() { 18 _self.prepareSubmitEffect(event, 'submitEffect'); 19 }); 20 } 21 } 22 } 23 } 24 }); 25 }, 26 prepareSubmitEffect : function (event, action){ 27 var _self = this; 28 var data = _self.assembleSaveData(action); 29 30 var target; 31 if (event && event.currentTarget) { 32 target = event.currentTarget; 33 } 34 35 shr.doAction({ 36 target: target, 37 url: _self.dynamicPage_url, 38 type: 'post', 39 data: data, 40 success : function(response) { 41 _self.back(); 42 } 43 }); 44 },
保存
保存邏輯通常不須要重寫，可是若是單據上有一些單據處理的內容，好比單選組信息，次數就須要重寫saveAction，從新用
assembleSaveData()方法進行對傳遞到服務端的數據進行組裝。獲取到數據之後單獨對該選中的單選組信息進行保存。保存、提交、提交生效方法都會調用該方法。
assembleSaveData()方法通常狀況下不須要重寫，該方法就是爲了組裝傳遞至服務端數據model。好比此處的 須要對單選組信息出境類型進行單獨保存。Handler中經過 String exitTypeId = request.getParameter("exitType"); 進行獲取 data.exitType = _self.getRecuritmentTypeDate() 的值。
1 //組裝保存時傳至服務端的數據 （當須要傳輸單據上別的數據的時候 能夠在這個方法中組裝數據傳遞到後端） 2 assembleSaveData: function(action){ 3 var _self = this; 4 var data =_self.prepareParam(action + 'Action'); 5 data.method = action; 6 data.operateState = _self.getOperateState(); 7 data.model = shr.toJSON(_self.assembleModel()); 8 9 var model = data.model; 10 if(model != undefined && model != "") { 11 data.model = model.replace(/<pre\sclass=\\"textarea-format\\">/gi,"").replace(/<\/pre>/gi,""); //抹掉由於在view界面中對富文本調.html()方法而帶出的標籤 12 } 13 14 data.exitType = _self.getRecuritmentTypeDate(); 15 16 // relatedFieldId 17 var relatedFieldId = this.getRelatedFieldId(); 18 if (relatedFieldId) { 19 data.relatedFieldId = relatedFieldId; 20 } 21 22 return data; 23 }, 24 //獲取選中的出境類型 id 25 getRecuritmentTypeDate : function(){ 26 var type = $("#exitType input[type='radio']:checked"); 27 var recTypeId = $(type).attr("data-pk"); 28 return recTypeId; 29 }
1 /** 2 * 單據保存 重寫 3 * @param {} event 4 */ 5 saveAction: function(event) { 6 var _self = this; 7 if (_self.validate() && _self.verify()) { 8 //_self.refreshNowBillState(); 9 10 _self.doSave(event, 'save'); 11 12 }else{ 13 if(_self != top){// in iframe 14 shr.setIframeHeight(window.name); 15 } 16 17 } 18 }, 19 /** 20 * 保存真正執行方法 21 */ 22 doSave: function(event, action) { 23 var _self = this; 24 var data = _self.assembleSaveData(action); 25 26 var target; 27 if (event && event.currentTarget) { 28 target = event.currentTarget; 29 } 30 31 shr.doAction({ 32 target: target, 33 url: _self.dynamicPage_url, 34 type: 'post', 35 data: data, 36 success : function(response) { 37 if (_self.isFromF7()) { 38 // 來自F7，關閉當前界面，並給F7設置 39 var dataF7 = { 40 id : response, 41 name : $.parseJSON(data.model).name 42 }; 43 dialogClose(dataF7); 44 } else { 45 // 普通保存，去除最後一個麪包屑，防止修更名字形成麪包屑重複 46 shrDataManager.pageNavigationStore.pop(); 47 _self.viewAction(response); 48 } 49 } 50 }); 51 }
套打
1. 配置視圖中的套打按鈕 templatePrint
2. 繪製套打模板 js寫入套打模板路徑 /s-HR/Cadreadministrator/CadreadministratorJob
3. 綁定查詢數據源 com.kingdee.eas.custom.cadreadministrate.app.CadreAppointmentQuery
/** * 套打模板名稱 */ getTemplateName: function() { return '/s-HR/Cadreadministrator/CadreadministratorJob'; }, /** * 套打dataProvider */ getTemplateDataProvider: function() { return 'com.kingdee.bos.webframework.component.report.CommonDataProvider'; } getTemplateQueryPK: function() { return 'com.kingdee.eas.custom.cadreadministrate.app.CadreAppointmentQuery'; }
加載css外部樣式表 並優先加載
<style href="${appPath}/custom/web/css/evalPerson/evalPerson.css"/> evalPerson.css /** 修改 #solutionPeriodname_down 下拉列表width 並提升優先級 */ #solutionPeriodname_down { width:430px !important; } !important做用是提升指定CSS樣式規則的應用優先權
數據表格分頁設置
<grid multiselect="false" rowList="[100,200]" rowNum="200" > rowList 爲每次查詢條數 rowNum 爲初始查詢條數（默認查詢50條）
相關文章
- 1. Web前端彙總
- 2. 彙編指令sar與shr
- 3. 【彙總】前端資源彙總
- 4. 前端信息彙總
- 5. 2020前端面試彙總
- 6. 前端面試彙總(VUE)
- 7. 前端框架的彙總
- 8. 前端基礎彙總
- 9. 前端學習-彙總
- 10. 前端連接彙總
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • Web 詞彙表 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Web前端彙總
- 2. 彙編指令sar與shr
- 3. 【彙總】前端資源彙總
- 4. 前端信息彙總
- 5. 2020前端面試彙總
- 6. 前端面試彙總(VUE)
- 7. 前端框架的彙總
- 8. 前端基礎彙總
- 9. 前端學習-彙總
- 10. 前端連接彙總