easyui常用

<link type="text/css" rel="stylesheet" href="js/jquery-easyui/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="js/jquery-easyui/themes/icon.css"/>
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

1、Layout（布局）

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

布局是以面板为基础创建的。所有的布局面板都支持异步加载URL内容。使用异步加载技术，用户可以使自己的布局页面显示的内容更多更快。

类似于

1. $('#cc').layout('add',{   
2.     region: 'west',   
3.     width: 180,   
4.     title: 'West Title',   
5.     split: true,   
6.     tools: [{   
7.         iconCls:'icon-add',   
8.         handler:function(){alert('add')}   
9.     },{   
10.         iconCls:'icon-remove',   
11.         handler:function(){alert('remove')}   
12.     }]   
13. });

的语句写在$(function(){里});

属性：

布局属性

 

属性名	属性值类型	描述	默认值
fit	boolean	如果设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自动最大。	false

 

区域面板属性

 

属性名	属性值类型	描述	默认值
title	string	布局面板标题文本。	null
region	string	定义布局面板位置，可用的值有：north, south, east, west, center。
border	boolean	为true时显示布局面板边框。	true
split	boolean	为true时用户可以通过分割栏改变面板大小。	false
iconCls	string	一个包含图标的CSS类ID，该图标将会显示到面板标题上。	null
href	string	用于读取远程站点数据的URL链接	null
collapsible	boolean	定义是否显示折叠按钮。（该属性自1.3.3版开始可用）	true

方法

方法名	方法属性	描述
resize	none	设置布局大小。
panel	region	返回指定面板，'region'参数可用值有：'north','south','east','west','center'。
collapse	region	折叠指定面板。'region'参数可用值有：'north','south','east','west'。
expand	region	展开指定面板。'region'参数可用值有：'north','south','east','west'。
add	options	添加指定面板。属性参数是一个配置对象，更多细节请查看选项卡面板属性。
remove	region	移除指定面板。'region'参数可用值有：'north','south','east','west'。

2、MenuButton（菜单按钮）

菜单按钮是下拉菜单的一部分。它伴随着linkbutton和menu组件。在用户点击linkbutton之前菜单是隐藏的，当用户用鼠标点击或移动到linkbutton上面的时候菜单才会显示。

1. <a href="javascript:void(0)" id="mb" class="easyui-menubutton"    
2.         data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>  
3. <div id="mm" style="width:150px;">  
4.     <div data-options="iconCls:'icon-undo'">Undo</div>  
5.     <div data-options="iconCls:'icon-redo'">Redo</div>  
6.     <div class="menu-sep"></div>  
7.     <div>Cut</div>  
8.     <div>Copy</div>  
9.     <div>Paste</div>  
10.     <div class="menu-sep"></div>  
11.     <div data-options="iconCls:'icon-remove'">Delete</div>  
12.     <div>Select All</div>  
13. </div>  

 

属性名	属性值类型	描述	默认值
menu	string	用来创建一个对应菜单的选择器。	null
iconCls	string	显示在按钮文字左侧的图标(16x16)的CSS类ID。	null

通过标签创建菜单，给<div/>标签添加一个名为'easyui-menu'的类ID。每个菜单项都通过<div/>标签创建。我们可以添加'iconCls'属性来给菜单项定义一个图标显示到菜单项的左侧。添加'menu-sep'类ID菜单项将会生成一个菜单分割线。

3、Messager（消息窗口）

消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

方法名	方法参数	描述
$.messager.show	options	在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象： showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。 showSpeed：定义窗口显示的过度时间。默认：600毫秒。 width：定义消息窗口的宽度。默认：250px。 height：定义消息窗口的高度。默认：100px。 title：在头部面板显示的标题文本。 msg：显示的消息文本。 style：定义消息窗体的自定义样式。 timeout：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒。 代码示例： $.messager.show({ title:'我的消息', msg:'消息将在5秒后关闭。', timeout:5000, showType:'slide' }); // 消息将显示在顶部中间 $.messager.show({ title:'我的消息', msg:'消息将在4秒后关闭。', showType:'show', style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } });
$.messager.alert	title, msg, icon, fn	显示警告窗口。参数： title：在头部面板显示的标题文本。 msg：显示的消息文本。 icon：显示的图标图像。可用值有：error,question,info,warning。 fn: 在窗口关闭的时候触发该回调函数。 代码示例： $.messager.alert('我的消息','这是一个提示信息！','info');
$.messager.confirm	title, msg, fn	显示一个包含“确定”和“取消”按钮的确认消息窗口。参数： title：在头部面板显示的标题文本。 msg：显示的消息文本。 fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。 代码示例 $.messager.confirm('确认对话框', '您想要退出该系统吗？', function(r){ if (r){     // 退出操作; } });

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4、Dialog（对话框窗口）

该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

属性

 

属性名	属性值类型	描述	默认值
title	string	窗口的标题文本。	New Window
collapsible	boolean	定义是否显示可折叠按钮。	true
minimizable	boolean	定义是否显示最小化按钮。	true
maximizable	boolean	定义是否显示最大化按钮。	true
closable	boolean	定义是否显示关闭按钮。	true
closed	boolean	定义是否可以关闭窗口。	false
draggable	boolean	定义是否能够拖拽窗口。	true
resizable	boolean	定义是否能够改变窗口大小。	true
shadow	boolean	如果设置为true，在窗体显示的时候显示阴影。	true
inline	boolean	定义如何布局窗口，如果设置为true，窗口将显示在它的父容器中，否则将显示在所有元素的上面。	false
modal	boolean	定义是否将窗体显示为模式化窗口。	true

toolbar	array,selector	设置对话框窗口顶部工具栏，可用值有： 1) 一个数组，每一个工具栏中的工具属性都和linkbutton相同。 2) 一个选择器指定工具栏。 对话框窗口工具栏可以声明在<div>标签里面： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'我的对话框',toolbar:'#tb',modal:true"> 对话框窗口内容。 </div> <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> </div> 对话框窗口工具栏也可以通过数组进行定义： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',modal:true, toolbar:[{ text:'编辑', iconCls:'icon-edit', handler:function(){alert('edit')} },{ text:'帮助', iconCls:'icon-help', handler:function(){alert('help')} }]"> 对话框窗口内容。 </div>	null
buttons	array,selector	对话框窗口底部按钮，可用值有： 1) 一个数组，每一个按钮的属性都和linkbutton相同。 2) 一个选择器指定按钮栏。 按钮可以声明在<div>标签里面： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',buttons:'#bb',modal:true">  对话框窗口内容。 </div> <div id="bb"> <a href="#" class="easyui-linkbutton">保存</a> <a href="#" class="easyui-linkbutton">关闭</a> </div> 按钮也可以通过数组定义： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'我的对话框',modal:true, buttons:[{ text:'保存', handler:function(){...} },{ text:'关闭', handler:function(){...} }]"> 对话框窗口内容。 </div>	null

 

width	number	设置面板宽度。	auto
height	number	设置面板高度。	auto

iconCls

string

设置一个16x16图标的CSS类ID显示在面板左上角。

null

创建一个模式窗口并调用'refresh'方法通过ajax读取内容。

1. <div id="dd">Dialog Content.</div>  

<div id="dd">Dialog Content.</div>

1. $('#dd').dialog({   
2.     title: 'My Dialog',   
3.     width: 400,   
4.     height: 200,   
5.     closed: false,   
6.     cache: false,   
7.     href: 'get_content.php',   
8.     modal: true  
9. });   
10. $('#dd').dialog('refresh', 'new_content.php');  

5、Accordion（分类）

分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

刷新分类面板内容

调用'getSelected'方法获取当前面板，此外我们还可以调用'refresh'方法重新载入新内容。

1. var pp = $('#aa').accordion('getSelected'); // 获取选择的面板
2. if (pp){   
3.     pp.panel('refresh','new_content.php');  // 调用'refresh'方法刷新
4. } 

面板属性

属性名	属性值类型	描述	默认值
selected	boolean	如果设置为true将展开面板。	false

6、ValidateBox（验证框）

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

属性

 

属性名	属性值类型	描述	默认值
required	boolean	定义为必填字段。	false
validType	string,array	定义字段验证类型，比如：email, url等等。可用值有： 1).一个有效类型字符串运用一个验证规则。 2).一个有效类型数组运用多个验证规则。 代码示例： <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options=" required:true, validType:['email','length[0,20]'] ">	null
delay	number	延迟到最后验证输入值。	200
missingMessage	string	当文本框未填写时出现的提示信息。	This field is required.
invalidMessage	string	当文本框的内容被验证为无效时出现的提示。	null
tipPosition	string	定义当文本框内容无效的时候提示消息显示的位置，有效的值有：'left','right'。	right
novalidate	boolean	为true时关闭验证功能。	false

方法

方法名	方法属性	描述
destroy	none	移除并销毁组件。
validate	none	验证文本框的内容是否有效。
isValid	none	调用validate方法并且返回验证结果，true或者false。
enableValidation	none	启用验证。
disableValidation	none	禁用验证。

7、Tabs（选项卡）
选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

属性

属性名	属性值类型	描述	默认值
width	number	选项卡容器宽度。	auto
height	number	选项卡容器高度。	auto
fit	boolean	设置为true时，选项卡的大小将铺满它所在的容器。	false
border	boolean	设置为true时，显示选项卡容器边框。	true
tools	array,selector	工具栏添加在选项卡面板头的左侧或右侧。可用的值有： 1. 一个工具菜单数组，每个工具选项都和linkbutton相同。 2. 一个指向<div/>容器工具菜单的选择器。 代码示例：  通过数组定义工具菜单。 $('#tt').tabs({ tools:[{ iconCls:'icon-add', handler:function(){ alert('添加') } },{ iconCls:'icon-save', handler:function(){ alert('保存') } }] }); 通过存在的DOM容器定义工具菜单。 $('#tt').tabs({ tools:'#tab-tools' }); <div id="tab-tools"> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a> </div>	null
toolPosition	string	工具栏位置。可用值：'left','right'。	right
tabPosition	string	选项卡位置。可用值：'top','bottom','left','right'。	top
headerWidth	number	选项卡标题宽度，在tabPosition属性设置为'left'或'right'的时候才有效。	150
tabWidth	number	标签条的宽度。	auto
tabHeight	number	标签条的高度。	27
selected	number	初始化选中一个tab页。

事件

事件名	事件参数	描述
onSelect	title,index	用户在选择一个选项卡面板的时候触发。

选项卡面板

属性名	属性值类型	描述	默认值
id	string	选项卡面板的ID属性。	null
title	string	选项卡面板的标题文本。
content	string	选项卡面板的内容。
href	string	从URL加载远程数据内容填充到选项卡面板。	null
cache	boolean	如果为true，在'href'属性设置了有效值的时候缓存选项卡面板。	true
iconCls	string	定义了一个图标的CSS类ID显示到选项卡面板标题。	null
width	number	选项卡面板宽度。	auto
height	number	选项卡面板高度。	auto
collapsible	boolean	如果为true，则允许选项卡摺叠。	false

下面的是选项卡面板新增且独有的属性。

属性名	属性值类型	描述	默认值
closable	boolean	在设置为true的时候，选项卡面板将显示一个关闭按钮，在点击的时候会关闭选项卡面板。	false
selected	boolean	在设置为true的时候，选项卡面板会被选中。	false

8、LinkButton（按钮）

按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

9、DataGrid（数据表格）

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

10、Form（表单）

form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。

11、Combo（自定义下拉框）

自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。这是构建其他复杂的组合部件（如：combobox,combotree,combogrid等）之前需要构建的最基本的组件。

12、ComboBox（下拉列表框）

下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

13、ComboTree（树形下拉框）

树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似，但是将下拉列表框的列表替换成了树形控件。该控件支持树状态复选框，方便多选操作。

14、ComboGrid（数据表格下拉框）

数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件，该控件允许用户快速查找和选择，并且该控件提供了键盘导航支持，对行进行筛选。