1、<HAP框架>Kendo UI拓展組件使用手冊(cè)Author: Creation Date: Last Updated: Document Ref:Version:hand2016-11-122021-03-03拓展組件1.0錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-03文檔更改框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only日期作者版本更改參考2016-11-14Junqiang.xiao1.0參考東阿控件目錄結(jié)構(gòu)錯(cuò)誤!未找到Doc Ref: 錯(cuò)誤!未找到源。源。2021-03-03內(nèi)容目錄目錄文檔1.1

2、...........ii文檔說(shuō)明2適用框架及前端技術(shù)2使用KendoUI（） . 2拓展文件使用3） . 6某列的編輯權(quán)限（列編輯示例（方法一）6列編輯示例（方法二）7LOV彈出框并帶回多個(gè)值（） . 11系統(tǒng)lov配置11系統(tǒng)lov grid實(shí)現(xiàn)12系統(tǒng)lov form實(shí)現(xiàn)14通過(guò)Ajax直接返回Json數(shù)據(jù)（）. 16處理流程16Select下選框使用（Kendo UI下拉框） . 20. 20下拉級(jí)聯(lián)22LOV彈框級(jí)聯(lián)（）. 27Form中級(jí)聯(lián)示例

3、27Grid中級(jí)聯(lián)示例28Form中Radio單選框的使用（） . 33Form中文本框、LOV、Radiolist不可編輯（） . 34清除界面按鈕（）37清除方法實(shí)現(xiàn)37清除方法使用38表單提交，數(shù)據(jù)（） . 39Form中使用方法396.2 Grid回寫(xiě)錯(cuò)誤!未定義書(shū)簽。7.頁(yè)面默認(rèn)值處理方式（） . 4.Form中使用方法47Grid中使用方法47框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only錯(cuò)誤!未找到Doc Ref: 錯(cuò)誤!未找到源。源。2021-03-038.彈出新的Tab頁(yè)面（）. 498.1 彈出新Ta

4、b頁(yè)面49不可編輯的字段中文本過(guò)長(zhǎng)（）519.1 設(shè)置文本過(guò)長(zhǎng)字段519.10.） . 52. 52） . 62（10.1基本指針11.進(jìn)度條（11.1 ProgressBar進(jìn)度條62未結(jié)與已結(jié)問(wèn)67未結(jié)問(wèn)題67已結(jié)問(wèn)題67框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-031.文檔說(shuō)明在使用本文檔操作實(shí)現(xiàn)組件拓展前,請(qǐng)先詳細(xì)了解本章節(jié)的內(nèi)容.1.適用框架及前端技術(shù)2.使用jQuery Kendo UI條件1.1.適用框架及前端技術(shù)1.1.1.適用框架Hap框架1.1.2.

5、前端技術(shù)1.jQuery Kendo UI1.2.使用KendoUI（）Kendo UI有以下幾種要求1.2.1.JS文件openacademy/ init .py1.2.2.CSS文件openacademy/ms.py框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only#-*-codeing:utf-8 -*<link href="$base.contextPath/lib/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" type=

6、"text/css"/><link href="$base.contextPath/lib/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"/><linkhref="$base.contextPath/lib/kendoui/styles/mon-bootstrap.min.css" rel="stylesheet" type="text

7、/css"/><link href="$base.contextPath/lib/kendoui/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/><link href="$base.contextPath/lib/kendoui/styles/kendo.hap.css" rel="stylesheet"# -*- coding: utf-8 -*-<script src=

8、"$base.contextPath/lib/kendoui/js/jquery.min.js"></script><script src="$base.contextPath/lib/kendoui/js/kendo.all.min.js"></script><script src="$base.contextPath/lib/kendoui/js/cultures/kendo.culture.$base.locale.toStri ng()?replace('_','-

9、').js"></script><script src="$base.contextPath/lib/kendoui/js/messages/kendo.messages.$base.locale.to String()?replace('_','-').js"></script><script src="$base.contextPath/lib/kendoui/js/kendo.hap.js"></script>錯(cuò)誤!未找到Doc Re

10、f:錯(cuò)誤!未找到源。源。2021-03-031.2.3.Hap框架Html中:Header.html中：1.3.拓展文件使用為了豐富UI組件的多樣性，滿足框架支持以外的需求，需要在開(kāi)發(fā)過(guò)程中去拓展JS、CSS、Images、HTML等文件，本小節(jié)將怎樣拓展和使用HAP框架以外的組件功能。首先為了便于管理和維護(hù)，在webapp/resources下分別建了css、images、js等目錄用于存放css等文件，在WEB-INF/view下新建了include目錄用于存放html文件。1.3.1.拓展JS在webapp/resources/js下存放拓展開(kāi)發(fā)的JS文件，如圖：框架kendo拓展組件使

11、用手冊(cè)(v. 1 )Company- For internal use only#-*-codeing:utf-8 -*<link href="$base.contextPath/resources/upload/fav" rel="shortcut icon"/><script src="$base.contextPath/lib/kendoui/js/jquery.min.js"></script><script src="$base.contextPath/lib/kendou

12、i/js/kendo.all.min.js"></script><link href="$base.contextPath/lib/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><link href="$base.contextPath/lib/font-awesome-4.6.3/css/font-awesome.min.css" rel="styleshee

13、t" type="text/css"/><linkhref="$base.contextPath/lib/kendoui/styles/mon-bootstrap.min.css" rel="stylesheet" type="text/css"/><link href="$base.contextPath/lib/kendoui/styles/kendo.bootstrap.min.css" rel="stylesheet" type=&q

14、uot;text/css"/><link href="$base.contextPath/lib/kendoui/styles/kendo.hap.css" rel="stylesheet" type="text/css"/><script src="$base.contextPath/lib/kendoui/js/cultures/kendo.culture.$base.locale.toStri ng()?replace('_','-').js"

15、></script><script src="$base.contextPath/lib/kendoui/js/messages/kendo.messages.$base.locale.to String()?replace('_','-').js"></script><script src="$base.contextPath/lib/kendoui/js/kendo.hap.js"></script><script src="$base.

16、contextPath/common/prompts"></script><link href="$base.contextPath/resources/css/frm/util.css" rel="stylesheet" type="text/css"/>#-*-codeing:utf-8 -*<#include "./include/header.html">type="text/css"/><link href="$

17、base.contextPath/resources/css/frm/util.css" rel="stylesheet" type="text/css"/>錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-031.3.2.拓展CSS在webapp/resources/css下存放拓展開(kāi)發(fā)的CSS文件，如圖：1.3.3.拓展Images在webapp/resources/images下存放拓展開(kāi)發(fā)的Image文件，如圖：框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only錯(cuò)

18、誤!未找到Doc Ref: 錯(cuò)誤!未找到源。源。2021-03-031.3.4.拓展程序1）在WEB-INF/view/include目錄下創(chuàng)建組件引入html文件,如hfs.html，里面需要引入拓展的CSS、JS等信息2）在需要html文件中進(jìn)行引入框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only<#include "./include/hfs.html">錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-032.某列的編輯權(quán)限（）2.1.列編輯示例（方法一）通過(guò)m下的editable實(shí)現(xiàn)

19、單行不同列的可編輯。2.1.1.頁(yè)面展示2.1.2.主要代碼框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use onlym: id: "trxTypeId", fields: trxType: type: "string", trxTypeName: type: "string",versionNumber: type: "number",defaultValue:1, statusCode: type: "string", validation:re

20、quired:true,defaultValue:"DRAFT", startDate: type: "date",endDate: type: "date",defaultValue:"", levelNo: type: "string", ,editable: function(col) if(col='statusCode'&&this.statusCode='INACTIVE')return false;return true;錯(cuò)誤!未找到

21、Doc Ref:錯(cuò)誤!未找到源。源。2021-03-03'statusCode'為字段的名稱，'INACTIVE'為字段的值，return輯，return true 為可編輯。false 為不可編2.2.列編輯示例（方法二）1.編輯頁(yè)面數(shù)據(jù)，該列不可編輯，如下圖所示:2.新建頁(yè)面數(shù)據(jù)，該列可編輯，：框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-031.2.1. 實(shí)現(xiàn)列編輯框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For i

22、nternal use onlycolumns: field: "trxType", title: '<spring.message"hss.setup.trx_type.flag"/>',width: '17%' ,editor: function(container, options)if (options.m.trxTypeId != "") container.html(options.m.trxType);container.removeClass('k-edit-cell

23、'); else var editor = $('<input type="text" style="padding:0;height:25px;" name="trxType" class="k-input k-text-box" required validationMessage="<spring.message "hss.notempty"/>">');editor.css('width','10

24、0%'); container.append(editor);,field: "trxTypeName", title: '<spring.message"hss.setup.trx_"/>',width: '18%' ,editor: function(container, options)var editor = $('<input type="text" style="padding:0;height:25px;" name=

25、"trxTypeName" class="k-input k-text-box" required validationMessage="<spring.message "hss.notempty"/>">');editor.css('width','100%'); container.append(editor);,錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-03關(guān)鍵代碼1.2.2. 實(shí)現(xiàn)grid LOV 編輯框架kendo拓展組件使用

26、手冊(cè)(v. 1 )Company- For internal use onlyfield: "trxTypeId", title: '<spring.message"hss.setup.task.tran_type"/>', width: '16%',template: function(dataItem) return dataItem'trxTypeName' | '',editor: function(container, options)if (options.m.doc

27、Id != "") container.html(options.m.trxTypeName); container.removeClass('k-edit-cell'); else $('<input required validationMessage="<spring.message "hss.notempty"/>" name="' + options.field + '"/>').appendTo(container).kendoLo

28、v($.extend($lovProvider.getLov(base.c ontextPath,base.locale,"HSS_SETUP_DOC_VALIDTRXTYPE"), textField: 'trxTypeName',/* query: function(e) e.param'statusCode' = 1; /lov參數(shù), */ change:function()options.m.set('detailTrxTypeName',null);editor: function(container, option

29、s)if (options.m.trxTypeId != "") container.html(options.m.trxType);container.removeClass('k-edit-cell'); else var editor = $('<input type="text" style="padding:0;height:25px;" name="trxType" class="k-input k-text-box" required validati

30、onMessage="<spring.message "hss.notempty"/>">');editor.css('width','100%'); container.append(editor);錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-03框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use onlyoptions.m.set('trxDetailId',null);,m: options.m);錯(cuò)誤!未找到D

31、oc Ref:錯(cuò)誤!未找到源。源。2021-03-033.LOV彈出框并帶回多個(gè)值（）3.1.系統(tǒng)lov配置1）lov定義界面2）點(diǎn)擊新建按需求填寫(xiě)lov屬性，點(diǎn)擊保存，完成lov配置。框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-033.2.系統(tǒng)lovgrid實(shí)現(xiàn)3.2.1.頁(yè)面展示1）主頁(yè)面2）彈出子頁(yè)面框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-

32、033）選擇之后獲取數(shù)據(jù)并返回主頁(yè)面3.2.2.KendoUI grid文本框內(nèi)代碼框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use onlyfield: "companyId",title: '<spring.message "pany.code"/>', width: '15%' ,template: function (dataItem) return dataItem'companyCode' | '',editor : fu

33、nction (container, options) $('<input required validationMessage="<spring.message "hss.notempty"/>" name="' + options.field + '"/>').appendTo(container).kendoLov($.extend(<lov "HSS_SETUP_DOC_COMPANY"/>, textField: 'company

34、Code',m: options.m, select:function(e)options.m.set('companyCode',panyCode); options.m.set('companyFullName',panyFullName);,change : function(e)if (e.sender. prev = '' | e.sender. prev =null) options.m.set('companyCode',''); options.m.set('companyFullN

35、ame',''););,field: "companyFullName", title:'<spring.message"hss.setup.trx pany name"/>', width: '15%' ,editor: function(container, options)var html = '<input class="k-input k-textbox k-valid" data-bind="value:companyFullNam

36、e" name="companyFullName"錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-033.3.系統(tǒng)lovform實(shí)現(xiàn)3.3.1.頁(yè)面展示1）主頁(yè)面2）點(diǎn)擊lov的放大鏡圖標(biāo)3）雙擊選擇，帶回兩個(gè)值框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use onlydisabled="disabled" type="text">'$(html).appendTo(container);錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03

37、-034）KendoUI form文本框內(nèi)代碼3.3.2.KendoUI form文本框內(nèi)代碼框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only<input id="planNumber" type="text" style="width:200px;margin-right:5px;" placeholder='<spring.message"hss.qmp.qaPlan.plannumber"/>' data-bind=&q

38、uot;value:m.qaPlanNumber"><script>$("#planNumber").kendoLov($.extend(<lov "HSS_QMP_QARESULT_QAPLANNUMBER"/>, select: function(e) viewM.m.set('description',e.item.description);)</script><input type="text" style="width:200px;margi

39、n-right:5px;" placeholder='<spring.message "hss.qmp.qaResuescription"/>' data-bind="value:m.description,text:m.qaResuescript ion" class="text-readonly" disabled="disabled">錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-034.通過(guò)Ajax直接返回Json數(shù)據(jù)（）4.1.處理流程4.1.

40、1.Ajax代碼1）Ajax代碼在上面的注意事項(xiàng)中我們知道，select下拉框里的一個(gè)值實(shí)際代表的兩個(gè)值，但是我們?cè)谑褂玫臅r(shí)候，select框獲取的只是一個(gè)值，比如我們出來(lái)的是“匯總公司”這個(gè)字符串。當(dāng)我們沒(méi)有動(dòng)select框卻更改了其他東西時(shí)，這時(shí)候我們執(zhí)行保存或者更新就會(huì)出現(xiàn)保存的是“匯總公司”而不是對(duì)應(yīng)“匯總公司”的代碼。4.1.2.臨時(shí)解決辦法：進(jìn)行碼代碼展示在mapper.xml中框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use onlyRequestMapping(value = "/org/lookupValue"

41、, produces = "application/javascript;charset=utf8")ResponseBodypublic String selectCompany(String type, HttpServletRequest request) throws JsonProcessingException Locale locale = ReqontextUtils.getLocale(request); String lang = locale.toString();IRequest reqontext = createReqontext(request

42、); System.out.println("type:"+type); System.out.println("lang:"+lang);LookupValue lookupValue = new LookupValue(); lookupValue.setLookupType(type);List<LookupValue>data = lookupValueService.selectLookupValues(reqontext, lookupValue);if(data = null) return""StringB

43、uilder sb = new StringBuilder(); toJson(sb, null, data); System.out.println(sb.toString();returnsb.toString();protectedvoid toJson(StringBuilder sb, String var, Object data)throws JsonProcessingException booleanhasVar = var != null&&var.length() > 0; if (hasVar) sb.append("var "

44、).append(var).append('=');sb.append(objectMapper.writeValueAsString(data);if (hasVar) sb.append('');錯(cuò)誤!未找到Doc Ref: 錯(cuò)誤!未找到源。源。2021-03-03對(duì)應(yīng)的resultMapDTO類于是我們?cè)诘臅r(shí)候就會(huì)獲得三個(gè)數(shù)據(jù)，一個(gè)用于前臺(tái)展示，一個(gè)用于比較，另一個(gè)來(lái)當(dāng)前展示數(shù)據(jù)多對(duì)應(yīng)的代碼。當(dāng)我們保存數(shù)據(jù)時(shí)，ligerUI Grid會(huì)將這些數(shù)據(jù)封裝成List傳到Controller中框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For i

45、nternal use only/保存公司信息RequestMapping(value="/org/company/sumit",method=RequestMethod.POST)ResponseBodypublic ResponseData submitCompanys(RequestBody List<Company>companys, BindingResult result, HttpServletRequest request)throws BaseException for(Company company : companys)if(company

46、.getCompanyTypeCode().equals(company.getTempCompanyTyp eCodeDesc()company.setCompanyTypeCode(company.getTempCompanyTypeCode();if (result.hasErrors() ResponseData rd = new ResponseData(false); rd.setMessage(getErrorMessage(result, request); returnrd; else IRequest reqtx = createReqontext(request); co

47、mpanyService.Update(reqtx, companys);for(Company company : companys)if(company.getCompanyTypeCode().equals(company.getTempCompanyTyp eCode()company.setCompanyTypeCode(company.getTempCompanyTypeCodeDesc();returnnew ResponseData(companys);錯(cuò)誤!未找到Doc Ref: 錯(cuò)誤!未找到源。源。2021-03-03紅色代碼為。當(dāng)傳進(jìn)來(lái)companyTypeCode(se

48、lect封裝進(jìn)來(lái)的數(shù)據(jù))和tempCompanyTypeCodeDesc(之前說(shuō)的有更改select內(nèi)容直接保存，下面進(jìn)行出來(lái)用于的值)如果相等，說(shuō)明我們沒(méi)操作，將我們到的tempCompanyTypeCode(保存的是companyTypeCode對(duì)應(yīng)的代碼)付給companyTypeCode然后執(zhí)行保存函數(shù)。4.1.3.應(yīng)用場(chǎng)景列舉-Select下拉框數(shù)據(jù)源使用HTML界面加上如下代碼：<scriptsrc="$base.contextPath/fnd/code?dataType=HFS_ORG_COMPA NY_TYPE"type="text/java

49、script"></script>向controller層傳入?yún)?shù)dataType=HFS_ORG_COMPANY_TYPE， 放入dataType中。Controllers層主要代碼：返回json串用getQueryString()獲取從前臺(tái)傳來(lái)的dataType=HFS 字符串截取的方法獲取參數(shù)名稱dataType和數(shù)值HFS ORGORG COMPANY TYPE，用COMPANY TYPE，參數(shù)的名稱是可變的，以滿足不同的數(shù)據(jù)源類型，值是不變的。把HFS_ORG_COMPANY_TYPE框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For i

50、nternal use onlyAutowiredprivate ObjectMapper objectMapper; RequestMapping(value = "/fnd/code", produces = "application/javascript;charset=utf8") ResponseBodypublic String getLookupValue(String type,HttpServletRequest request)throws JsonProcessingException Locale locale = Reqonte

51、xtUtils.getLocale(request); String lang = locale.toString();IRequest reqontext = createReqontext(request); String queryString = request.getQueryString();String string=queryString.split("="); LookupValueVl lookupValueVl = new LookupValueVl();lookupValueVl.setLookupCode(string1); lookupValue

52、Vl.setLang(lang);List<LookupValueVl>data = lookupValueVlService.selectByLookupValueVl(reqontext, lookupValueVl);if(data = null) return""String var=string0;StringBuilder sb = new StringBuilder(); sb.append("var ").append(var).append('='); sb.append(objectMapper.write

53、ValueAsString(data); sb.append('');returnsb.toString();<script src="$base.contextPath/fnd/code?dataType=HFS_ORG_COMPANY_TYPE" type="text/javascript"></script>錯(cuò)誤!未找到Doc Ref: 錯(cuò)誤!未找到源。源。2021-03-03放入LookupType中獲取到所需json格式數(shù)據(jù)，把參數(shù)名稱dataType放入拼接字符串中，形成能夠被前臺(tái)并封裝的json格式的

54、數(shù)據(jù)，返回前臺(tái)。框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源。2021-03-035.Select下選框使用（）5.1.Kendo UI下拉框5.1.1.第一種DropDownList外觀如上圖所示1）from代碼框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only<input class="inputbox" type="text" id="trxDetailId" da

55、ta-bind="value:m.trxDetailId,text:m.detailTrxTypeName">=$("#trxTypeId").kendoDropDownList( valuePrimitive: true, optionLabel: " ",/默認(rèn)選項(xiàng)值dataTextField: "trxTypeName",/下拉框顯示值dataValueField: "trxTypeId",/下拉框?qū)嶋H值dataSource: /數(shù)據(jù)源transport: read:function

56、(options) $.ajax(type: "POST", url:"$base.contextPath/task/taskOrder/TrxType/quer y",success: function(json) options.success(json.rows););,select:function(e)/下拉框點(diǎn)擊viewM.m.set("trxDetailId", null); viewM.m.set("detailTrxTypeName", null);,錯(cuò)誤!未找到Doc Ref:錯(cuò)誤!未找到源。源

57、。2021-03-032）grid代碼5.1.2.第二種ComboBox外觀如上圖1）from代碼框架kendo拓展組件使用手冊(cè)(v. 1 )Company- For internal use only$("#trxDetailId1").kendoComboBox(valuePrimitive: true,dataTextField: "detailTrxTypeName", dataValueField: "trxDetailId", dataSource: transport: read:function(options) $.ajax(type: &qu