Commit ba1b59f3 authored by zihao21's avatar zihao21

Merge branch master into origin/master

parents b229c7a9 14998c34
###字段级通用方法
#### 设置字段必填属性
>Hel.setRequired(id,flag);
第一个参数id为字段的id,第二个参数flag为true时将该字段设为必填,为false时将该字段设为非必填。
```html
<h:hlsMaskedTextBox id="maskedTextBox"/>
<script><![CDATA[
Hel.setRequired('maskedTextBox',true);
]]></script>
```
####设置字段只读属性
>Hel.setReadonly(id,flag);
第一个参数id为字段的id,第二个参数flag为true时将该字段设为只读,为false时将该字段设为可输入。
```html
<h:hlsMaskedTextBox id="maskedTextBox"/>
<script><![CDATA[
Hel.setReadonly('maskedTextBox',true);
]]></script>
```
###窗口级通用方法
####打开功能窗口
>Hel.openMenuWindow(opts);
其中参数为:
属性名 | 类型 | 含义
-------- | ----- | -----
menuCode | String(必填) | 菜单代码
title | String(必填) | 窗口描述
url | Object(必填) | 窗口地址
menuName | String| 菜单名称
moduleFlag| String | 模块标志(Y/N)
documentKey| String | 打开同一个功能时,识别不同单据的唯一标识
reflashFlag| String | 关闭该功能菜单时是否刷新父级标志(Y/N)
moduleName| String | 模块名称
```
Hel.openMenuWindow({
menuCode:'',//传入相应的参数
title:'',
url:'',
menuName:'',
moduleFlag:'',
documentKey:'',
reflashFlag:'',
moduleName:''
});
```
####关闭功能窗口
>Hel.closeMenuWindow(opts);
其中参数为:
属性名 | 类型 | 含义
-------- | ----- | -----
menuCode | String(必填) | 菜单代码
```
Hel.closeMenuWindow({
menuCode:''//传入相应的参数
});
```
####打开右弹窗口
>Hel.openBarWindow(opts);
其中参数为:
属性名 | 类型 | 含义
-------- | ----- | -----
id| String(必填) | 打开窗口的div的id
url| String(必填) | 窗口的url地址
size| String(必填) | 右弹窗口的宽度(THIRD/HALF/FULL/任意px像素)
```
<div id="win"></div>
<script><![CDATA[
Hel.openBarWindow({
id:'win',
content:'',
size:''
});
]]></script>
```
# 前端开发手册 \(1.0\)
#### 开发说明
前端界面采用kendoUI开源框架,相同的显示效果可以采用多种代码方式来实现,为了规范项目组成员的代码样式,统一编码风格,避免以后维护的工作量,融租易采用封装标签的开发方式,当然如果在项目开发过程中遇到比较复杂的页面通过标签的方式实现不了的功能,需要跟产品组报备,然后采取源生的开发方式。
#界面多语言实现
界面中的多语言在数据库中统一存放在sys_prompts表中,系统启动时加载进redis缓存。界面中实现多语言是通过freemarker的标签以及对应的多语言code来实现。
例如:“确定”的多语言code是“sys.hand.btn.ok”在界面中的写法:
```html
<@spring.message "sys.hand.btn.ok"/>
```
# hlsCombobox标签
hlsCombobox 下拉列表组件
ComboBox下拉列表组件,通常数据源以code - meaning形式出现,用户操作的是meaning,实际保存的是code。
```xml
<h: hlsCombobox placeholder="hlsCombobox"
<h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
bind="enabled: isEnabled,source: sdDataSource, value:data.code"
colspan="3"
dataTextField="meaning"
dataValueField="code"
placeholder="hlsCombobox"
prompt="hlsCombobox"
promptColspan="1"
valuePrimitive="true"
dataTextField="text"
dataValueField="value"
bind="enabled: isEnabled, source: comboboxSource, value:data.productId"
style="width: 100%;"/>
style="width:100%"
/>
```
### **主要属性**
属性名 | 类型
-------- | ---
id | String
promptColspan | String
promptClassName | String
promptImage | String
prompt | String
colspan | String
hlsClassName | String
animation | Boolean
autoBind | Boolean
autoWidth | Boolean
cascadeFrom| String
cascadeFromField | String
clearButton| Boolean
dataSource | DataSource
dataTextField | String
dataValueField| String
delay | Number
enable | Boolean
enforceMinLength| Boolean
filter | String
fixedGroupTemplate| String \| Function
footerTemplate| String \| Function
groupTemplate| String \| Function
height| Number
highlightFirst| Boolean
ignoreCase| Boolean
index| Number
minLength| Number
noDataTemplate| String \| Function
placeholder | String
suggest| Boolean
headerTemplate| String \| Function
template| String \| Function
text| String
value| String
valuePrimitive| Boolean
virtual| Boolean
change| Function
close| Function
dataBound | Function
filtering| Function
open| Function
select| Function
cascade| Function
> 属性用法请参考KendoUI文档 [http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
### **用法示例*
| 属性名 | 类型 |
| --- | --- |
| animation | Boolean |
| autoBind | Boolean |
| autoWidth | Boolean |
| cascadeFrom | String |
| cascadeFromField | String |
| clearButton | Boolean |
| dataSource | DataSource |
| dataTextField | String |
| dataValueField | String |
| delay | Number |
| enable | Boolean |
| enforceMinLength | Boolean |
| filter | String |
| fixedGroupTemplate | String \| Function |
| footerTemplate | String \| Function |
| groupTemplate | String \| Function |
| height | Number |
| highlightFirst | Boolean |
| ignoreCase | Boolean |
| index | Number |
| minLength | Number |
| noDataTemplate | String \| Function |
| placeholder | String |
| suggest | Boolean |
| headerTemplate | String \| Function |
| template | String \| Function |
| text | String |
| value | String |
| valuePrimitive | Boolean |
| virtual | Boolean |
| change | Function |
| close | Function |
| dataBound | Function |
| filtering | Function |
| open | Function |
| select | Function |
| cascade | Function |
> 属性用法请参考KendoUI文档 [http:\/\/docs.telerik.com\/kendo-ui\/api\/javascript\/ui\/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
### **用法示例**
```xml
<h: hlsCombobox id="hlsCombobox" dataSource="dataSource" clearButton="true" placeholder="test" enable="false" template="fn:itemTemplate" change="onComboboxChange"/>
```
> **提示:** 某些属性类型为**String \| Function** 时,表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分\(例如函数template="fn:itemTemplate" \)
```javascript
### **主要子节点**
* animation
* popup
* virtual
### **animation**
//对于系统定义好的数据源
<script src="${base.contextPath}/common/code?sdDataSource=FND.CODING_RULE_TYPE" type="text/javascript"></script>
主要用来定义动画效果,例如打开关闭效果
* open 打开效果
* close 关闭效果
//自定义静态数据源sdDataSource
var sdDataSource= new kendo.data.DataSource({
data:["one","two"]
});
| 属性 | 类型 |
| --- | --- |
| effects | String |
| duration | Number |
//自定义动态查询到的数据源sdDataSource
$.ajax({
type : 'GET',
url : url,
async: false,
contentType : "application/json; charset=utf-8",
success : function(datas) {
viewModel.set("sdDataSource,",datas.rows);
}
});
//需要注意,bind中写dataSource,需要在viewModel中定义
var viewModel = kendo.observable({
enabled: true,
isEnabled: false,
data: {},
sdDataSource:sdDataSource,
});
//下拉列表渲染函数
var itemTemplate = function (){
//...
}
```xml
<h: hlsCombobox id=" hlsCombobox ">
<h:animation>
<h:close effects="zoom:out" duration="300"/>
<h:open effects="zoom:in" duration="300"/>
</h:animation>
</h: hlsCombobox >
//选中某一个列表选项后触发
function onComboboxChange(e){
var value = this.value();
// Use the value of the widget.
}
//以上两种函数定义方法皆可
```
### **popup**
弹出窗口设置
| 属性 | 类型 |
| --- | --- |
| appendTo | String |
| origin | String |
| position | String |
```xml
<h: hlsCombobox id="combobox">
<h:popup appendTo="container" origin="top left" position="top left"/>
</h: hlsCombobox >
```
### **virtual**
动态加载相关设置
| 属性 | 类型 |
| --- | --- |
| itemHeight | Number |
| mapValueTo | String |
| valueMapper | Function |
<h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
bind="enabled: isEnabled,source: sdDataSource, value:data.code"
colspan="3"
dataTextField="meaning"
dataValueField="code"
placeholder="hlsCombobox"
prompt="hlsCombobox"
promptColspan="1"
valuePrimitive="true"
style="width:100
change="onComboboxChange"
template="fn:itemTemplate"
```javascript
function valueMapper(){
$.ajax({
url: "http://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
type: "GET",
dataType: "jsonp",
data: convertValues(options.value),
success: function(data) {
//the **data** is either index or array of indices.
//Example:
// 10258 -> 10 (index in the Orders collection)
// [10258, 10261] -> [10, 14] (indices in the Orders collection)
options.success(data);
}
})
}
/>
```
#### 特别注意 valuePrimitive="true" 如果该值为false,选中的值将不会匹配给dataTextField和dataValueField
dataValueField
> **提示:** 某些属性类型为**String \| Function** 时,表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )
```xml
<h: hlsCombobox id="combobox">
<h:virtual itemHeight ="20" mapValueTo="index" valueMapper="valueMapper"/>
</h: hlsCombobox >
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment