最准确齐全完善Easyui 教程.docx
《最准确齐全完善Easyui 教程.docx》由会员分享,可在线阅读,更多相关《最准确齐全完善Easyui 教程.docx(77页珍藏版)》请在冰豆网上搜索。
最准确齐全完善Easyui教程
最准确-齐全-完善-Easyui教程
目录
1Accordion(可折叠标签)2
1.1实例2
1.2参数3
2DateBox(日期框)4
2.1实例4
2.2参数6
2.3事件6
2.4方法6
3ComboBox(组合框)7
3.1实例7
3.2参数9
3.3事件9
3.4方法9
4Dialog(对话框)10
4.1实例10
4.2参数12
4.3事件12
4.4方法12
5Messager(提示框)12
5.1实例12
5.2方法15
5.3扩展16
6NumberBox(数字框)16
6.1实例16
6.2参数17
7ValidateBox(验证框)18
7.1实例18
7.2参数20
7.3方法20
7.4扩展20
8Pagination(分页)20
8.1实例20
8.2参数22
8.3事件23
9Window(窗口)23
9.1实例23
9.2参数25
9.3事件26
9.4方法26
10Panel(面板)26
10.1实例26
10.2参数28
10.3事件29
10.4方法29
11Tabs(标签)30
11.1实例30
11.2参数32
11.3事件32
11.4方法33
11.5标签面板属性33
12Tree(树)33
12.1实例33
12.2参数36
12.3事件37
12.4方法37
13Layout(布局)38
13.1实例38
13.2参数39
13.3方法39
14Datagrid(数据表)39
14.1实例39
14.2参数43
14.3Column参数44
14.4事件45
14.5方法46
1Accordion(可折叠标签)
1.1实例
1.1.1代码
$(function(){
$('#aa').accordion({
width:
400,
height:
200,
fit:
false
});
auto;padding:10px;">#0099FF;">AccordionforjQueryAccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.
auto;padding:
10px;">
#0099FF;">AccordionforjQueryAccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.
#0099FF;">AccordionforjQuery
AccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.
style="padding:10px;">content2
style="padding:
10px;">content2
content3
1.1.2效果图
1.1.3扩展
实例html代码中
此行也可写成
300px;height:200px;"fit="false"border="false">,并且将js代码全部去掉,效果图是一样的。1.2参数1.2.1容器参数参数名称参数类型描述默认值width数字可折叠标签的宽度。autoheight数字可折叠标签的高度。autofit布尔是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。falseborder布尔是否显示边界线。true1.2.2面板参数可折叠标签面板继承自面板(panel),许多属性定义在标签里,下面的属性就是如此:
300px;height:
200px;"fit="false"border="false">
,并且将js代码全部去掉,效果图是一样的。
1.2参数
1.2.1容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
可折叠标签的高度。
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
border
是否显示边界线。
true
1.2.2面板参数
可折叠标签面板继承自面板(panel),许多属性定义在
selected
设置可折叠标签中默认展开的标签页
2DateBox(日期框)
2.1实例
2.1.1代码
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
href="../themes/default/easyui.css">functiondisable(){$('#dd').datebox('disable');}functionenable(){$('#dd').datebox('enable');}/*将Date/String类型,解析为String类型.传入String类型,则先解析为Date类型不正确的Date,返回''如果时间部分为0,则忽略,只返回日期部分.*/functionformatDate(v){if(vinstanceofDate){vary=v.getFullYear();varm=v.getMonth()+1;vard=v.getDate();varh=v.getHours();vari=v.getMinutes();vars=v.getSeconds();varms=v.getMilliseconds();if(ms>0)returny+'-'+m+'-'+d+''+h+':'+i+':'+s+'.'+ms;if(h>0||i>0||s>0)returny+'-'+m+'-'+d+''+h+':'+i+':'+s;returny+'-'+m+'-'+d;}return'';}$(function(){$('#dd').datebox({currentText:'今天',closeText:'关闭',disabled:false,required:true,missingMessage:'必填',formatter:formatDate});});
href="../themes/default/easyui.css">
functiondisable(){
$('#dd').datebox('disable');
}
functionenable(){
$('#dd').datebox('enable');
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回''
如果时间部分为0,则忽略,只返回日期部分.
*/
functionformatDate(v){
if(vinstanceofDate){
vary=v.getFullYear();
varm=v.getMonth()+1;
vard=v.getDate();
varh=v.getHours();
vari=v.getMinutes();
vars=v.getSeconds();
varms=v.getMilliseconds();
if(ms>0)
returny+'-'+m+'-'+d+''+h+':
'+i+':
'+s
+'.'+ms;
if(h>0||i>0||s>0)
'+s;
returny+'-'+m+'-'+d;
return'';
$('#dd').datebox({
currentText:
'今天',
closeText:
'关闭',
disabled:
false,
required:
true,
missingMessage:
'必填',
formatter:
formatDate
10px;">disable();>disableenable();>enable2.1.2效果图2.2参数属性名类型描述默认值currentText字符串为当前日期按钮显示的文本TodaycloseText字符串关闭按钮显示的文本Closedisabled布尔如果为true则禁用输入框falserequired布尔定义输入框是否为必添falsemissingMessage字符串当输入框为空时提示的文本必填formatterfunction格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串——parserfunction分析字符串的函数,这个函数以’date’为参数并返回一个日期——2.3事件事件名参数描述onSelectdate当选择一个日期时触发2.4方法方法名参数描述destroynone销毁组件disablenone禁用输入框.enablenone启用输入框3ComboBox(组合框)3.1实例3.1.1代码jQueryEasyUIhref="../themes/default/easyui.css">functionloadData(){$('#cc').combobox({url:'combobox_data.json',//该文件内容在下面valueField:'id',textField:'text'});}functionsetValue(){$('#cc').combobox('setValue','2');}functiongetValue(){varval=$('#cc').combobox('getValue');alert(val);}functiondisable(){$('#cc').combobox('disable');}functionenable(){$('#cc').combobox('enable');}$(function(){$('#cc').combobox({width:150,listWidth:150,listHeight:100,//valuefield:'value',//textField:'text',//url:'combobox_data.json',editable:false});});ComboBox
10px;">disable();>disableenable();>enable2.1.2效果图2.2参数属性名类型描述默认值currentText字符串为当前日期按钮显示的文本TodaycloseText字符串关闭按钮显示的文本Closedisabled布尔如果为true则禁用输入框falserequired布尔定义输入框是否为必添falsemissingMessage字符串当输入框为空时提示的文本必填formatterfunction格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串——parserfunction分析字符串的函数,这个函数以’date’为参数并返回一个日期——2.3事件事件名参数描述onSelectdate当选择一个日期时触发2.4方法方法名参数描述destroynone销毁组件disablenone禁用输入框.enablenone启用输入框3ComboBox(组合框)3.1实例3.1.1代码jQueryEasyUI
disable();
>disable
enable();>enable2.1.2效果图2.2参数属性名类型描述默认值currentText字符串为当前日期按钮显示的文本TodaycloseText字符串关闭按钮显示的文本Closedisabled布尔如果为true则禁用输入框falserequired布尔定义输入框是否为必添falsemissingMessage字符串当输入框为空时提示的文本必填formatterfunction格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串——parserfunction分析字符串的函数,这个函数以’date’为参数并返回一个日期——2.3事件事件名参数描述onSelectdate当选择一个日期时触发2.4方法方法名参数描述destroynone销毁组件disablenone禁用输入框.enablenone启用输入框3ComboBox(组合框)3.1实例3.1.1代码
enable();
>enable
2.1.2效果图
2.2参数
属性名
类型
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
关闭按钮显示的文本
Close
disabled
如果为true则禁用输入框
required
定义输入框是否为必添
missingMessage
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
分析字符串的函数,这个函数以’date’为参数并返回一个日期
2.3事件
事件名
参数
onSelect
date
当选择一个日期时触发
2.4方法
方法名
destroy
none
销毁组件
disable
禁用输入框.
enable
启用输入框
3ComboBox(组合框)
3.1实例
3.1.1代码
href="../themes/default/easyui.css">functionloadData(){$('#cc').combobox({url:'combobox_data.json',//该文件内容在下面valueField:'id',textField:'text'});}functionsetValue(){$('#cc').combobox('setValue','2');}functiongetValue(){varval=$('#cc').combobox('getValue');alert(val);}functiondisable(){$('#cc').combobox('disable');}functionenable(){$('#cc').combobox('enable');}$(function(){$('#cc').combobox({width:150,listWidth:150,listHeight:100,//valuefield:'value',//textField:'text',//url:'combobox_data.json',editable:false});});
functionloadData(){
$('#cc').combobox({
url:
'combobox_data.json',//该文件内容在下面
valueField:
'id',
textField:
'text'
functionsetValue(){
$('#cc').combobox('setValue','2');
functiongetValue(){
varval=$('#cc').combobox('getValue');
alert(val);
$('#cc').combobox('disable');
$('#cc').combobox('enable');
150,
listWidth:
listHeight:
100,
//valuefield:
'value',
//textField:
'text',
//url:
'combobox_data.json',
editable:
10px;">loadDatasetValueonclick="getValue()">getValuedisableenableOptions:==请选择==苹果香蕉鸭梨西瓜芒果combobox_data.json内容:[{"id":1,"text":"text1"},{"id":2,"text":"text2"},{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4"},{"id":5,"text":"text5"}]3.1.2效果图3.2参数属性名类型描述默认值width数字组件的宽度autolistWidth数字下拉列表的宽度nulllistHeight数字下拉列表的高度nullvalueField字符串基础数据值名称绑定到这个组合框valuetextField字符串基础数据的字段的名称绑定到这个组合框texteditable布尔定义是否可以直接到文本域中键入文本trueurl字符串加载列表数据的远程URLnull3.3事件事件名参数描述onLoadSuccessnone当远程数据成功加载时触发onLoadErrornone当远程数据加载失败时触发onSelectrecord当用户选择了一个列表项时触发onChangenewValue,oldValue当文本域字段的值改变时触发3.4方法方法名参数描述selectvalue选择下拉列表中的一项setValueparam设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。getValuenone获取字段值reloadurl请求远程列表数据.4Dialog(对话框)4.1实例4.1.1代码jQueryEasyUI
10px;">loadData
setValueonclick="getValue()">getValuedisableenableOptions:==请选择==苹果香蕉鸭梨西瓜芒果combobox_data.json内容:[{"id":1,"text":"text1"},{"id":2,"text":"text2"},{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4"},{"id":5,"text":"text5"}]3.1.2效果图3.2参数属性名类型描述默认值width数字组件的宽度autolistWidth数字下拉列表的宽度nulllistHeight数字下拉列表的高度nullvalueField字符串基础数据值名称绑定到这个组合框valuetextField字符串基础数据的字段的名称绑定到这个组合框texteditable布尔定义是否可以直接到文本域中键入文本trueurl字符串加载列表数据的远程URLnull3.3事件事件名参数描述onLoadSuccessnone当远程数据成功加载时触发onLoadErrornone当远程数据加载失败时触发onSelectrecord当用户选择了一个列表项时触发onChangenewValue,oldValue当文本域字段的值改变时触发3.4方法方法名参数描述selectvalue选择下拉列表中的一项setValueparam设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。getValuenone获取字段值reloadurl请求远程列表数据.4Dialog(对话框)4.1实例4.1.1代码
onclick="getValue()">getValuedisable
Options:
==请选择==
苹果
香蕉
鸭梨
西瓜
芒果
combobox_data.json内容:
[{
"id":
1,
"text":
"text1"
},{
2,
"text2"
3,
"text3",
"selected":
4,
"text4"
5,
"text5"
}]
3.1.2效果图
3.2参数
组件的宽度
listWidth
下拉列表的宽度
null
listHeight
下拉列表的高度
valueField
基础数据值名称绑定到这个组合框
value
textField
基础数据的字段的名称绑定到这个组合框
text
editable
定义是否可以直接到文本域中键入文本
url
加载列表数据的远程URL
3.3事件
onLoadSuccess
当远程数据成功加载时触发
onLoadError
当远程数据加载失败时触发
record
当用户选择了一个列表项时触发
onChange
newValue,oldValue
当文本域字段的值改变时触发
3.4方法
select
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
获取字段值
reload
请求远程列表数据.
4Dialog(对话框)
4.1实例
4.1.1代码
href="../themes/default/easyui.css">$(function(){$('#dd').dialog({title:'对话框',collapsible:true,minimizable:true,maximizable:true,resizable:true,toolbar:[{text:'Add',iconCls:'icon-add',handler:function(){alert('add');}},'-',{text:'Save',iconCls:'icon-save',handler:function(){alert('save');}}],buttons:[{text:'Ok',iconCls:'icon-ok',handler:function(){alert('ok');}},{text:'Cancel',handler:function(){$('#dd').dialog('close');}}]});});functionopen1(){$('#dd').dialog('open');}functionclose1(){$('#dd').dialog('close');}
$('#dd').dialog({
title:
'对话框',
collapsible:
minimizable:
maximizable:
resizable:
toolbar:
text:
'Add',
iconCls:
'icon-add',
handler:
function(){
alert('add');
},'-',{
'Save',
'icon-save',
alert('save');
}],
buttons:
'Ok',
'icon-ok',
alert('ok');
'Cancel',
$('#dd').dialog('close');
functionopen1(){
$('#dd').dialog('open');
functionclose1(){
10px;">open1close1style="padding:5px;width:400px;height:200px;">dialogcontent.dialogcontent.
10px;">open1
close1
style="padding:5px;width:400px;height:200px;">dialogcontent.
5px;width:
400px;height:
200px;">
dialogcontent.
4.1.2效果图
4.2参数
title
对话框的标题文本
NewDialog
collapsible
定义是否显示可折叠按钮
minimizable
定义是否显示最小化按钮
maximizable
定义是否显示最大化按钮
resizable
定义对话框是否可编辑大小
toolbar
数组
对话框上的工具条,每个工具条包括:
text,
iconCls,
disabled,
handler
etc.
buttons
对话框底部的按钮,每个按钮包括:
4.3事件
Dialog的事件和窗口(Window)的事件相同。
4.4方法
Dialog的函数方法和窗口(Window)的相同。
5Messager(提示框)
5.1实例
5.1.1代码
href="../themes/default/easyui.css">functionshow1(){$.messager.show({title:'MyTitle',msg:'Messagewillbeclose 展开阅读全文 相关资源 《城市轨道交通专用通信系统维护》教学课件合集..pptx 病理学技术(师)专业知识题库附答案(520题).docx 《向量的数乘运算》教案、导学案、课后作业.docx 2016年河南省公务员考试职位表.doc 2021年粤教粤科版四年级科学下册第三单元《运动与力》课件.pptx 粤教粤科版科学四年级上册全册教学课件.ppt 【精品资料】职业创新创业---第五章.pptx 八年级美术下册主题策划第8课做一回服装设计师课件.ppt 创新思维导论专题三--类比创新法.ppt 服装设计基础PPT课件.ppt 猜你喜欢 本科内科护理学期末大总结.docx 经贸科员岗位竞聘演讲范文汇报报告范文.docx 国外行zd基本原则研究论文.docx 精编范文兔与猫阅读答案word范文模板 21页.docx 地下室外墙防水方案教学教材.docx 常用中药处方应付及用法.docx SPSS多元线性回归分析教程.docx 赤壁赋教案8篇.docx 汉语言文学专业古代汉语考试大纲.docx 相关搜索 最准确齐全完善Easyui 教程 准确 齐全 完善 Easyui 当前位置:首页 > 解决方案 > 学习计划
functionshow1(){
$.messager.show({
'MyTitle',
msg:
'Messagewillbeclose
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1