HAP框架-LigerUI常用组件使用手册-精品文档资料整理.docx

《HAP框架-LigerUI常用组件使用手册-精品文档资料整理.docx》由会员分享，可在线阅读，更多相关《HAP框架-LigerUI常用组件使用手册-精品文档资料整理.docx（54页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Doc Ref: Error! Reference source not found.Error! Reference source not found.2016-07-25,LigerUI常用组件使用手册Author:handCreation Date:2016-07-12Last Updated:2016-07-25Document Ref:Hap框架常见组件使用Version:1.0Note: Title, Subject, Last Updated Date, Reference Number, andVersion are marked by a Word Bookmark so t

2、hat they can be easily reproduced in the header and footer of documents. When you change any of these values, be careful not to accidentally delete the bookmark. You can make bookmarks visible by selecting Tools-OptionsView and checking the Bookmarks option in the Show region.Note:1. To add addition

3、al approval lines, press Tab from the last cell in the table above.Note: You can delete any elements of this cover page that you do not need for your document. For example, Copy Number is only required if this is a controlled document and you need to track each copy that you distribute.Note:文档控制更改记录

4、3日期作者版本更改参考2016-07-12Xinkai.chen1.0无前版本2016-07-15Yanjie.zhang1.1新增LigerTree使用2016-07-18Taotao.xu1.2新增头行和Tab页内容目录未结与已结问52 of 54LigerUI常用组件File Ref: Hap框架常见组件Cd06d3a5265e973ede04b87269b4cd7f.docx (v. 1 )CompanyConfidential - For internal use only文档控制ii1.文档说明21.1.适用框架及前端技术21.1.1.适用框架22.Hap框架常见组件使用32.1.

5、Hap框架简单常见组件使用示例32.1.1.自定义LOV32.1.2.通用LOV62.1.3.非负整数(精确到0.00)62.1.4.下拉框62.1.5.时间组件,时间自定义.72.1.6.文本框长度校验82.1.7.email格式校验82.1.8.延迟加载92.1.9.loadJson92.1.10.getJson102.1.11.组件禁用112.1.12.组件启用122.1.13.window弹框122.1.14.数据库中的值如何对应界面中展示的信息142.1.15.lov(引用其他html)152.2.LigerTree使用162.3.附件源码172.3.1.附件（源码）171.未结与已

6、结问18未结问题18已结问题181. 文档说明在使用本文档操作实现Hap框架常见组件使用前,请先详细了解本章节的内容.1. 适用框架及前端技术2. 使用jQuery LigerUI引用条件1.1. 适用框架及前端技术1.1.1. 适用框架Hap框架1.1.2. 前端技术1. jQuery LigerUI1.2. 使用jQuery LigerUILigerUI有以下几种要求1.2.1. JS文件引用openacademy/_init_.py# -*- coding: utf-8 -*-1.2.2. CSS文件引用openacademy/models.py#-*-codeing:utf-8-*1.

7、2.3. Hap框架引用Html中:#-*-codeing:utf-8-*Head.html中：#-*-codeing:utf-8-*2. 常见组件Tab页访问地址为: 2.1. 简单常见组件示例本节演示Hap框架组件,如lov,日期组件,下拉框,email格式校验等等.2.1.1. 自定义LOV组件介绍:ligerui自带的lov,点击会弹窗,在弹窗中我们可以自定义grid.Ltype选择popup,然后我们的input组件就会以一个弹窗的形式出现了.然后我们对ligerui中常用的属性进行设置.注意要对应相应的controller.java类在grid中设置url.调用对用的control

8、ler,点击查询的时候可能会保存,因为数据库对应表中没有lov_role这条数据.配置雇员中的下拉框选项.其他增删改查和普通grid一样源码:inputid=roleIdPopname=roleId1ltype=popupligerui=placeholder:Prompt,valueField:roleId,textField:roleName,title:测试通用 lov,autocomplete:true,grid:delayLoad:true,url:$base.contextPath/common/lov/lov_role,columns:display:角色代码,name:role

9、Code,isSort:false,isAutoComplete:true,dropDown:N,width:200,display:角色名称,name:roleName,isSort:false,dropDown:Y,width:200,display:描述,name:roleDescription,isSort:false,dropDown:N,width:200,condition:fields:display:角色代码,name:roleCode,type:text,newline:false,display:雇员,type:select,name:employeeId,textFie

10、ld:emaployeeName,newline : false,options : readonly:false,valueFieldID : employeeId,valueField : id,textField : name,data : id : 1,name : 张三, id : 2,name : 李四2.1.2. 通用LOV 通用lov 2.1.3. 非负整数(精确到0.00)2.1.4. 下拉框1. 自己赋值option缺点 :option过于固定优点 :简单直观 雇员 张三 李四 function GaiBian(obj) var text=$(#testSelect opt

11、ion:selected ).text();/选中的文本 var val=$(#testSelect option:selected ).val();/选中的值 var index=$(#testSelect ).get(0).selectedIndex;/索引 if(text= |val=|index=0)alert( 雇员暂未选择 ); elsealert(val); 2. 通过controller赋值option DemoUser input name=demoUserId ltype= select ligerui=textField : name,/显示引用 name属性显示在界面上

12、 valueField : id, /value引用 选中name对应指定的id url : $base.contextPath/demo/user/query 配置url调用后台返回过来的数据.2.1.5. 时间组件,时间自定义.按时间格式来,否则当文本框失去焦点时,内容会被重置. 订购日期 创建日期 2.1.6. 文本框长度校验 email2.1.7. email格式校验 email2.1.8. 延迟加载 延迟加载2.1.9. loadJson界面上:url : $base.contextPath/demo/form/load ,对应 controllerController中携带了loa

13、dJson对应的数据. text : loadJson, click : function() /$.ligerui.get(ShipName).setValue(xxxx); /return; var d = new Date();/新建一个时间 d.setMonth(5); $.ligerui.get($( #mainform).setData( creationTime:d ); /return; Hap.loadForm( form : $( #mainform), method : post, url : $base.contextPath/demo/form/load , call

14、back : function(data) alert(ok)/$.ligerui.get(userName).setText(data.userName); ) /上述url对应controller代码RequestMapping(value = /demo/form/load , method = RequestMethod.POST ) ResponseBody public ResponseData demoFormData() Map map = new HashMap(); map.put(ShipName , 测试 );/input对应的name为ShipName input n

15、ame=ShipName ltype=text map.put(creationTime , 2016-03-03 12:11:11 ); List list = new ArrayList(); list.add(map ); return new ResponseData(list); 2.1.10. getJson获取页面中form表单填写的信息 text : getJson, click : function() /alert($.ligerui.get(orderDate).getValue() debugger /获得mainform中的数据 var data = $(#mainf

16、orm).ligerForm().getData(); /在span中展示 $( #json).html(JSON.stringify(data) 2.1.11. 组件禁用 text : 禁用, id : disabled, click : function() /$.ligerui.get(roleIdPop).set(readonly, true) liger.get(mainform).setEditable(false );/禁用mainform中所有组件 liger.get( enabled).setEnabled();/开启 启用按钮 liger.get(grid_toolbar ).setEditable(false); /禁用grid中的按钮 /liger.get(grid_toolbar).setDisabled(new_btn); demogrid.setEditable( false);/禁用grid组件 2.1.12. 组件启用 text : 启用, id : enabled, click : function() liger.get(mainform).setEditable( true); liger.get(grid_toolbar ).setEditable(true); /liger.get(grid_toolbar).setE