目录
1Accordion(可折叠标签) (3)
1.1实例 (3)
1.2参数 (4)
2DateBox(日期框) (4)
2.1实例 (4)
2.2参数 (7)
2.3事件 (7)
2.4方法 (7)
3ComboBox(组合框) (7)
3.1实例 (7)
3.2参数 (10)
3.3事件 (10)
3.4方法 (10)
4Dialog(对话框) (10)
4.1实例 (10)
4.2参数 (12)
4.3事件 (13)
4.4方法 (13)
5Messager(提示框) (13)
5.1实例 (13)
5.2方法 (16)
5.3扩展 (17)
6NumberBox(数字框) (17)
6.1实例 (17)
6.2参数 (18)
7ValidateBox(验证框) (18)
7.1实例 (18)
7.2参数 (20)
7.3方法 (20)
7.4扩展 (21)
8Pagination(分页) (21)
8.1实例 (21)
8.2参数 (23)
8.3事件 (23)
9Window(窗口) (23)
9.1实例 (24)
9.2参数 (26)
9.3事件 (26)
9.4方法 (26)
10Panel(面板) (26)
10.1实例 (27)
10.2参数 (28)
10.3事件 (29)
10.4方法 (30)
11Tabs(标签) (30)
11.1实例 (30)
11.2参数 (33)
11.3事件 (33)
11.4方法 (33)
11.5标签面板属性 (33)
12Tree(树) (34)
12.1实例 (34)
12.2参数 (37)
12.3事件 (37)
12.4方法 (38)
13Layout(布局) (38)
13.1实例 (38)
13.2参数 (40)
13.3方法 (40)
14Datagrid(数据表) (40)
14.1实例 (40)
14.2参数 (44)
14.3Column参数 (45)
14.4事件 (46)
14.5方法 (47)
1Accordion(可折叠标签)
1.1实例
1.1.1代码
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.
style="padding: 10px;">content2
1.1.2效果图
1.1.3 扩展
实例html代码中
此行也可写成
,并且将js代码全部去掉,效果图是一样的。
1.2参数
1.2.1容器参数
参数名称参数
类型
描述默认值
width 数字可折叠标签的宽度。auto height 数字可折叠标签的高度。auto
fit 布尔是否使可折叠标签自动缩放以适应父容器的大小,当为true
时width和height参数将失效。
false
border 布尔是否显示边界线。true 1.2.2面板参数
可折叠标签面板继承自面板(panel),许多属性定义在
标签里,下面的属性就是如此:参数名称参数类型描述默认值selected 布尔设置可折叠标签中默认展开的标签页false
2DateBox(日期框)
2.1实例
2.1.1代码
"https://www.wendangku.net/doc/888537561.html,/TR/html4/loose.dtd">
href="../themes/default/easyui.css">
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回 ''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return'';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
2.1.2效果图
2.2参数
属性名类型描述默认值currentText 字符串为当前日期按钮显示的文本Today closeText 字符串关闭按钮显示的文本Close disabled 布尔如果为true则禁用输入框false required 布尔定义输入框是否为必添false missingMessage 字符串当输入框为空时提示的文本必填formatter function 格式化日期的函数,这个函数以’date’为参数,并
——
且返回一个字符串
parser function 分析字符串的函数,这个函数以’date’为参数并返
——
回一个日期
2.3事件
事件名参数描述
onSelect date 当选择一个日期时触发
2.4方法
方法名参数描述
destroy none 销毁组件
disable none 禁用输入框.
enable none 启用输入框
3ComboBox(组合框)
3.1实例
3.1.1代码
href="../themes/default/easyui.css">
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
});
}
function setValue(){
$('#cc').combobox('setValue','2');
}
function getValue(){
var val = $('#cc').combobox('getValue');
alert(val);
}
function disable(){
$('#cc').combobox('disable');
}
function enable(){
$('#cc').combobox('enable');
}
$( function() {
$('#cc').combobox( {
width:150,
listWidth:150,
listHeight:100,
//valuefield:'value',
//textField:'text',
//url:'combobox_data.json',
editable:false
});
});
Options:
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 数字组件的宽度auto listWidth 数字下拉列表的宽度null listHeight 数字下拉列表的高度null valueField 字符串基础数据值名称绑定到这个组合框value textField 字符串基础数据的字段的名称绑定到这个组合框text editable 布尔定义是否可以直接到文本域中键入文本true
url 字符串加载列表数据的远程URL null
3.3事件
事件名参数描述
onLoadSuccess none 当远程数据成功加载时触发onLoadError none 当远程数据加载失败时触发
onSelect record 当用户选择了一个列表项时触发onChange newValue, oldValue 当文本域字段的值改变时触发
3.4方法
方法名参数描述
select value 选择下拉列表中的一项
setValue param 设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript 对象,如果是对象,必须包含两个属性各对应valueField和TextField属
性。
getValue none 获取字段值
reload url 请求远程列表数据.
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');
}
}]
});
});
function open1(){
$('#dd').dialog('open');
}
function close1(){
$('#dd').dialog('close');
}
style="padding: 5px; width: 400px; height: 200px;">
dialog content.
dialog content.
dialog content.
dialog content.
dialog content.
dialog content.
dialog content.
dialog content.