hap框架和-開發(fā)指導手冊

1、<HAP框架>開發(fā)指導手冊Author: Creation Date: Last Updated: Document Ref:Version:Hand 2016-12-292021-03-311.0文檔更改日期作者版本更改參考2017-01-05陳顯智1.0內容目錄文檔1.2. 2HAP 介紹4環(huán)境搭建及項目配置...2.7.開發(fā)工具5工程創(chuàng)建5編譯項目5創(chuàng)建數(shù)據(jù)庫,并初始化5配置 JNDI 數(shù)據(jù)源6安裝并啟動redis6運行項目63.HAP 開源組件介紹...Spring Security7Q

2、uartz7Activiti7CXF7Redis8LiquiBase84.HAP 常用功能..4.5.Lov 配置及使用9快速編碼的配置和使用9描述維護的配置和使用10代碼代碼使用10使用145.后端開發(fā).5.3.Controller 層18Service 層19DTO 層206.前端開發(fā).常用組件使用21常用函數(shù)介紹307.入門案例3.7.3.實例介紹32開發(fā)32前臺開發(fā)378.前端開發(fā)案例5.操作54頭行結構669.常見問題及解決辦法67未結與已結問68未結問題68已結問題681.HAP介紹A

3、PI網(wǎng)關HAPREST API管理用戶REST APIREST APIREST APIREST API權限基礎l基于Java流行開源技術構建 HAP使用業(yè)界最流行的開源技術搭建，框架本身也完全開源，做到真正的技術開放。l基于微服務架構設計 以微服務架構風格構建，前后端分離。具有清晰的模塊界限、服務技術多樣性的能力特點。部署和滿足傳統(tǒng)Web和分布式應用開發(fā) 框架以適應經典的MVC架構和分布式大型應用開發(fā)為設計目標， 兩種風格的開發(fā)和部署無縫切換。ll滿足多平臺移動應用開發(fā) 使用H5和JS混合技術，配合移動中臺管理組件，構建企業(yè)級跨平臺移動應用解決方案。2.環(huán)境搭建及項目配置2.1.開發(fā)工具JDK

4、 1.8 及以上IntelliJ IDEA 或 Eclipse redis 3.0 及以上maven 3.3 及以上Tomcat 7+ (不支持 Tomcat 6)數(shù)據(jù)庫（任選）lllMysql server 5.6 及以上SqlServer 2012 及以上Oracle 9 以上Navicat Premium（或其他）Git2.2.工程創(chuàng)建HAP工程以Maven作為構建工具,依賴管理工具.通過maven命令創(chuàng)建一個空的工程mvn archetype:generate -D archetypeGroupId=hap -DarchetypeArtifactId=hap-webapp-archet

5、ype -D archetypeVersion=2.0-SNAPSHOT-D groupId=hbi -D artifactId=HbiParent -D package=hbi.core -D hap.version=2.0-SNAPSHOT -DarchetypeRepository= napshot/content/repositories/rdcs紅色部分可以自行修改,分別對應新工程的groupId,artifactId,以及package.2.3.編譯項目創(chuàng)建完工程之后需要對工程進行一次編譯，并安裝到本地Maven庫在項目的根路徑下執(zhí)行mvn clean install命令初次執(zhí)行會

6、hap相應的依賴，需要一段時間,如果因為網(wǎng)絡因素停頓,可以Ctrl+C,重新執(zhí)行命令Install的目的是將工程下的core及core-db子工程安裝到本地倉庫,因為在初始化數(shù)據(jù)庫時依賴core-db的jar包.注意:每次更新了core-db中的文件都需要重新執(zhí)行上述步驟并重新初始化數(shù)據(jù)庫2.4.創(chuàng)建數(shù)據(jù)庫,并初始化HAP框架支持三種常用數(shù)據(jù)庫,Mysql,Oracle,SqlServer.下面以Mysql為示例.創(chuàng)建schemacreate schema hap_dev default character set utf8;其他數(shù)據(jù)庫的創(chuàng)建方式見數(shù)據(jù)庫創(chuàng)建初始化數(shù)據(jù)庫ll通過maven命令初

7、始化數(shù)據(jù)庫在hap-parent目錄下(項目根目錄)執(zhí)行mvn process-resources -D skipLiquibaseRun=false -D.mysql.jdbc.Driver -D db.url=jdbc:mysql:/:3306/hap_dev -Ddb.user=hap_dev-Ddb.password=hap_dev紅色部分可根據(jù)實際情況修改2.5.配置JNDI數(shù)據(jù)源HAP項目通過JNDI(Java Naming and Directory Interface)獲取數(shù)據(jù)源的配置信息.在運行項目前需要配置JNDI數(shù)據(jù)源修改tomcat中conf/cont

8、ext.xml增加<Resource auth="Container" driverClassName="com.mysql.jdbc.Driver" url="jdbc:mysql:/localhost:3306/hap_dev" name="jdbc/hap_dev" type="javax.sql.DataSource" username="hap_dev" password="hap_dev"/>紅色部分可根據(jù)實際情況修改其中name屬

9、性與hap中的perties有關聯(lián).如無特殊需要,可不做修改2.6.安裝并啟動redisHAP使用redis數(shù)據(jù)庫,緩存配置信息以及redis服務可以正常使用從官網(wǎng)redis并安裝.session信息.所以在啟動項目前需要保證Windows通過安裝包安裝會將redis為windows服務.將服務設為自啟動即可手動啟動redis只需要運行redis目錄下的redis-server.exe注意:HAP默認配置的redis端為6379.redis的默認端也是63792.7.運行項目HAP工程可通過IDEA,Eclipse等IDE啟動,也可通過maven打包部署到服務器啟動.服務器

10、部署lll在項目根目錄下執(zhí)行mvn clean package core/target/core.war到tomcat中的webapps目錄下啟動tomcat.3.HAP開源組件介紹HAP開源組件與HAP版本無關，下列主要開源組件使用在HAP每個版本均適用。3.1.Spring SecurityHAP中的用戶權限詳細內容參考：,用戶認證以及系統(tǒng)安全,通過Spring Security實現(xiàn).HAP框架-SpringS ecurity入門手冊.do3.2.QuartzQuartz是一個強大的開源調度框架,HAP中的任務調度模塊由Quartz實現(xiàn),其中通過Quartz可以為系統(tǒng)增加定時任務,其中通過

11、cronExpression定義的定時任務,相當靈活,也是開發(fā)過程中經常使用的.詳細內容可參考：HAP框架-定時調度器使用手冊.docx3.3.ActivitiHAP中集成了開源的工作流框架Activiti.用于實現(xiàn)工作流.詳細內容可參考：HAP框架-HAP2.0工作流開發(fā)流程.do3.4.CXFWeb Service是分布式系統(tǒng)實現(xiàn)消息傳遞和調用的技術,可以通過Web Service技術為外部系統(tǒng)提供可靠的外部接口,Apache CXF框架支持多種協(xié)議的Web Service實現(xiàn),并且支持多種傳輸協(xié)議.HAP集成了CXF.實現(xiàn)WebService的發(fā)布.具體開發(fā)過程可參考：HETF-WebS

12、ervice開發(fā)入門.docx3.5.RedisRedis是一個開源的使用C語言編寫的內存非關系型數(shù)據(jù)庫,采用單線程IO復用模型實現(xiàn).HAP使用Redis進行數(shù)據(jù)緩存,Session管理以及消息訂閱發(fā)布的實現(xiàn).Redis是典型的CS結構.存在Client和Server兩個部分,Server負責管理內存數(shù)據(jù),Client為管理數(shù)據(jù)提供接口.HAP使用Jedis作為客戶端與Redis Server交互,通過繼承Spring Data Redis簡化開發(fā)難度.Redis開發(fā)可參考：HAP框架-Redis入門手冊.docxSpring Data Redis使用可參考：HETF-SpringData R

13、edis的使用.3.6.LiquiBaseLiquiBase是一個日志式的數(shù)據(jù)庫變更管理工具.通過以方便的坐到數(shù)據(jù)庫的持續(xù)集成.Liquibase使用可參考：下每次數(shù)據(jù)庫的變更操作,可HAP框架-Liquibas e入門手冊.doc4.HAP常用功能下列常用功能適用于HAP2.0及以上4.1.Lov配置及使用在一些場景下需要從特定的范圍內取得某條的主鍵,并且支持有條件的點擊之后出現(xiàn)彈出框,然后選中其中的某條具體使用可參考：Hap2.0框架lov使用總結.docx或者https:/r/gitlab/HAP/hap-developer-guide/blob/master/lov.md4.2.快速編

14、碼的配置和使用代碼維護用于維護開發(fā)過程中遇到的編碼信息.在系統(tǒng)管理->代碼維護中,快速編碼用于維護類似java枚舉值的描述信息.<script src="$base.contextPath/common/code?resourceTypeData=SYS.RESOURCE_TYPE " type="text/javascript"></script>通過script.可以獲得如下全局變量var resourceTypeData="objectVersionNumber":1,"codeId&qu

15、ot;:10008,"codeValueId":10001," description":"HTML頁面","meaning":"HTML頁面","value":"HTML","orderSeq":10,"objectVersionNumber":1,"codeId":10008,"codeValu eId":10002,"description":&quo

16、t;URL服務","meaning":"URL服務","value":"SERVICE","orderSeq":10;然后通過全局變量4.3.描述維護的配置和使用界面中的描述信息可以通過描述維護來提供多語言顯示,在系統(tǒng)配置->描述維護中,按圖中的方式新建描述維護信息,在html中通過freemarker<spring.message "hap.new"/>,紅色部分為描述維護的代碼.使用,如4.4.代碼使用代碼url為：打開后如下圖：我們根據(jù)要求輸

17、入地址及名稱：項目路徑：輸入當前項目路徑F:hfs-workSct3.0sctSctParentcore包父路徑：路徑為：com/hand/hap注意不可寫成comhandhap，否則生成文件會出錯。包父類：dis表名稱：hfs_dis_sct默認的文件名稱為表名后兩個單詞，如disUser.html，一般按照要規(guī)范是取最后一個單詞作為類名稱Html模板頁面選擇是寫死，后續(xù)如果有其他模板加入，可以將其維護起來一切按要求填寫完后點擊創(chuàng)建文件4.4.1.查看生成文件看出各類文件已經生成。Controller文件：url為表名稱加上submit或者delete，url一般從模塊名稱值，如下圖的hfs

18、是不需要的4.4.2.dto已經繼承basedto，但是主鍵等特殊需求注解需要添加。4.4.3.mapper.xml手動將stdmapper.xml導入，后續(xù)有待完善需要4.4.4.html生成的HTML樣式如圖，需要特定進行修改，到此，就實現(xiàn)了頁面簡單的增刪改查4.5.Excel通用導出使用4.5.1.前端-按鈕的設計和實現(xiàn)先在前端HTML代碼上定義一個【導出Excel】按鈕4.5.2.前端-實現(xiàn)按鈕的exportExcelStudent方法<!-將按鈕和viewm進行綁定-><script>kendo.bind($('#toolbar-btn'),

19、viewM);</script><div class="pull-left" id="toolbar-btn" style="padding-bottom:10px;"><span class="btn btn-primary" style="float:left;margin-right:5px;"data-bind="click:exportExcelStudent"><i class="fa fa-file-excel

20、-o" style="margin-right:3px;"></i><spring.message "hap.exportexcel"/></span></div>var viewM= kendo.observable( m: ,exportExcelFunction: function (e) var exportConfig = ;var columns = ; var index = 0;for (var i = 0; i < grid.columns.length; i+) i

21、f (grid.columnsi.field != null) var columnInfo = ;columnInfo"name" = grid.columnsi.field; columnInfo"title" = grid.columnsi.title; columnInfo"width" = grid.columnsi.width;var align =$('tbody').find('tr')0.getElementsByTagName('td')i.style.textAli

22、gn;if (align != null | align != '') columnInfo"align" = align;if (dataSource.options.schema.m.fieldsgrid.columnsi.field !=null) columnInfo"type" =dataSource.options.schema.m.fieldsgrid.columnsi.field.type;columnsindex = columnInfo; index+;exportConfig"columnsInfo&quo

23、t; = columns;exportConfig"param" = Hap.prepareQueryParameter(viewM.m.toJSON();4.5.3.-實現(xiàn)EXCEL導出方法RequestMapping(value = "/sys/student/export")public void createXLSForStudent(HttpServletRequest request, RequestParam String config,HttpServletResponse httpServletResponse) IRequest re

24、qontext = createReqontext(request);try JavaType type = objectMapper.getTypeFactory().constructParametrizedType(ExportConfig.class,ExportConfig.class, Student.class, ColumnInfo.class);ExportConfig<Function, ColumnInfo> exportConfig = objectMapper.readValue(config, type);excelService.exportAndDo

25、wnloadExcel("com.hand.hap.system.mapper.StudentMap per.findStudent",exportConfig, request, httpServletResponse, reqontext); catch (IOException e) e.printStackTrace();exportConfig"fileName" = "student"var $inputImg = $('<input>').attr(name: "config&quo

26、t;, value: kendo.stringify(exportConfig);var $form = $("<form>");$form.attr(target: '_self',/默認在相同的框架下打開被的文檔method: 'post',action: '$base.contextPath/sys/student/export' /綁定方法).append($inputImg);$form.submit();)4.5.4.顯示效果展示5.后端開發(fā)5.1.Controller層BaseController簡介

27、BaseController是一個由hap框架封裝好的Controller類。其中定義了一些常用的方法。如獲取用戶Id，獲取用戶，當前語言環(huán)境，異常捕獲處理等。BaseController常用屬性介紹l DEFAULT_PAGE：設置分頁默認頁碼，默認值為1。l DEFAULT_PAGE_SIZE：設置默認分頁每頁顯示的條數(shù)，默認值為10。l MessageSource messageSource：消息源。其中getMessage(String code, Object args, Locale locale)可以取得系統(tǒng)中當前語言環(huán)境下在描述維護中維護的code對應的提示消息。（描述維護是h

28、ap框架的一個功能，用于維護同一代碼在不同語言環(huán)境下的不同顯示狀態(tài)。）BaseController常用方法介紹l checkToken():用于發(fā)布webservice時做token校驗。BaseController中重載了該方法。分別是：checkToken(HttpServletRequest request, Collection<? extends BaseDTO> dtos)checkToken(HttpSession session, Collection<? extends BaseDTO>dtos)checkToken(HttpServletReques

29、t request, BaseDTO baseDTO) checkToken(HttpSession session, BaseDTO baseDTO)實際開發(fā)中結合的需要調用即可，該方法返回值為空。exceptionHandler(Exception exception, HttpServletRequest request)：用于處理l的Controller層捕獲處理層所有的異常。當然你也可以在的異常。如果繼承了BaseController類，的層未做處理，而是選擇將異常拋出，那么異常就會在此處被。getErrorMessage(Errors errors, HttpServletRequ

30、est request)：用于獲取異常消息。返回的是根據(jù)當前語言環(huán)境翻譯后的錯誤消息，errors是包含錯誤的對象。lnls(HttpServletRequest request, String code, Object args)：也是用于獲取描述維護中當前語言環(huán)境下的消息。通常用于自定義的是錯誤消息。code是描述維護中消息的代碼。底層實現(xiàn)用的是messageSource.getMessage(code, args, code, locale); args是message中需要用到的參數(shù)。如果沒有直接傳null即可。也可以直接調用nls(HttpServletRequest request

31、, String code)。該方法中沒有消息參數(shù)。lgetStandardFieldErrorMessage(FieldErrorWithBean fieldError, Locale locale)：該方法用于獲取DTO字段校驗的標準錯誤消息，如非空驗證等。FieldErrorWithBean 可直接附加field 所屬的 bean，fieldError可直接獲取目標bean。local為當前語言環(huán)境。lfindDeclareClass(Class fromClass, String fieldName)：用于找到當前屬性來之那個父類。fromClass為當前類，fieldName為當前屬

32、性名。lgetUserId(HttpServletRequest request)：用于獲取用戶ID（注意用戶ID跟員工ID不是同一個東西。）ll getRoleId(HttpServletRequest request)：獲取當前用戶的ID。l getLanguage(HttpServletRequest request)：獲取當前語言編碼提示：Base Controller中封裝的這些方法都是比較常用的方法。在實際項目開發(fā)中并不重新去編寫。只要在創(chuàng)建的Controller的時候幾成BaseController即可。當需要然如果不滿足需求，重寫一覆蓋下就可以了。5.2.Service層Bas

33、eService簡介項目中不管多么復雜的數(shù)據(jù)庫持久層操作，歸根結底都是由簡單的sql語句組成的。而且不管是那個項目都少不了對 的增、刪、改、查操作。在HAP中，這些基本的表操作不用 傻傻的每次都寫一遍，HAP框架已經幫我們寫好了，它就是IBase Service接口定義了一些基本的增刪該查。而且該接口是一個泛型接口。必要只需在繼承該接口并將的DTO傳入即可。如：public interface IStudentLoginservice extends IBaseService<Student>BaseService常用參數(shù)類介紹l IRequest：該類封裝了一些從HttpRequ

34、est中獲取的數(shù)據(jù)。其常用屬性有String FIELD_USER_ID = "userId" String FIELD_LOCALE = "locale"String FIELD_LOGIN_ID="loginId"String FIELD_ROLE_ID = "roleId" String EMP_CODE = "employeeCode"String FIELD_ALL_ROLE_ID = "roleIds"該類中為這些屬性提供了get、set方法。需要可以在Contr

35、oller層中將HttpRequest封裝進去之后直接調用即可。如：IRequest reqontext =createReqontext(request);BaseService常用方法List<T> select(IRequest request, T condition, int pageNum, int pageSize)所l有滿足條件（condition）的結果集。該方法支持分頁。Request中封裝了一些從HttpRequest中的數(shù)據(jù)。Condition為條件，pageNum為當前頁碼，pageSize為每頁顯示的條數(shù)。T selectByPrimaryKey(IRe

36、quest request, T record)：通過主鍵應的DTO。Record為對lList<T> selectAll(IRequest iRequest)：全部。lT insert(IRequest request, StdWho T record)：全部數(shù)據(jù)，如果record中的某l個屬性為空，該方將空數(shù)據(jù)庫。T insertSelective(IRequest request, StdWho T record)：不為null的數(shù)據(jù)lT updateByPrimaryKey(IRequest request, StdWho T record) 根據(jù)主鍵更新所有數(shù)據(jù)lT up

37、dateByPrimaryKeySelective(IRequest request, StdWho T record)：根據(jù)主鍵更新不為null的數(shù)據(jù)ll List<T> batchUpdate(IRequest request, StdWho List<T> list)：批量更新。該方法要求T為BaseDTO或者其子類。且默認更新部位null的字段l int deleteByPrimaryKey(T record)：根據(jù)主鍵刪除數(shù)據(jù)l int batchDelete(List<T> list)：批量刪除提示:框架的selectAll()、batchDel

38、ete()、batchUpdate()這三個方法不支持多語言。5.3.DTO層常用注解介紹Id：主鍵IdlColumn：數(shù)據(jù)庫表字段lTransient：暫存字段（在數(shù)據(jù)當前dto對應的庫表中不存在的字段）lNotNull：非空驗證。用于時間、日期、基本數(shù)據(jù)類型對應包裝類（Long、Integer等）的非空驗證lNotEmpty：非空驗證，用除用于時間、日期、基本數(shù)據(jù)類型對應包裝類之外的數(shù)據(jù)類型的非空驗證lMultiLanguageField：多語言字段lDateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")：日期格式化轉換。是Spr

39、ing框架自帶的，用于格式化轉換前臺傳來的日期。綠色部分位具體的日期格式， 可根據(jù)需要填寫lJsonFormat(pattern="yyyy-MM-dd HH:mm:ss")：json日期格式轉換lNumberFormat(pattern="#,#.# ")：數(shù)字格式化轉換，綠色部分位具體的日期格式，可根據(jù)需要填寫lJsonIgnore：標注序列化時需要忽略的屬性。如serialVersionUID等。lTable(name = "hss_task_orders_b")：標注當前dto對應的數(shù)據(jù)庫表hss_task_orders_b為

40、數(shù)據(jù)庫表名稱。lJsonInclude(Include.NON_NULL)：標注返回的json字符串中是否顯示該字段， 此處為not_null，需要顯示；若是null則不需要顯示。lChildren：用于投行結構中在頭dto中定義對應的行。方便操作頭的時候同時操作對應的行。l6.前端開發(fā)適用于kendoUI框架6.1.常用組件使用按照web目錄規(guī)范，前端文件存放在如下目錄webapplib bootstrap-3.3.7 font-awesome-4.6.3 kendouiresources css font images js uploadWEB-INFweb.xmlview文件目錄文件按照

41、類型劃分為兩個目錄：lib和resources lib目錄存放kendoui的所有文件resources目錄存放程序通用的文件功能文件目錄 功能文件存放在view目錄下，目錄模塊代碼/功能項代碼名規(guī)則按照例如：用戶管理的模塊代碼是SYS,那么用戶管理相關的界面文件都存放在src/main/webapp/WEB-INF/view/sys下文件命名約定界面文件按照如下格式：業(yè)務對象 功能操作.html例如：用戶界面: user_query.html#url命名約定 對于系統(tǒng)中提交的url地址，按照以下格式命名contextPath/模塊代碼/業(yè)務對象/操作類型對于常見的幾種操作類型定義如下URL模

42、塊代碼/業(yè)務對象/query批量提交模塊代碼/業(yè)務對象/submit批量刪除模塊代碼/業(yè)務對象/remove 例如用戶的: sys/user/query #代碼編程規(guī)范javascript注釋 文件頭上定義/* summary Hap* description 抽象通用函數(shù)* version 1.0* author njq.以及文件的主要描述信息* copyright Copyright Hand China Co.,*/函數(shù)上注釋/* 提交表單數(shù)據(jù)(頭行數(shù)據(jù)可一起提交).* <ul>* <li>options.form: form對象</li>* <

43、li>options.grid: grid對象</li>.* <li>options.gridName: grid數(shù)據(jù)的name</li>* <li>options.url: 提交的url</li>* <li>options.success: success回調函數(shù)</li>* <li>options.failure: failure回調函數(shù)</li>* </ul>* param options*/freemarker 注釋 端界面主要采用freemarker模板技術，

44、文件后綴名統(tǒng)一為.html<#-* Description: 快速編碼修改界面* Version: 1.0* Author: njq.* Copyright Hand China Co.,->css注釋/*!* description:通用樣式文件.* version: 1.0* author: njq.* Copyright Hand China Co.,*/.變量 變量命名原則是減少變量，采用Camel命名法。var 開發(fā)項ID_具體業(yè)務含義 = 例如：用戶管理界面中用戶的grid數(shù)據(jù)var d_um_002_grid = $('#d_um_002_grid')

45、.data("kendoGrid");函數(shù)名 函數(shù)命名也采用Camel命名法. function 開發(fā)項ID_具體業(yè)務含義.例如用戶函數(shù)function d_um_002_query().#開發(fā)實踐 前端界面采用kendoUI開源框架，相同的顯示效果可以采用多種代碼方式來實現(xiàn)，為了規(guī)范項目組成員的代碼樣式，統(tǒng)一編碼風格，避免以后維護的工作量， 根據(jù)不同的應用場景總結以下幾種開發(fā)實踐.通用引入頭文件界面中會引入一些文件，例如，樣式文件等。為了避免每個界面都重復引入增作量以及后續(xù)維護的，每個界面應該引入通用的文件頭。<#include "./include/he

46、ader.html">界面多語言實現(xiàn)界面中的多語言在數(shù)據(jù)庫放在sys_prompts表中，系統(tǒng)啟動時加載進redis緩存。界面中實現(xiàn)多語言是通過freemarker的以及對應的多語言code來實現(xiàn)。 例如：“確定”的多語言code是“sys.hand.btn.ok”在界面中的寫法：<spring.message "sys.hand.btn.ok"/>表單(form)實現(xiàn)表單主要采用bootstrap的柵格來布局第一步首先創(chuàng)建一個form的容器對象，一般我們采用div<div id="d_um_002_form" >

47、</div>在中根據(jù)容器id創(chuàng)建form對象 javascriptwindow'd_um_002_form' = $("#d_um_002_form").ligerForm( fields: type: 'text',label: 'loginname', name: 'loginName', type: 'text',label: 'name',newline: false,name: 'name',buttons: text: ''

48、,width: 60,click: function() Hap.gridQuery(form: d_um_002_form, grid: d_um_002_grid);一般的界面都會包含一個的表單，以及一個數(shù)據(jù)展示的grid，按鈕函數(shù)中調用kendoUIGrid的datasource中的read方法去提交數(shù)據(jù)。這里可以直接使用$('#grid').data('kendoGrid').dataSource.page(1);來調用方法,表單數(shù)據(jù)一般需要綁定在viewM中,在數(shù)據(jù)時，將viewM中的值傳遞到去viewM1.定義viewM var viewM綁定表單數(shù)

49、據(jù)= kendo.observable(m: 2.定義input并綁定viewM<input type="text" id="promptCode" data-bind="value:mptCode"><script>kendo.bind($('promptCode'), viewM);</script>3.時傳遞參數(shù)parameterMap : function(options) var map = viewM.m.toJSON();map.page = options.

50、page;map.pagesize = options.pageSize; return map;表單校驗表單驗證采用的是kendoUI提供的kendoValidator組件來驗證<input id="password" type="password"/>var validator = $("#password").kendoValidator( messages: pwdlen:'<spring.message "user.password.length"/>',rules

51、: /自定義規(guī)則pwdlen: function(input)if(input.val().length < 10) return false;return true;);對于簡單的校驗邏輯可直接定義一個驗證錯誤的模板，如必需字段，無需在定義規(guī)則。表單加載數(shù)據(jù)加載form數(shù)據(jù)可以通過頁面ajax請求,也可以通過定，可直接加載到表單上m:length: "$length", complexity:"$complexity"表格Grid定義grid的dom容器<div style="clear:both"><div

52、 id="grid"></div></div>根據(jù)id生成grid對象$("#grid").kendoGrid( dataSource:dataSource, columns : field : "promptCode",傳參，在viewM.m里綁title : '<spring.message "mptcode"/>', width : 240,headerAttributes: "class": "tab

53、le-header-cell", style : "text-align: center",attributes : /輸入只能小寫style : "text-transform:lowercase",.);Grid工具欄新增按鈕toolbar: name: "create",template : '<span class="btn btn-primary k-grid-add"><spring.message "hap.new"/></span&

54、gt;'/自定義模板刪除按鈕(可在表單自定義按鈕)<span onclick="deleteData()" class="btn btn-danger"><spring.message "hap.delete"/></span>function deleteData() var checked = grid.selectedDataItems(); if(grid.selectedDataItems().length)kendo.ui.showConfirmDialog( title:$l(

55、''),message: $l('hap.tip.delete_confirm').done(function (event) if (event.button = 'OK') $.each(checked,function(i,v) grid.dataSource.remove(v)grid.dataSource.sync();)保存函數(shù)(綁定viewMjavascript方法) html <spring.message "hap.save"/>var viewMm= kendo.obse

56、rvable(: ,saveFunction: function () $('#grid').data('kendoGrid').saveChanges();,queryResource: function (e) $('#grid').data('kendoGrid').dataSource.page(1););注意: 為了客戶端不再重新刷新，服務端一定要返回提交的數(shù)據(jù)return new ResponseData(users);JSON數(shù)據(jù)格式grid和服務端的數(shù)據(jù)交互統(tǒng)一采用json格式success:true, rows,

57、 total:10success: ajax是否的標志 true|false rows: 返回的數(shù)據(jù)集 total:總數(shù)需要在grid中定義json的格式屬性pageSize: 10, /分頁大小serverPaging: true,/服務器端是否分頁頭行關系頭行數(shù)據(jù)建議采用form+grid的形式.其中form展現(xiàn)頭信息，grid展現(xiàn)行信息。grid的定義參考以上章節(jié)，這里主要介紹保存邏輯Hap.submitForm(url: '$base.contextPath/sys/lov/submit',form和formMgrid: : viewM.m,lovItems: $(&#

58、39;#grid'),success: function (result) if (!lovId) lovId = viewM.m.lovId);頭行保存這里調用了Hap.submitForm方法，參數(shù)對象中包含了form對象以及grid 對象，gridName定義行數(shù)據(jù)存放在頭上的屬性名。/* 提交表單數(shù)據(jù)(頭行數(shù)據(jù)可一起提交).* <ul>* <li>options.formM: form對象即viewM.m</li>* <li>options.grid: grid對象</li>* <li>options.gridName: grid數(shù)據(jù)的name</li>* <li>options.