不依赖其他组件
1. draggable(拖动)组件
存在四个事件,拖动前后,拖动过程,拖动结束,需要查文档
主要属性:proxy,存在回调函数
proxy:'clone',
//source为当前标签的对象
proxy:function(source){
var p = ('<div style="width:400px;height:200px;border:1px dashed')
p.html($source).html()).appendTo('body');
return p;
}
2. droppable(放置)组件 需要配合拖动组件使用
对应四个事件:被拖拽元素 在区域内触发/经过区域时触发/离开区域时触发/放入区域内触发(松开鼠标)
3.Resizable(调整大小)组件
类似可以拉动大小的文本框
onStartResize: 在开始改变大小的时候触发
onResize: 在调整大小期间触发
onStopResize: 在停止改变大小的时候触发
4. LinkButton(按钮)组件
按钮的样式(可添加对应图标(位置),选中后的颜色等)
对应属性看文档
5. ProgressBar(进度条)组件
对应属性设置高度(height)和宽度(width),值(value),和显示文本(text)
//事件
onChange : 值更改的时候触发
参数:newValue,oldValue
//方法
options 返回属性对象
resize 组件大小
getValue 返回当前进度值
setValue 设置一个新的进度值
6. Panel(面板)组件
存在大量的属性,需要看文档
在面板上添加工具
属性: tool 两种形式(放置小图标)调用id或数组
调用id:
<p id='dd' ></p>
在属性上添加:tools:'#dd'
调用数组
在属性上添加:
tool:[{
iconCls:'icon-help',
//点击后触发事件
handler:function(){
alert("help");
}
}]
属性: href 从url读取远程数据并且显示到面板,默认为false
属性: loadingMessage: 从远程读取数据回之前加载的信息
属性: extracor 定义如何从ajax应答数据中提取内容,返回提取数据
extractor:function(data){
return data.substring(0,3);
}
事件(返回false可以取消后续操作)
onBeforeLoad / onLoad 在加载远程数据之前触发/加载时触发
onBeforeOpen / onOpen 在打开面板之前触发/之后触发
onBeforeClose / onClose 在关闭面板之前触发/之后触发
onBeoreDestroy / onDestroy 在面板销毁之前触发/销毁之后触发
.....
方法,具体看文档
refresh 刷新面板来重载远程数据,如果'href'属性游新配置,它将重些旧的'href'属性
依赖其他组件
7. Tabs(Tab)组件
1.png
属性列表
width 选项卡容器宽度 默认值为auto
height 选项卡容器高度 默认值为auto
plain 设置为true时,讲不显示控制面板背景
tools 添加工具
toolPosition 工具栏的位置(上下左右)
tabPosition 标签tab的位置(上下左右)
headerWidth 设置tab宽度---配套tabPosition使用
selected 默认显示面板第0个(num)
showHeader 默认为true,显示tab页标题
事件列表
事件名 传参 说明
onSelect title,index 用户在选择一个选项卡面板的时候触发
onUnselect title,index 用户在取消选项一个选项卡面板的时候触发
onBeforeClose title,index 在选项卡面板关闭的时候触发,返回false取消关闭
onClose title,index 在用户关闭一个选项卡面板的时候触发
onContextMenu title,index 在右键点击一个选项卡面板的时候触发
---->需要配合方法
onLoad panel 在ajax选项卡面板加载完远程数据的时候触发
onAdd title,index 在添加一个新选项卡面板的时候触发
onUpdate title,index 在更新一个选项卡面板的时候触发
方法列表
方法名 参数 说明
options none 返回选项卡属性
tabs none 返回所有选项卡面板对象
resize none 调整选项卡容器大小和布局(用于面板调整后有误,需要调整大小)
例子: $("#box").tabs('resize')
add options(对象) 添加一个新选项卡面板
例子: $("#box").tabs('add',{
//添加一些属性
})
close which 关闭一个选项卡面板which参数可选项面板的标题或索引
getTab which 获取指定选项卡对象
getTabIndex tab 获取指定选项卡面板的索引
getSelected 获取已选中的面板
......
在tabs选项卡面板属性(add方法)
1.png
2.png
8. Accordion(分类)组件
3.png
其中有容器属性/面板属性
容器属性
animate 展开和折叠时是否显示动画效果
multiple 默认为true,同时显示多个面板
selected 默认第0个,初始化显示的面板
事件列表
onSelect/onUnselect 在面板被选中/取消选中触发
onAdd/onRemove 在添加新面板/移除面板时触发
onBeforeRemove 移除面板之前触发
方法列表(和tab选项卡雷同,具体看文档 )
面板属性(参考面板属性,继承过来的)
9. Layout(布局)组件
依赖panel(面板)和resizable(调整大小)组件
4.png
面板属性(data-options中添加对应属性)
5.png
方法列表
6.png
9. Window(窗口)组件
7.png
具体看文档
10.Dialog(对话框)组件
依赖于window(窗口)组件,linkbutton组件
toolbar 设置对话框窗口顶部工具栏(类似tool功能)
buttons 对话框窗口底部按钮(数组形式)
11. Messager(消息窗口)组件
依赖window(窗口)组件,progressbar(进度条)组件
不同的消息框风格,包括 alert(警告框),confirm(确认框),prompt(提示框),progress(进度框)等
所有消息框都是异步的,用户可以在交互消息之后使用回调函数去处理结果
属性列表
ok 确认按钮文本
cancel 取消按钮文本
方法列表
$.messager.alert(
'警告框',
' 这是一个提示!',
'info图标符号',function(){
alert('处理异步信息')
})
$.messager.confirm(
'确认框',
' 这是一个提示!',
function(flag){
alert('处理异步信息')
})
$.messager.prompt(
'提示框',
' 请输入你的名字',
function(content){
alert('处理异步信息')
})
$.messager.progress(
title:'执行中',
msg:'努力上传中',
text:'{value}%'
interval:100 //每次速度更新间隔时间,默认300毫秒
})
$.messager.show(
title:'我的消息',
msg:'消息5秒后关闭',
timeout:5000,
//其他看文档
})
方法定义
bar: 获取进度条对象..messager.progress('close')
12. MenuButton(菜单按钮)组件
依赖Menu(菜单)组件和LinkButton(按钮)组件
9.png
实例:
<a href="javascript:void(0)"id="edit">编辑</a>
<div id="box" style="width: 150px">
<div>剪切</div>
<div>复制</div>
<div>退出</div>
</div>
$("#edit").menubutton({
menu:'#box',
iconCls:'icon-edit'
})
其他参考文档
13. SplitButton(分割按钮)组件
依赖Menu(菜单)和LinkButton(按钮)组件
10.png
和MenuButton(菜单按钮)区别在于,
该组件需要的鼠标需要放在下箭头才显示下拉菜单
14. Pagination(分页)组件
依赖于LinkButton(按钮)组件
pagination属性
total 总记录数,在分页控件创建时初始的值,默认值为1
pageSize 每页显示条数,默认值为10
pageNumber 在分页控件创建的时候显示的页数.默认值为1
pageList 用户可以改变页面大小
pageList属性定义了页面导航展示的页码.默认值为[10,20,30,50]
loading 定义数据是否正在载入,默认false
buttons 自定义按钮,1.属性值(iconCls,handler(触发函数)) 2.buttons:'#btndiv'
12.png
事件列表
11.png
方法列表
13.png
15. searchBox(搜索框)组件
属性列表
width 组件宽度
height 组件高度
prompt 在输入框中显示提示信息
value 输入的值
menu 搜索类型菜单(menu:'#box'),
例子: <div id='box'><div>书名</div></div>
searcher(value,name) 函数,点击搜索,触发
disabled 是否禁用搜素框,默认false
方法列表
14.png
16.ValidateBox(验证框)组件
属性列表
15.png
16.png
方法列表
17.png
自定义验证
$.extend($.fn.validatebox.defaults.rules,{
minLength:{
validator:function (value, param) {
return value.length >= param[0];
},
message:'请长度不小于{0}的字符'
}
})
//调用
$('#email').validatebox({
required:true,
validType: 'minLength[5]'
})
17 Combo(自定义下拉框)组件
依赖于ValidateBox(验证框)组件
属性列表
18.png
方法列表
20.png
21.png
事件列表
19.png
18. NumberBox(数值输入框)组件
ValidateBox(验证框)组件
属性列表
22.png
23.png
事件列表
onChange newvalue,oldvalue 当字段值更改的时候触发
方法列表
24.png
18. Calendar(日历)组件
属性列表
25.png
26.png
方法列表(具体看文档)
事件列表(具体看文档)
19. Date(日期输入框)组件
依赖Combo(自定义下拉框)和Calendar(日历)
属性列表
27.png
28.png
事件列表(看文档)
方法列表(看文档)
20. Spinner(微调)组件
依赖ValidateBox(验证框)组件
Spinner(微调)组件是其他两款高级微调组件的基础组件,默认情况下无法微调,不支持class方式
属性列表
29.png
事件列表
30.png
方法列表
31.png
32.png
21. NumberSpinner(数字微调)组件
对Spinner(微调)组件继承,扩充
22. TimeSpinner(时间微调)组件
对Spinner(微调)组件继承,扩充
属性列表
33.png
方法列表
34.png
23. DateTimeBox日期时间输入框)组件
依赖Date(日期输入框)组件和TimeSpinner(时间微调)组件
35.png
属性列表
36.png
方法列表
38.png
37.png
24. Slider(滑动条)组件
依赖于Draggable(拖动)组件
属性列表
39.png
40.png
事件列表
41.png
方法列表
42.png
25. Form(表单)组件
<form id="box" method="post">
<p>账号：<input type="text" name="name" class="easyui-validatebox" ></p>
<p>电子邮件：<input type="text" name="email" class="easyui-datebox" ></p>
</form>
$(function(){
$('#box').form({
url: 'content.php',
onSubmit : funtion(param){
//提交额外的参数
param.phone = '123456';
},
success : function(data){
alert(data);
},
});
});
属性列表
url 提交表单动作的URL地址，默认值null
事件列表
方法名 传参 说明
onSubmit param 在提交之前触发，返回false可以终止提交
success data 在表单提交成功后触发
onBeforeLoad param 在请求加载数据之前触发，返回false可以停止该动作
onLoadSuccess data 在表单数据加载完成后触发
onLoadError none 在表单数据加载出现错误的时候触发
方法列表
1560251734(1).png
实例submit：
$('#box').form('submit',{
//刷新提交
});
实例load：
$('#box').form('load',{
name : '海泽王',
email : 'haizewang@qq.com',
});
实例validate：
$('#box').form({
url : 'content.php',
onSubmit : function(param){
param.code = 'd',
//表单验证通过才能提交
return $(this).form('validate');
}
})
26. DataGrid（数据表格）组件【1】(加载和分页功能显示)
组件依赖于Panel（面板）、Resizeable（调整大小）、LinkButton（按钮）、Pageination（分页）组件。
前端分页传回的格式:
total: '',
page:'',
后台需要分页中的数据格式:
{
total : 查询到的数量,
rows : [ {},{},]
}
实例:
<table id="box"></table>
$('#box').datagrid({
url:"content.json",
//表单中的表头
columns:[[
{field: 'user',title:'帐号', },
{field: 'email',title:'邮件',},
{field: 'date',title:'注册时间', },
]],
pagination:true, //分页
})
DataGrid（数据表格）组件【2】(排序)
43.png
$('#box').datagrid({
// title:'用户列表',
url:"content.json",
columns:[[
{
field: 'user',
title:'帐号',
//设置当前字段排序
sortable:true,
//自定义排序(一般不用)
/*
sorter:function (a,b) {
//服务器端排序不可以开启
}*/
},
{field: 'email', title:'邮件',sortable:true},
{field: 'date', title:'注册时间',sortable:true,},
]],
pagination:true, //分页
//支持和后台关联单独使用列
/*sortName:'date',
sortOrder:'DESC',*/
//是否进行服务器端排序
remoteSort:false,
//是否多列排序(一般不用)
multiSort:false,
})
DataGrid（数据表格）组件【3】(样式设置)
44.png
45.png
46.png
DataGrid（数据表格）组件【4】(工具栏和查询)
47.png
<div id='box'>
查询帐号:<input type='text' name='user' >
创建时间从:<input type='text' name='date-from' class='easyui-datebox' editable='false'>
到:<input type='text' name='date-to' class='easyui-datebox' editable='false'>
<a class='easyui-linkbutton' onclick='obj.search()'>查询</a>
</div>
obj = {search:function(){
$('#box').datagrid('load',{
user : $.trim($("input[name='user']").val()), //trim空格过滤
}),
}
}
DataGrid（数据表格）组件【5】(新增功能)
51.png
48.png
49.png
50.png
<div id='box'>
</div>
obj = {search:function(){
$('#box').datagrid('load',{
user : $.trim($("input[name='user']").val()), //trim空格过滤
}),
}
}
DataGrid（数据表格）组件【6】(修改和删除功能)
52.png
双击修改
按钮修改
选中所在行删除
DataGrid（数据表格）组件【7】(增删改后台交互)
53.png
通过ajax和后台交互
DataGrid（数据表格）组件【8】(其他功能:冻结列,格式化,右击菜单)
表单事件
54.png
DataGrid（数据表格）组件【9】()
55.png
56.png
57.png
58.png
表单方法
59.png
60.png
27. ComboBox（下拉列表框）组件
该组件依赖于Combo(自定义下来框)组件
属性列表
63.png
64.png
65.png
下拉列表框方法
62.png
下拉列表框事件
61.png
28. ComboGrid（数据表格下拉框）组件 <具体看文档>
该组件依赖于Combo(自定义下来框)和DataGrid(数据表格)组件
29. PropertyGird（属性表格）组件 <具体看文档>
该组件依赖于DataGrid(数据表格)组件
66.png
30. Tree（树）组件【1】(基本知识)
该组件依赖于Draggable(拖动)和Droppable(放置)组件
67.png
静态导航
<ul class="easyui-tree">
<li>
<span>系统管理</span>
<ul>
<li>
<span>主机信息</span>
<ul>
<li>版本信息</li>
<li>数据库信息</li>
</ul>
</li>
<li>更新信息</li>
<li>重置信息</li>
</ul>
</li>
<li>
<span>会员管理</span>
<ul>
<li>新增会员</li>
<li>审核会员</li>
</ul>
</li>
</ul>
动态导航
json数据 :
[
{ "text": "系统管理",
"children": [
{"text": "更新信息"},
{"text": "程序信息"},
{"text": "主机信息",
"children": [
{"text": "版本信息"},
{"text": "数据库信息"}
]}
]},
{"text": "会员管理",
"children": [
{ "text": "更新会员"},
{"text": "审核会员"}
]}
]
前端:
<ul id='box'></ul>
javascript加载 :
$(function () {
$('#box').tree({
url:'tree.json'
})
});
属性列表
68.png
Tree（树）组件【2】(异步加载)
数据库设置,根据id进行分级
id text tid
1 系统管理 0
2 会员管理 0
3 主机管理 1
4 版本信息 3
5 数据库信息 3
6 更新信息 1
7 程序信息 1
8 新增会员 2
9 审核会员 2
异步加载会传回点击的id值
前端:
<ul id='box'></ul>
javascript加载 :
局部加载:
$(function () {
$('#box').tree({
url:'url'
})
});
全部加载:
$(function () {
$('#box').tree({
url:'url'
onLoadSuccess:function(node,data){
if(this.sate == 'closed){
$('#box').tree('expandAll');
}
}
})
});
数据库:
id = request.post('id')
object.filter(tid=id)
Tree（树）组件【3】(事件列表)
事件列表
很多事件的回调函数都包含'node'参数,其具备如下属性:
id 绑定节点的标识值
text 显示的节点文本
iconCls 显示的节点图标CSS类ID
checked 该节点是否被选中
state 节点状态, 'open' 或 'closed'
attributes 绑定该节点的自定义属性
target 目标DOM对象
69.png
Tree（树）组件【4】(方法列表)
70.png
71.png
72.png
31. Tree（树形下拉框）组件
该组件依赖Combo(下拉框)和Tree(树)组件
73.png
前端:
<input type='text' id='box'>
javascipt:
$('#box').combotree({
url:'ulrl',
});
属性列表(该控件的属性完全继承子combo(自定义下来框)和tree(树形控件))
editable 定义用户是否可以直接输入文本到字段中.默认为false
该控件的事件完全继承子combo(自定义下来框)和tree(树形控件)
方法列表(树形下拉框方法扩展自combo(自定义下来框))
74.png
32. TreeGrid（树形表格）组件
该组件依赖DataGrid(数据表格)组件
75.png
属性列表
75.png
json:
[
{'id' :1,'name':'系统管理',date:'2015-10-10,
'children': [{ 'id' : 3, 'name':'主机信息','date':'2015-10-10'}]
},
{'id' :1,'name':'会员管理',date:'2015-10-10,
'children': [{ 'id' : 2, 'name':'认证审核','date':'2015-10-10'}]
},
]
前端:
<table class='easyui-treegrid' url:'',idField:'id',treeField:'name'>
<thread>
<tr>
<th data-options='field:"name" '>菜单名称</th>
</tr>
</thread>
</table>
动态方式:
前端:
<table id="box">
javascript:
$('#box').treegrid({
url:'url',
idField : 'id',
treeField : 'name',
columns : [[
{ field : 'name',title : '菜单名称',width : 180,},
{ field : 'date',title : '创建时间',width : 180,},
]]
});
