--easy ui 组件依赖关系
menu菜单组件 .基础类
panel面板组件 . 基础类
easyloader加载器 . 基础类
droppable可放置 .基础类
droppable可放置 .基础类
resizable可调整尺寸 . 基础类
tooltip提示框 . 基础类
easyloader加载器 .基础类
draggable可拖动 .基础类
calendar日历 .基础类
form表单 .基础类
parser解析器 基础类
linkbutton链接按钮 . 基础类
menubutton菜单按钮 依赖 menu linkbutton
splitbutton 分割按钮 依赖menubutton
layout布局组件 依赖 panel resizable
accordion折叠面板组件 依赖panel
tabs标签页/选项卡组件 依赖panel linkbutton
progressBar进度条 依赖none
searchbox搜索框 依赖menubutton
pagination分页 依赖linkbutton
tree树 依赖draggable droppable
propertygrid属性网格 依赖datagrid
datagrid数据网格 依赖panel resizable linkbutton pagination
messager消息框 依赖window linkbutton progressbar
dialog对话框 依赖window linkbutton
numberbox数字框 依赖validatebox
datebox日期框 依赖combo calendar
datetimebox日期时间框 依赖datebox timespinner
spinner微调器 依赖validatebox
numberspinner数字微调器 依赖spinner numberbox
timespinner时间微调器 依赖spinner
slider滑动 依赖draggable
window窗口 依赖draggable resizable panel
combogrid组合网格 依赖combo datagrid
combo组合 依赖validatebox panel
combobox组合框 依赖combo
combotree组合树 依赖combo tree
validatebox验证码 依赖tooltip
treegrid树形网格datagrid
--easy ui 概述
easy ui重要的概念就是依赖,重写
注意
:一个组件依赖另一个组件,类似于java中的继承,通常easy ui很少重写父类的属性.
当要修改组件的默认值时;可以通过$.fn.menu.defaults 从写默认值.
依赖方式实例:
//datetimebox本身没有事件,但是他继承了datebox,datebox继承了combo,所以datetimebox就可以使用combo的事件,实现相应的功能
$('#lizi').datetimebox({
属性1:'111',
...
onHidePanel:function(){
//事件处理方式;
}
});
重写方式实例:(给datagrid的属性添加datimebox的功能)
//重写datetimebox定义代码：$.extend($.fn.datagrid.defaults.editors, {datetimebox : {init : function(container, options) {var box = $('<input />').appendTo(container);box.datetimebox(options);return box;},getValue : function(target) {return $(target).datetimebox('getValue');},setValue : function(target, value) {$(target).datetimebox('setValue', value);},resize : function(target, width) {var box = $(target);box.datetimebox('resize', width);},destroy : function(target) {$(target).datetimebox('destroy');}}});
（2）调用代码：
{field:'fieldName',title:'标题',width:140,align:'center',sortable:true,hidden:false,editor:{type:'datetimebox' , options:{editable:false }}}
注册方式实例:
的
4个重点
- 加载方式
- 属性
- 事件
- 方法
详解:
加载方式; class加载方式,js加载方式(比较常用)
class方式:
<div id="lizi" class="easyui-menu" style="width:120px;"></div>
js方式:
$('#lizi').menu({
onClick:function(item){
//...
}
});
<div id="lizi"></div>
注意:通常easyuijs加载方式需要注册,要写在
$(function (){
//内容
}); 中
属性加载实例:
$('#lizi').menu({
id:'id',
text:'标题',
....
});
事件加载方式:
$('#lizi').menu({
id:'id',
text:'标题',
....
onclick:function(){
//事件处理...
}
});
方法加载方式:
var fanhuizhi = $('#lizi').menu('options');