框架kendo拓展组件使用手册

1、<HAP框架>Kendo UI拓展组件使用手册Author: Creation Date: Last Updated: Document Ref:Version:hand2016-11-122021-03-03拓展组件1.0错误!未找到Doc Ref:错误!未找到源。源。2021-03-03文档更改框架kendo拓展组件使用手册(v. 1 )Company- For internal use only日期作者版本更改参考2016-11-14Junqiang.xiao1.0参考东阿控件目录结构错误!未找到Doc Ref: 错误!未找到源。源。2021-03-03内容目录目录文档1.1

2、...........ii文档说明2适用框架及前端技术2使用KendoUI（） . 2拓展文件使用3） . 6某列的编辑权限（列编辑示例（方法一）6列编辑示例（方法二）7LOV弹出框并带回多个值（） . 11系统lov配置11系统lov grid实现12系统lov form实现14通过Ajax直接返回Json数据（）. 16处理流程16Select下选框使用（Kendo UI下拉框） . 20. 20下拉级联22LOV弹框级联（）. 27Form中级联示例

3、27Grid中级联示例28Form中Radio单选框的使用（） . 33Form中文本框、LOV、Radiolist不可编辑（） . 34清除界面按钮（）37清除方法实现37清除方法使用38表单提交，数据（） . 39Form中使用方法396.2 Grid回写错误!未定义书签。7.页面默认值处理方式（） . 4.Form中使用方法47Grid中使用方法47框架kendo拓展组件使用手册(v. 1 )Company- For internal use only错误!未找到Doc Ref: 错误!未找到源。源。2021-03-038.弹出新的Tab页面（）. 498.1 弹出新Ta

4、b页面49不可编辑的字段中文本过长（）519.1 设置文本过长字段519.10.） . 52. 52） . 62（10.1基本指针11.进度条（11.1 ProgressBar进度条62未结与已结问67未结问题67已结问题67框架kendo拓展组件使用手册(v. 1 )Company- For internal use only错误!未找到Doc Ref:错误!未找到源。源。2021-03-031.文档说明在使用本文档操作实现组件拓展前,请先详细了解本章节的内容.1.适用框架及前端技术2.使用jQuery Kendo UI条件1.1.适用框架及前端技术1.1.1.适用框架Hap框架1.1.2.

5、前端技术1.jQuery Kendo UI1.2.使用KendoUI（）Kendo UI有以下几种要求1.2.1.JS文件openacademy/ init .py1.2.2.CSS文件openacademy/ms.py框架kendo拓展组件使用手册(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>错误!未找到Doc Re

10、f:错误!未找到源。源。2021-03-031.2.3.Hap框架Html中:Header.html中：1.3.拓展文件使用为了丰富UI组件的多样性，满足框架支持以外的需求，需要在开发过程中去拓展JS、CSS、Images、HTML等文件，本小节将怎样拓展和使用HAP框架以外的组件功能。首先为了便于管理和维护，在webapp/resources下分别建了css、images、js等目录用于存放css等文件，在WEB-INF/view下新建了include目录用于存放html文件。1.3.1.拓展JS在webapp/resources/js下存放拓展开发的JS文件，如图：框架kendo拓展组件使

11、用手册(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"/>错误!未找到Doc Ref:错误!未找到源。源。2021-03-031.3.2.拓展CSS在webapp/resources/css下存放拓展开发的CSS文件，如图：1.3.3.拓展Images在webapp/resources/images下存放拓展开发的Image文件，如图：框架kendo拓展组件使用手册(v. 1 )Company- For internal use only错

18、误!未找到Doc Ref: 错误!未找到源。源。2021-03-031.3.4.拓展程序1）在WEB-INF/view/include目录下创建组件引入html文件,如hfs.html，里面需要引入拓展的CSS、JS等信息2）在需要html文件中进行引入框架kendo拓展组件使用手册(v. 1 )Company- For internal use only<#include "./include/hfs.html">错误!未找到Doc Ref:错误!未找到源。源。2021-03-032.某列的编辑权限（）2.1.列编辑示例（方法一）通过m下的editable实现

19、单行不同列的可编辑。2.1.1.页面展示2.1.2.主要代码框架kendo拓展组件使用手册(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;错误!未找到

21、Doc Ref:错误!未找到源。源。2021-03-03'statusCode'为字段的名称，'INACTIVE'为字段的值，return辑，return true 为可编辑。false 为不可编2.2.列编辑示例（方法二）1.编辑页面数据，该列不可编辑，如下图所示:2.新建页面数据，该列可编辑，：框架kendo拓展组件使用手册(v. 1 )Company- For internal use only错误!未找到Doc Ref:错误!未找到源。源。2021-03-031.2.1. 实现列编辑框架kendo拓展组件使用手册(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);,错误!未找到Doc Ref:错误!未找到源。源。2021-03-03关键代码1.2.2. 实现grid LOV 编辑框架kendo拓展组件使用

26、手册(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参数, */ 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);错误!未找到Doc Ref:错误!未找到源。源。2021-03-03框架kendo拓展组件使用手册(v. 1 )Company- For internal use onlyoptions.m.set('trxDetailId',null);,m: options.m);错误!未找到D

31、oc Ref:错误!未找到源。源。2021-03-033.LOV弹出框并带回多个值（）3.1.系统lov配置1）lov定义界面2）点击新建按需求填写lov属性，点击保存，完成lov配置。框架kendo拓展组件使用手册(v. 1 )Company- For internal use only错误!未找到Doc Ref:错误!未找到源。源。2021-03-033.2.系统lovgrid实现3.2.1.页面展示1）主页面2）弹出子页面框架kendo拓展组件使用手册(v. 1 )Company- For internal use only错误!未找到Doc Ref:错误!未找到源。源。2021-03-

32、033）选择之后获取数据并返回主页面3.2.2.KendoUI grid文本框内代码框架kendo拓展组件使用手册(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"错误!未找到Doc Ref:错误!未找到源。源。2021-03-033.3.系统lovform实现3.3.1.页面展示1）主页面2）点击lov的放大镜图标3）双击选择，带回两个值框架kendo拓展组件使用手册(v. 1 )Company- For internal use onlydisabled="disabled" type="text">'$(html).appendTo(container);错误!未找到Doc Ref:错误!未找到源。源。2021-03

37、-034）KendoUI form文本框内代码3.3.2.KendoUI form文本框内代码框架kendo拓展组件使用手册(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">错误!未找到Doc Ref:错误!未找到源。源。2021-03-034.通过Ajax直接返回Json数据（）4.1.处理流程4.1.

40、1.Ajax代码1）Ajax代码在上面的注意事项中我们知道，select下拉框里的一个值实际代表的两个值，但是我们在使用的时候，select框获取的只是一个值，比如我们出来的是“汇总公司”这个字符串。当我们没有动select框却更改了其他东西时，这时候我们执行保存或者更新就会出现保存的是“汇总公司”而不是对应“汇总公司”的代码。4.1.2.临时解决办法：进行码代码展示在mapper.xml中框架kendo拓展组件使用手册(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('');错误!未找到Doc Ref: 错误!未找到源。源。2021-03-03对应的resultMapDTO类于是我们在的时候就会获得三个数据，一个用于前台展示，一个用于比较，另一个来当前展示数据多对应的代码。当我们保存数据时，ligerUI Grid会将这些数据封装成List传到Controller中框架kendo拓展组件使用手册(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);错误!未找到Doc Ref: 错误!未找到源。源。2021-03-03红色代码为。当传进来companyTypeCode(se

48、lect封装进来的数据)和tempCompanyTypeCodeDesc(之前说的有更改select内容直接保存，下面进行出来用于的值)如果相等，说明我们没操作，将我们到的tempCompanyTypeCode(保存的是companyTypeCode对应的代码)付给companyTypeCode然后执行保存函数。4.1.3.应用场景列举-Select下拉框数据源使用HTML界面加上如下代码：<scriptsrc="$base.contextPath/fnd/code?dataType=HFS_ORG_COMPA NY_TYPE"type="text/java

49、script"></script>向controller层传入参数dataType=HFS_ORG_COMPANY_TYPE， 放入dataType中。Controllers层主要代码：返回json串用getQueryString()获取从前台传来的dataType=HFS 字符串截取的方法获取参数名称dataType和数值HFS ORGORG COMPANY TYPE，用COMPANY TYPE，参数的名称是可变的，以满足不同的数据源类型，值是不变的。把HFS_ORG_COMPANY_TYPE框架kendo拓展组件使用手册(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>错误!未找到Doc Ref: 错误!未找到源。源。2021-03-03放入LookupType中获取到所需json格式数据，把参数名称dataType放入拼接字符串中，形成能够被前台并封装的json格式的

54、数据，返回前台。框架kendo拓展组件使用手册(v. 1 )Company- For internal use only错误!未找到Doc Ref:错误!未找到源。源。2021-03-035.Select下选框使用（）5.1.Kendo UI下拉框5.1.1.第一种DropDownList外观如上图所示1）from代码框架kendo拓展组件使用手册(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: " ",/默认选项值dataTextField: "trxTypeName",/下拉框显示值dataValueField: "trxTypeId",/下拉框实际值dataSource: /数据源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)/下拉框点击viewM.m.set("trxDetailId", null); viewM.m.set("detailTrxTypeName", null);,错误!未找到Doc Ref:错误!未找到源。源

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