Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
H
hel-developer-guide
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
chenhao
hel-developer-guide
Commits
0d324227
Commit
0d324227
authored
Aug 02, 2017
by
zydgitboox
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Deletes 前端组件/HlsCombobox.md
Auto commit by GitBook Editor
parent
31acb648
Changes
8
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
88 additions
and
287 deletions
+88
-287
HlsCombobox.md
前端组件/HlsCombobox.md
+0
-111
HlsDatePicker.md
前端组件/HlsDatePicker.md
+0
-88
hlsCheckBox.md
前端组件/hlsCheckBox.md
+0
-0
hlsDatePicker.md
前端组件/hlsDatePicker.md
+88
-88
hlsDateTimePicker.md
前端组件/hlsDateTimePicker.md
+0
-0
hlsLov.md
前端组件/hlsLov.md
+0
-0
hlsToolBar.md
前端组件/hlsToolBar.md
+0
-0
tabStrip.md
前端组件/tabStrip.md
+0
-0
No files found.
前端组件/HlsCombobox.md
deleted
100644 → 0
View file @
31acb648
# hlsCombobox标签(下拉框)
ComboBox下拉列表组件,通常数据源以code - meaning形式出现,用户操作的是meaning,实际保存的是code。
```
xml
<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%"
/>
```
### **主要属性**
属性名 | 类型 | 说明 |
--- | --- | --- |
id | String | id |
promptColspan | String | 提示语句需要占几列 |
promptClassName | String | 提示语句类名,默认不填 |
promptImage | String | 提示前面的文字图形,默认不填 |
prompt | String | 提示信息 |
colspan | String | 所占列数 |
hlsClassName | String | 类名,默认不填 |
dataSource | DataSource | 数据源 |
dataTextField | String | 返回的显示描述字段 |
dataValueField| String | 绑定的英文字段 |
enable | Boolean | 是否可编辑,true为可编辑,false不可编辑 |
placeholder | String | 占位符 |
template| Function| 渲染函数 |
change| Function | 数据变化时触发的函数 |
> 属性用法请参考KendoUI文档 [http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
### **用法示例*
```
javascript
//对于系统定义好的数据源
<
script
src
=
"${base.contextPath}/common/code?sdDataSource=FND.CODING_RULE_TYPE"
type
=
"text/javascript"
><
/script>
//自定义静态数据源sdDataSource
var
sdDataSource
=
new
kendo
.
data
.
DataSource
({
data
:[
"one"
,
"two"
]
});
//自定义动态查询到的数据源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
(){
//...
}
//选中某一个列表选项后触发
function
onComboboxChange
(
e
){
var
value
=
this
.
value
();
// Use the value of the widget.
}
//以上两种函数定义方法皆可
```
```
xml
<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"
/>
```
#### 特别注意 valuePrimitive="true" 如果该值为false,选中的值将不会匹配给dataTextField和dataValueField
dataValueField
> **提示:** 某些属性类型为**String \| Function** 时,表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )
前端组件/HlsDatePicker.md
deleted
100644 → 0
View file @
31acb648
# hlsDatePicker标签
日期选择器(不包含时分秒)
xml配置
```
xml
<!--基本用法-->
<h:hlsDatePicker
id=
"hlsDatePickerId"
bind=
"enabled:isEnabled,value:data.value"
placeholder=
"hlsDatePicker"
/>
```
### **主要属性**
属性名 | 类型 | 说明 |
-------- | -----| --- |
promptColspan | Integer | 描述字段所占列数 |
promptClassName | String| 描述的样式名称 |
prompt | String| 描述 |
colspan | Integer | datePicker所占列数 |
hlsClassName | String | 样式名称 |
animation | Boolean | 动画 |
format| String | 格式化 |
max| String | 最大时间 |
min| String | 最小时间 |
value | String | 值 |
name | String | name属性 |
bind | Function | 绑定数据 |
required | Boolean | 必输 |
change | Function | chang事件 |
placeholder | String | 占位符 |
timeFormat |String| 时间格式化 |
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
### **用法示例**
```
javascript
//注意是写在script标签内的
var
viewModel
=
kendo
.
observable
({
data
:{},
isEnabled
:
true
});
function
open
(){
//...
}
function
change
(
e
){
//...
}
```
```
xml
<h:hlsDatePicker
id=
"hlsDatePickerId"
bind=
"enabled: isEnabled,value:data.value"
style=
"width:200px;"
max=
"2016-6-6"
placeholder=
"hlsDatePicker"
open=
"open"
required=
"true"
change=
"change"
prompt=
"日期选择器:"
/>
id:可写可不写;
bind:属性里面包含配置两个选项:
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量;
max:可选择日期的上限值;
style可改变该控件的样式;
open:点击控件调用的方法;
change:选择日期之后的事件;
prompt:为控件添加一个label,该属性一般和
<h:hlsForm>
、
<h:hlsHBox>
一起使用;
```
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
前端组件/
H
lsCheckBox.md
→
前端组件/
h
lsCheckBox.md
View file @
0d324227
File moved
前端组件/hlsDatePicker.md
View file @
0d324227
# hlsDatePicker标签
# hlsDatePicker标签
日期选择器(不包含时分秒)
日期选择器(不包含时分秒)
xml配置
xml配置
```
xml
```
xml
<!--基本用法-->
<!--基本用法-->
<h:hlsDatePicker
id=
"hlsDatePickerId"
bind=
"enabled:isEnabled,value:data.value"
placeholder=
"hlsDatePicker"
/>
<h:hlsDatePicker
id=
"hlsDatePickerId"
bind=
"enabled:isEnabled,value:data.value"
placeholder=
"hlsDatePicker"
/>
```
```
### **主要属性**
### **主要属性**
属性名 | 类型 | 说明 |
属性名 | 类型 | 说明 |
-------- | -----| --- |
-------- | -----| --- |
promptColspan | Integer | 描述字段所占列数 |
promptColspan | Integer | 描述字段所占列数 |
promptClassName | String| 描述的样式名称 |
promptClassName | String| 描述的样式名称 |
prompt | String| 描述 |
prompt | String| 描述 |
colspan | Integer | datePicker所占列数 |
colspan | Integer | datePicker所占列数 |
hlsClassName | String | 样式名称 |
hlsClassName | String | 样式名称 |
animation | Boolean | 动画 |
animation | Boolean | 动画 |
format| String | 格式化 |
format| String | 格式化 |
max| String | 最大时间 |
max| String | 最大时间 |
min| String | 最小时间 |
min| String | 最小时间 |
value | String | 值 |
value | String | 值 |
name | String | name属性 |
name | String | name属性 |
bind | Function | 绑定数据 |
bind | Function | 绑定数据 |
required | Boolean | 必输 |
required | Boolean | 必输 |
change | Function | chang事件 |
change | Function | chang事件 |
placeholder | String | 占位符 |
placeholder | String | 占位符 |
timeFormat |String| 时间格式化 |
timeFormat |String| 时间格式化 |
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
### **用法示例**
### **用法示例**
```
javascript
```
javascript
//注意是写在script标签内的
//注意是写在script标签内的
var
viewModel
=
kendo
.
observable
({
var
viewModel
=
kendo
.
observable
({
data
:{},
data
:{},
isEnabled
:
true
isEnabled
:
true
});
});
function
open
(){
function
open
(){
//...
//...
}
}
function
change
(
e
){
function
change
(
e
){
//...
//...
}
}
```
```
```
xml
```
xml
<h:hlsDatePicker
id=
"hlsDatePickerId"
bind=
"enabled: isEnabled,value:data.value"
<h:hlsDatePicker
id=
"hlsDatePickerId"
bind=
"enabled: isEnabled,value:data.value"
style=
"width:200px;"
style=
"width:200px;"
max=
"2016-6-6"
max=
"2016-6-6"
placeholder=
"hlsDatePicker"
placeholder=
"hlsDatePicker"
open=
"open"
open=
"open"
required=
"true"
required=
"true"
change=
"change"
change=
"change"
prompt=
"日期选择器:"
prompt=
"日期选择器:"
/>
/>
id:可写可不写;
id:可写可不写;
bind:属性里面包含配置两个选项:
bind:属性里面包含配置两个选项:
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量;
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量;
max:可选择日期的上限值;
max:可选择日期的上限值;
style可改变该控件的样式;
style可改变该控件的样式;
open:点击控件调用的方法;
open:点击控件调用的方法;
change:选择日期之后的事件;
change:选择日期之后的事件;
prompt:为控件添加一个label,该属性一般和
<h:hlsForm>
、
<h:hlsHBox>
一起使用;
prompt:为控件添加一个label,该属性一般和
<h:hlsForm>
、
<h:hlsHBox>
一起使用;
```
```
> **提示:**
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
前端组件/
H
lsDateTimePicker.md
→
前端组件/
h
lsDateTimePicker.md
View file @
0d324227
File moved
前端组件/
H
lsLov.md
→
前端组件/
h
lsLov.md
View file @
0d324227
File moved
前端组件/
H
lsToolBar.md
→
前端组件/
h
lsToolBar.md
View file @
0d324227
File moved
前端组件/
T
abStrip.md
→
前端组件/
t
abStrip.md
View file @
0d324227
File moved
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment