jquery easyui

1.        Base 基础

 

1.1.       Documentation  文档

 

每个easyui组件都有特性（property）、方法（method）和事件（event），用户可以很容易地扩展它们。

1.1.1. 特性

特性在jQuery.fn.{plugin}.defaults里定义。例如， dialog的特性在jQuery.fn.dialog.defaults里定义。

1.1.2. 事件

事件（回调函数）也在jQuery.fn.{plugin}.defaults里定义。

1.1.3. 方法

方法在jQuery.fn.{plugin}.methods里定义。每个方法有两个参数：jq和param。第一个参数'jq'是必须的，它是指jQuery对象。第二个参数'param' 是指传递给方法的真正的参数。例如，给dialog组件扩展一个名叫'mymove' 的方法，代码看起来就像这样：

1. $.extend($.fn.dialog.methods, {   

2.     mymove: function(jq, newposition){   

3.         return jq.each(function(){   

4.             $(this).dialog('move', newposition);   

5.         });   

6.     }   

7. });  

现在你可以调用'mymove'方法把dialog移动到一个指定的位置：

1. $('#dd').dialog('mymove', {   

2.     left: 200,   

3.     top: 100   

4. });  

 

 

 

1.2.       Parser  解析器

1.2.1.  用法

1.  $.parser.parse();       // 解析整个页面  

2.  $.parser.parse('#cc');  // 解析某个具体节点  

1.2.2.   特性

名称	类型	说明	默认值
$.parser.auto	boolean	定义是否自动解析easyui组件。	true

1.2.3.   事件

名称	参数	说明
$.parser.onComplete	context	当解析器完成解析动作的时候触发。

1.2.4.   方法

名称	参数	说明
$.parser.parse	context	解析easyui组件。

 

 

1.3.  EasyLoader  加载器

1.3.1.  用法

1. easyloader.base = '../';    // 设置easyui的基本路径   

2. easyloader.load('messager', function(){        // 加载指定的模块   

3.     $.messager.alert('Title', 'load ok');   

4. });  

1.3.2.   特性

名称	类型	说明	默认值
modules	object	预定义的模块。
locales	object	预定义的语言环境。
base	string	easyui的基本路径，必须以'/'结尾。	基本路径将被自动相对于easyload.js进行设置
theme	string	定义在'themes' 目录下的主题名称。	default
css	boolean	定义当加载模块的时候是否加载css文件。	true
locale	string	语言环境名称。	null
timeout	number	以毫秒为单位的超时值，如果超时发生就触发。	2000

1.3.3.   定义的语言环境

·         af

·         bg

·         ca

·         cs

·         da

·         de

·         en

·         fr

·         nl

·         zh_CN

·         zh_TW

1.3.4.   事件

名称	参数	说明
onProgress	name	当一个模块被成功加载的时候触发。
onLoad	name	当一个模块和它的依赖被成功加载的时候触发。

1.3.5.   方法

名称	参数	说明
load	module, callback	加载指定模块。当加载成功的时候一个回调函数将被调用。 Module的有效类型是： 单个module名称 一个module数组 用'.css'结尾的css文件 用'.js'结尾的js文件

 

 

1.4.  Draggable  可拖拽

用$.fn.draggable.defaults重写默认的defaults。

1.4.1. 用法

1. 

 id="dd" style="width:100px;height:100px;">  

2.     

 id="title" style="background:#ccc;">title

   

3. 

   

 

1. $('#dd').draggable({   

2.     handle:'#title'  

3. });  

1.4.2.   特性

名称	类型	说明	默认值
proxy	string,function	拖拽时要使用的代理元素，设置为’clone’时，克隆元素将被用作代理。如果指定一个函数，它必须返回一个jQuery对象。	null
revert	boolean	如果设为true，拖拽结束后元素将返回它的开始位置。	false
cursor	string	拖拽时的css光标（cursor）。	move
deltaX	number	拖拽的元素相对于当前光标的位置的X。	null
deltaY	number	拖拽的元素相对于当前光标的位置的Y。	null
handle	selector	启动draggable的处理（handle）。	null
disabled	boolean	设为true就停止draggable。	false
edge	number	能够在其中开始draggable.的拖拽宽度。	0
axis	string	定义拖拽元素可在其上移动的轴，可用的值是'v'或'h'，当设为null，将会沿着'v'和'h'的方向移动。	null

1.4.3.   事件

名称	参数	说明
onBeforeDrag	e	拖拽前触发，返回false就取消拖拽。
onStartDrag	e	目标对象开始拖拽时触发。
onDrag	e	拖拽期间触发。返回false将不做真正的拖拽。
onStopDrag	e	拖拽停止时触发。

1.4.4.   方法

名称	参数	描述
options	none	返回选项（options）属性（property）。
proxy	none	如果设置了代理（proxy）属性就返回代理（proxy）。
enable	none	启用拖拽动作。.
disable	none	禁用拖拽动作。

 

 

1.5.  Droppable  可释放

1.5.1. 用法

1. 

 id="dd" style="width:100px;height:100px;">

   

 

1. $('#dd').droppable({   

2.     accept:'#d1,#d3'  

3. });  

1.5.2. 特性

名称	类型	说明	默认值
accept	selector	确定将被接受的可拖拽元素。	null

1.5.3. 事件

名称	参数	说明
onDragEnter	e,source	当可拖拽元素被拖进来时触发。source参数指被拖拽的DOM元素。
onDragOver	e,source	当可拖拽元素被拖过时触发。source参数指被拖拽的DOM元素。
onDragLeave	e,source	当可拖拽元素被拖离开时触发。source参数指被拖拽的DOM元素。
onDrop	e,source	当可拖拽元素被放下时触发。source参数指被拖拽的DOM元素。

 

 

1.6.  Resizable  可调整尺寸

1.6.1.  用法

1. 

 id="rr" style="width:100px;height:100px;border:1px solid #ccc;">

   

 

1. $('#rr').resizable({   

2.     maxWidth:800,   

3.     maxHeight:600   

4. });  

1.6.2.   特性

名称	类型	说明	默认值
disabled	boolean	true将禁止调整尺寸。	false
handles	string	指resizable的方向。'n'是北，'e'是东，等等。	n, e, s, w, ne, se, sw, nw, all
minWidth	number	调整尺寸时最小宽度。	10
minHeight	number	调整尺寸时最小高度。	10
maxWidth	number	调整尺寸时最大宽度。	10000
maxHeight	number	调整尺寸时最大高度。	10000
edge	number	被调整尺寸的边框的边缘。	5

1.6.3.   事件

名称	参数	说明
onStartResize	e	开始调整尺寸时触发。
onResize	e	调整尺寸期间触发。返回false时DOM元素将不进行真实的调整尺寸动作。
onStopResize	e	停止调整尺寸时触发。

 

1.7.  Pagination 分页

1.7.1.  依赖

linkbutton

用法

1. 

 id="pp" style="background:#efefef;border:1px solid #ccc;">

   

 

1. $('#pp').pagination({   

2.     total:2000,   

3.     pageSize:10   

4. });  

1.7.2.   特性

名称	类型	说明	默认值
total	number	记录总数，应该在创建pagination时设置。	1
pageSize	number	页面尺寸。（译者注：每页显示的最大记录数）	10
pageNumber	number	创建pagination时显示的页码。	1
pageList	array	用户能改变页面尺寸。pageList特性定义了能改成多大的尺寸。	[10,20,30,50]
loading	boolean	定义了是否数据正在加载。	false
buttons	array	定义了自定义按钮，每个按钮包含两个特性： iconCls：CSS类，它将显示一个背景图片 handler：当按钮被点击时的处理函数。	null
showPageList	boolean	定义了是否显示页面列表。	true
showRefresh	boolean	定义了是否显示刷新按钮。	true
beforePageText	string	在input组件之前显示label。	Page
afterPageText	string	在input组件之后显示label。	of {pages}
displayMsg	string	显示页面信息。	Displaying {from} to {to} of {total} items

1.7.3.   事件

名称	参数	说明
onSelectPage	pageNumber, pageSize	当用户选择新的页面时触发。回调函数包含两个参数： pageNumber：新的页码 pageSize：新的页面尺寸
onBeforeRefresh	pageNumber, pageSize	刷新按钮点击之前触发，返回false就取消刷新动作。
onRefresh	pageNumber, pageSize	刷新之后触发。
onChangePageSize	pageSize	当用户改变页面尺寸时触发。

1.7.4.   Methods

名称	参数	说明
options	none	返回options对象。
loading	none	把pagination变成正在加载（loading）状态。
loaded	none	把pagination变成加载完成（loaded）状态。

 

 

1.8.  SearchBox  搜索框

用$.fn.searchbox.defaults重写defaults。

 

1.8.1.  依赖

menubutton

1.8.2.  用法示例

创建SearchBox

1. 从标记创建。把 'easyui-searchbox' 类加入到标记。

1. 

6.  id="ss" class="easyui-searchbox"  

7.         searcher="qq"  

8.         prompt="Please Input Value" menu="#mm" style="width:300px">  

9.            

10. 

 id="mm" style="width:120px">  

11.     

 name="all" iconCls="icon-ok">All News

   

12.     

 name="sports">Sports News

   

13. 

   

2. 编程创建。

1.    

2.    

3.     All News   

4.     Sports News   

5.    

6. $('#ss').searchbox({   

7.     width:200,   

8.     searcher:function(value,name){   

9.         alert(value + "," + name)   

10.     },   

11.     menu:'#mm',   

12.     prompt:'Please Input Value'  

13. });  

1.8.3.  特性

名称	类型	说明	默认值
width	number	设置组件宽度。	auto
propmt	string	显示在输入框里的提示信息。	''
value	string	输入的值。	''
menu	selector	搜索类型的菜单。	null
searcher	function(value,name)	函数，当用户按搜索按钮或者按ENTER键时被调用。	null

1.8.4.  方法

名称	参数	说明
options	none	返回options对象。
menu	none	返回搜索类型的菜单对象。
textbox	none	返回文本框对象。
getValue	none	返回当前的搜索用值。
setValue	value	设置新的搜索用值。
getName	none	返回当前搜索类型的名称。
destroy	none	销毁这个组件。
resize	width	重设组件的宽度。

 

 

1.9.  ProgressBar 进度条

用$.fn.progressbar.defaults重写defaults。

 

1.9.1.  依赖

none

1.9.2. 用法示例

创建ProgressBar

ProgressBar能够从html标记创建或者编程创建。从标记创建更容易些，把 'easyui-progressbar' 类加入到

标记。

1. 

 id="p" class="easyui-progressbar" style="width:400px;">

   

 

获取或者设置值

我们获取当前值并且给这个组件设置一个新值。

1. var value = $('#p').progressbar('getValue');   

2. if (value < 100){   

3.     value += Math.floor(Math.random() * 10);   

4.     $('#p').progressbar('setValue', value);   

5. }  

1.9.3. 特性

名称	类型	说明	默认值
width	string	设置progressbar的宽度。	auto
value	number	百分比值。	0
text	string	显示在组件上的文字的模板。	{value}%

1.9.4. 事件

名称	参数	说明
onChange	newValue,oldValue	当值改变的时候触发。

1.9.5. 方法

名称	参数	说明
options	none	返回options对象。
resize	width	调整组件尺寸。
getValue	none	返回当前的进度值。
setValue	value	设置一个新的进度值。

 

 

2.        Layout 布局

2.1.  Panel  面板

用$.fn.panel.defaults重写defaults。

2.1.1.  用法示例

创建Panel

 1. 经由标记创建Panel

从标记创建Panel更容易。把 'easyui-panel' 类添加到

标记。

1.  <</B>div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"  

2.          iconCls="icon-save"  closable="true"  

3.          collapsible="true" minimizable="true" maximizable=true>  

4.      <</B>p>panel content.</</B>p>  

5.      <</B>p>panel content.</</B>p>  

6.  </</B>div>  

2. 编程创建Panel

让我们创建带右上角工具栏的Panel。.

1.     

2.      

panel content.

   

3.      

panel content.

   

4.     

5.    

6.  $('#p').panel({   

7.    width:500,   

8.    height:150,   

9.    title: 'My Panel',   

10.   tools: [{   

11.     iconCls:'icon-add',   

12.     handler:function(){alert('new')}   

13.   },{   

14.     iconCls:'icon-save'  

15.     handler:function(){alert('save')}   

16.   }]   

17. });   

 

移动Panel

调用 'move' 方法把Panel移动到新位置。

1.  $('#p').panel('move',{   

2.    left:100,   

3.    top:100   

4.  });   

 

加载内容

让我们经由ajax加载panel内容并且当加载成功时显示一些信息。

1.  $('#p').panel({   

2.      href:'content_url.php',   

3.      onLoad:function(){   

4.          alert('loaded successfully');   

5.      }   

6.  });  

 

2.1.2.  特性

名称	类型	说明	默认值
title	string	显示在Panel头部的标题文字。	null
iconCls	string	在Panel里显示一个16x16图标的CSS类。	null
width	number	设置Panel的宽度。	auto
height	number	设置Panel的高度。	auto
left	number	设置Panel的左边位置。	null
top	number	设置Panel的顶部位置。	null
cls	string	给Panel增加一个CSS类。	null
headerCls	string	给Panel头部增加一个CSS类。	null
bodyCls	string	给Panel身体增加一个CSS类。	null
style	object	给Panel增加自定义格式的样式。	{}
fit	boolean	当设为true时，Panel的 尺寸就适应它的父容器。	false
border	boolean	定义了是否显示Panel的边框。	true
doSize	boolean	设置为true，创建时Panel就调整尺寸并做成布局。	true
noheader	boolean	要是设置为true，Panel的头部将不会被创建。	false
content	string	Panel身体的内容。	null
collapsible	boolean	定义了是否显示折叠按钮。	false
minimizable	boolean	定义了是否显示最小化按钮。	false
maximizable	boolean	定义了是否显示最大化按钮。	false
closable	boolean	定义了是否显示关闭按钮。	false
tools	array	自定义工具组，每个工具包含两个特性： iconCls和handler	[]
collapsed	boolean	定义了初始化Panel是不是折叠的。	false
minimized	boolean	定义了初始化Panel是不是最小化的。	false
maximized	boolean	定义了初始化Panel是不是最大化的。	false
closed	boolean	定义了初始化Panel是不是关闭的。	false
href	string	一个URL，用它加载远程数据并且显示在Panel里。	null
cache	boolean	设置为true就缓存从href加载的Panel内容。	true
loadingMessage	string	当加载远程数据时在Panel里显示的一条信息。	Loading…
extractor	function	定义了如何从ajax响应抽出内容，返回抽出的数据。   extractor: function(data){      var pattern = / ]*>((.|[\n\r])*)<\/body>/im;      var matches = pattern.exec(data);      if (matches){           return matches[1];      // 只抽出 body 的内容      } else {           return data;      } }   2.1.3.  事件 名称 参数 说明 onLoad none 当远程数据被加载时触发。 onBeforeOpen none Panel打开前触发，返回false就停止打开。 onOpen none Panel打开后触发。 onBeforeClose none Panel关闭前触发，返回false就取消关闭。 onClose none Panel关闭后触发。 onBeforeDestroy none Panel销毁前触发，返回false就取消销毁。 onDestroy none Panel销毁后触发。 onBeforeCollapse none Panel折叠前触发，返回false就停止折叠。 onCollapse none Panel折叠后触发。 onBeforeExpand none Panel展开前触发，返回false就停止展开。 onExpand none Panel展开后触发。 onResize width, height Panel调整尺寸后触发。 width：新的外部宽度。 height：新的外部高度 onMove left,top Panel移动后触发。 left：新的左边位置 Top：新的顶部位置 onMaximize none 窗口最大化后触发。 onRestore none 窗口还原为它的原始尺寸后触发。 onMinimize none 窗口最小化后触发。 2.1.4.  方法 名称 参数 说明 options none 返回选项特性。 panel none 返回Panel对象。 header none 返回Panel头部对象。 body none 返回Panel身体对象。 setTitle title 设置头部的标题文字。 open forceOpen 当forceOpen参数设为true，就绕过onBeforeOpen回调函数打开Panel。 close forceClose 当forceClose参数设为true，就绕过onBeforeClose回调函数关闭Panel。 destroy forceDestroy 当forceDestroy参数设为true，就绕过onBeforeDestroy回调函数销毁Panel。 refresh href 当设置了href特性时，刷新Panel加载远程数据。 resize options 设置Panel尺寸并做布局。Options对象包含下列特性： width：新的Panel宽度 height：新的Panel高度 left：新的Panel左边位置 top：新的Panel顶部位置 move options 移动Panel到新位置。Options对象包含下列特性： left：新的Panel左边位置 top：新的Panel顶部位置 maximize none Panel适应它的容器的尺寸。 minimize none 最小化Panel。 restore none 把最大化的Panel还原为它原来的尺寸和位置。 collapse animate 折叠Panel身体。 expand animate 展开Panel身体。   2.2.  Tabs  标签页/选项卡 用$.fn.tabs.defaults重写defaults。 2.2.1.   依赖 panel linkbutton 2.2.2.   用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到 标记，每个tab panel 经由子标记被创建，其用法与Panel一样。 1.    id="tt" class="easyui-tabs" style="width:500px;height:250px;">   2.        title="Tab1" style="padding:20px;display:none;">   3.          tab1    4.           5.        title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">   6.          tab2    7.           8.        title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">   9.          tab3    10.          11.     2. 编程创建Tabs 现在我们编程创建 Tabs，我们同时捕捉 'onSelect' 事件。 1.  $('#tt').tabs({    2.      border:false,    3.      onSelect:function(title){    4.          alert(title+' is selected');    5.      }    6.  });   增加新的 tab panel 1.   // 增加一个新的 tab panel    2.  $('#tt').tabs('add',{    3.      title:'New Tab',    4.      content:'Tab Body',    5.      closable:true   6.  });   获取选中的 Tab 1.   // 获取选中的 tab panel 和它的 tab 对象    2.  var pp = $('#tt').tabs('getSelected');    3.  var tab = pp.panel('options').tab;    // 相应的 tab 对象        2.2.3.   特性 名称 类型 说明 默认值 width number Tabs 容器的宽度。 auto height number Tabs 容器的高度。 auto plain boolean True 就不用背景容器图片来呈现 tab 条。 false fit boolean True 就设置 Tabs 容器的尺寸以适应它的父容器。 false border boolean True 就显示 Tabs 容器边框。 true scrollIncrement number 每按一次tab 滚动按钮，滚动的像素数。 100 scrollDuration number 每一个滚动动画应该持续的毫秒数。 400 tools array 右侧工具栏，每个工具选项都和 Linkbutton 一样。 null 2.2.4.   事件 名称 参数 说明 onLoad panel 当一个 ajax tab panel 完成加载远程数据时触发。 onSelect title 当用户选择一个 tab panel 时触发。 onBeforeClose title 当一个 tab panel 被关闭前触发，返回 false 就取消关闭动作。 onClose title 当用户关闭一个 tab panel 时触发。 onAdd title 当一个新的 tab panel 被添加时触发。 onUpdate title 当一个 tab panel 被更新时触发。 onContextMenu e, title 当一个 tab panel 被右键点击时触发。 2.2.5.   方法 名称 参数 说明 options none 返回 tabs options。 tabs none 返回全部 tab panel。 resize none 调整 tabs 容器的尺寸并做布局。 add options 增加一个新的 tab panel，options 参数是一个配置对象，更多详细信息请参见  tab panel 特性。 close title 关闭一个 tab panel，title 参数是指被关闭的 panel。 getTab title 获取指定的 tab panel。 getSelected none 获取选中的 tab panel。 select title 选择一个 tab panel。 exists title 是指是否存在特定的 panel。 update param 更新指定的 tab panel，param 包含两个特性： tab：被更新的 tab panel。 options：panel 的 options。 2.2.6.   Tab Panel Tab panel 特性被定义在 panel 组件里，下面是一些常用的特性。 名称 类型 说明 默认值 title string Tab panel 的标题文字。   content string Tab panel 的内容。   href string 加载远程内容来填充 tab panel 的 URL。 null cache boolean True 就在设定了有效的 href 特性时缓存这个 tab panel。 true iconCls string 显示在tab panel 标题上的图标的 CSS 类。 null width number Tab panel 的宽度。 auto height number Tab panel 的高度。 auto 一些附加的特性 名称 类型 说明 默认值 closable boolean 当设置为 true 时，tab panel 将显示一个关闭按钮，点击它就能关闭这个tab panel。 false selected boolean 当设置为 true 时，tab panel 将被选中。 false     2.3.  Accordion  手风琴 用 $.fn.accordion.defaults 重写了 defaults。 2.3.1.  依赖 panel 2.3.2.   用法示例 创建 Accordion 经由标记创建 accordion， 添加 'easyui-accordion' 类到   标记。 1.  <</B>div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   2.      <</B>div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;">   3.          <</B>h3 style="color:#0099FF;">Accordion for jQuery</</B>h3>   4.          <</B>p>Accordion is a part of easyui framework for jQuery.     5.          It lets you define your accordion component on web page more easily.</</B>p>   6.      </</B>div>   7.      <</B>div title="Title2" iconCls="icon-reload" selected="true" style="padding:10px;">   8.          content2    9.      </</B>div>   10.     <</B>div title="Title3">   11.         content3    12.     </</B>div>   13. </</B>div>   我们可以改变或重建 accordion 后，修改某些功能。 1.  $('#aa').accordion({    2.      animate:false   3.  });   刷新 Accordion Panel 内容 调用 'getSelected' 方法来获取当前 panel，然后我们可以调用 panel 的 'refresh' 方法去加载新内容。 1.  var pp = $('#aa').accordion('getSelected'); // 获取选中的 panel    2.  if (pp){    3.      pp.panel('refresh','new_content.php');  // 调用 'refresh' 方法加载新内容    4.  }     2.3.3.  容器选项 名称 类型 说明 默认值 width number Accordion 容器的宽度。 auto height number Accordion 容器的高度。 auto fit boolean 设置为 true 就使 accordion 容器的尺寸适应它的父容器。 false border boolean 定义是否显示边框。 true animate boolean 定义当展开折叠 panel 时是否显示动画效果。 true 2.3.4.  Panel 选项 Accordion 的 panel 选项承自 panel，下面是增加的特性： 名称 类型 说明 默认值 selected boolean 设为 true 就展开 panel。 false 2.3.5.  事件 名称 参数 说明 onSelect title 当 panel 被选中时触发。 onAdd title 当增加一个新 panel 时触发。 onBeforeRemove title 当移除一个 panel 之前触发，返回 false 就取消移除动作。 onRemove title 当移除一个 panel 时触发。 2.3.6.  方法 名称 参数 说明 options none 返回 accordion 的选项。 panels none 获取全部的 panel。 resize none 调整 accordion 的尺寸。 getSelected none 获取选中的 panel。 getPanel title 获取指定的 panel。 select title 选择指定的 panel。 add options 增加一个新的 panel。 remove title 移除指定的 panel。     2.4.  Layout  布局 2.4.1.   依赖 panel resizable 2.4.2.   用法示例 创建 Layout 经由标记创建 Layout 。添加 'easyui-layout' 类到   标记。 1.  <</B>div id="cc" class="easyui-layout" style="width:600px;height:400px;">   2.      <</B>div region="north" title="North Title" split="true" style="height:100px;"></</B>div>   3.      <</B>div region="south" title="South Title" split="true" style="height:100px;"></</B>div>   4.      <</B>div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></</B>div>   5.      <</B>div region="west" split="true" title="West" style="width:100px;"></</B>div>   6.      <</B>div region="center" title="center title" style="padding:5px;background:#eee;"></</B>div>   7.  </</B>div>   在整个页面上创建 Layout。 1.  <</B>body class="easyui-layout">   2.      <</B>div region="north" title="North Title" split="true" style="height:100px;"></</B>div>   3.      <</B>div region="south" title="South Title" split="true" style="height:100px;"></</B>div>   4.      <</B>div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></</B>div>   5.      <</B>div region="west" split="true" title="West" style="width:100px;"></</B>div>   6.      <</B>div region="center" title="center title" style="padding:5px;background:#eee;"></</B>div>   7.  </</B>body>   折叠 Layout Panel 1.  $('#cc').layout();    2.  // 折叠 west panel    3.  $('#cc').layout('collapse','west');     2.4.3.   Layout Panel 选项 名称 类型 说明 默认值 title string Layout panel 的标题文字。 null region string 定义 layout panel 的位置，其值是下列之一：north、south、east、west、center。   border boolean True 就显示 layout panel 的边框。 true split boolean True 就显示拆分栏，用户可以用它改变panel 的尺寸。 false iconCls string 在panel 头部显示一个图标的CSS 类。 null href string 从远程站点加载数据的 URL 。 null 2.4.4.  方法 名称 参数 说明 resize none 设置 layout 的尺寸。 panel region 返回指定的 panel，'region' 参数可能的值是：'north'、'south'、'east'、'west'、'center'。 collapse region 折叠指定的 panel，'region' 参数可能的值是：'north'、'south'、'east'、'west'。 expand region 展开指定的 panel，'region' 参数可能的值是：'north'、'south'、'east'、'west'。     3.        Menu and Button 菜单和按钮 3.1.  Menu  菜单 用 $.fn.menu.defaults 重写了 defaults。 3.1.1.   用法示例 创建 Menu 经由标记创建 menu 应该添加 'easyui-menu' 类到   标记。 每个 menu item 经由  标记创建。 我们可以添加 'iconCls' 属性到 menu item，以定义一个显示在menu item 左边的图标。添加 'menu-sep' 类到 menu item 将产生一个 menu 分隔符。 1.  <</B>div id="mm" class="easyui-menu" style="width:120px;">   2.      <</B>div>New</</B>div>   3.      <</B>div>   4.          <</B>span>Open</</B>span>   5.          <</B>div style="width:150px;">   6.              <</B>div><</B>b>Word</</B>b></</B>div>   7.              <</B>div>Excel</</B>div>   8.              <</B>div>PowerPoint</</B>div>   9.          </</B>div>   10.     </</B>div>   11.     <</B>div iconCls="icon-save">Save</</B>div>   12.     <</B>div class="menu-sep"></</B>div>   13.     <</B>div>Exit</</B>div>   14. </</B>div>   编程创建 menu 并侦听 'onClick' 事件。 1.  $('#mm').menu({    2.      onClick:function(item){    3.          //...    4.      }    5.  });   显示 Menu 当 menu 被创建时，它是隐藏不可见的。调用 'show' 方法来显示 menu。 1.  $('#mm').menu('show', {    2.    left: 200,    3.    top: 100    4.  });     3.1.2.   特性 名称 类型 说明 默认值 zIndex number Menu 的 z-index 样式， 从它开始增加。. 110000 left number Menu 的左边位置。 0 top number Menu 的顶部位置。 0 3.1.3.  事件 名称 参数 说明 onShow none 当 menu 显示之后触发。 onHide none 当 menu 隐藏之后触发。 onClick item 当点击 menu item 时触发。 3.1.4.  方法 名称 参数 说明 show pos 在指定的位置显示 menu 。 pos 参数有两个特性：  left：新的左边位置。 top：新的顶部位置。 hide none 隐藏 menu 。 getItem itemEl 获取 menu item 数据并返回，该数据包含下列特性：  target：DOM 对象，即 menu item。 id：string，元素的 id 属性。 text：string，menu item 的文字。 href：string，定位的 url。 disabled：boolean，menu item 禁用与否。 onclick：function，当用户点击 menu item 时执行的函数。 iconCls：string，图标的 CSS 类。 setText param 给指定的 menu item 设置文字。 'param' 包含两个特性： target：DOM 对象，被设定的 menu item 。 text： string，新的文字值。 setIcon param 给指定的 menu item 设置图标。 'param' 包含两个特性： target： DOM 对象， 即 menu item。 iconCls： 新图标的 CSS 类。 findItem text 找到指定的 menu item， 返回对象与 getItem 方法相同。 appendItem param 追加 menu item， 'param' 参数包含下列特性： parent： DOM 对象， 新 menu item 将追加到其中， 如果没有设定， 新menu item 将作为顶级 menu item。 text： string， menu item 的文字。 href： string， 定位的 url 。 onclick： string 或者 function， 当用户点击 menu item时执行的脚本代码或者函数。 iconCls： string， 图标的 CSS 类。 removeItem itemEl 移除指定的 menu item。 enableItem itemEl 启用 menu item。 disableItem itemEl 禁用 menu item。     3.2.  LinkButton  链接按钮 用 $.fn.linkbutton.defaults 重写了 defaults。 3.2.1.   用法示例 1.   href="#" id="btn" iconCls="icon-search">easyui     1.  $('#btn').linkbutton({    2.      plain:true   3.  });    4.  $('#btn').linkbutton('disable');    // 禁用此 button    5.  $('#btn').linkbutton('enable');     // 启用此 button   3.2.2.   特性 名称 类型 说明 默认值 id string 组件的 id 属性。 null disabled boolean True 就禁用按钮。 false plain boolean True 就显示一个简单的效果。 false text string 按钮的文字。 '' iconCls string 在左边显示一个16x16 图标的CSS 类。 null 3.2.3.   方法 名称 参数 说明 options none 返回选项（options）特性。 disable none 禁用按钮。 enable none 启用按钮。    3.3.  MenuButton  菜单按钮 扩展自 $.fn.linkbutton.defaults。用 $.fn.menubutton.defaults 重写了defaults。 3.3.1.   依赖 menu linkbutton 3.3.2.   用法 1.   href="javascript:void(0)" id="mb" iconCls="icon-edit">Edit   2.    id="mm" style="width:150px;">   3.        iconCls="icon-undo">Undo     4.        iconCls="icon-redo">Redo     5.        class="menu-sep">     6.       Cut     7.       Copy     8.       Paste     9.        class="menu-sep">     10.       iconCls="icon-remove">Delete     11.      Select  All     12.       1.  $('#mb').menubutton({    2.      menu: '#mm'   3.  });   3.3.3.   特性 其特性扩展自 linkbutton，下列是为 menubutton 增加的特性。 名称 类型 说明 默认值 plain boolean True 就显示一个简单效果。 true menu string 创建一个相应 menu 的选择器。 null duration number 当悬停在按钮上时，以毫秒为单位定义的，显示menu的持续时间。 100 3.3.4.   方法 名称 参数 说明 options none 返回选项（options）对象。 disable none 禁用 menubutton。 enable none 启用 menubutton。     3.4.  SplitButton  拆分按钮 扩展自 $.fn.linkbutton.defaults。用 $.fn.splitbutton.defaults 重写了 defaults。 3.4.1.   依赖 menu linkbutton 3.4.2.   用法 1.   href="javascript:void(0)" id="sb" iconCls="icon-ok" οnclick="javascript:alert('ok')">Ok   2.    id="mm" style="width:100px;">   3.        iconCls="icon-ok">Ok     4.        iconCls="icon-cancel">Cancel     5.        1.  $('#sb').splitbutton({    2.      menu:'#mm'   3.  });   3.4.3.   特性 其特性扩展自 linkbutton，下列是为 splitbutton 增加的特性。 名称 类型 说明 默认值 plain boolean True 就显示简单效果。 true menu string 创建一个对应 menu 的选择器。 null duration number 当悬停在按钮上时，以毫秒为单位定义的，显示menu的持续时间。 100 3.4.4.   方法 名称 参数 说明 options none 返回选项（options）对象。 disable none 禁用 splitbutton. enable none 启用 splitbutton.     4.        Form 表单 4.1.  Form  表单 4.1.1.  用法 1.    id="ff" method="post">   2.      ...    3.      使 form 成为 ajax 提交的 form 。 1.  $('#ff').form({    2.      url:...,    3.      onSubmit: function(){    4.          // 做某些检查    5.          // 返回 false 来阻止提交    6.      },    7.      success:function(data){    8.          alert(data)    9.      }    10. });    11. // 提交 form    12. $('#ff').submit();   去做一个提交动作。 1.  // 调用 form  插件的 'submit' 方法来提交 form    2.  $('#ff').form('submit', {    3.      url:...,    4.      onSubmit: function(){    5.          // 做某些检查    6.          // 返回 false 来阻止提交    7.      },    8.      success:function(data){    9.          alert(data)    10.     }    11. });   4.1.2.   特性 名称 类型 说明 默认值 url string 表单提交动作的 URL。 null 4.1.3.   事件 名称 参数 说明 onSubmit none 提交前触发，返回 false 来阻止提交动作。 success data 当表单提交成功时触发。 onBeforeLoad param 发出请求加载数据之前触发。返回 false 就取消这个动作。 onLoadSuccess data 当表单数据加载时触发。 onLoadError none 加载表单数据时发生某些错误的时候触发。 4.1.4.   方法 名称 参数 说明 submit options 做提交动作， options 参数是一个对象，它包含系列特性： url：动作的 URL onSubmit：提交之前的回调函数 success：提交成功之后的回调函数 load data 加载记录来填充表单。 data 参数可以是一个字符串或者对象类型，字符串作为一个远程 URL，否则作为一个本地记录。 clear none 清除表单数据。 validate none 进行表单字段验证，当全部字段都有效时返回 true 。这个方法和 validatebox 插件一起使用。     4.2.  ValidateBox  验证框 用 $.fn.validatebox.defaults 重写了 defaults。 4.2.1.   用法 1.   id="vv" required="true" validType="email">     1.  $('#vv').validatebox({    2.      required:true   3.  });   验证规则 验证规则是通过使用 required 和 validType 特性来定义的， 这里是已经实施的规则： email：匹配 email 正则表达式规则 url：匹配 URL 正则表达式规则 length[0,100]：允许从 x 到 y 个字符 remote['http://.../action.do','paramName']：发送 ajax 请求来验证值，成功时返回 'true' 。 要自定义验证规则，重写 $.fn.validatebox.defaults.rules ，来定义一个验证函数和无效的信息。例如，定义一个 minLength 验证类型： 1.  $.extend($.fn.validatebox.defaults.rules, {    2.      minLength: {    3.          validator: function(value, param){    4.              return value.length >= param[0];    5.          },    6.          message: 'Please enter at least {0} characters.'   7.      }    8.  });   现在你可以使用这个 minLength 验证类型，去定义一个至少输入5个字符的输入框： 1.   class="easyui-validatebox" validType="minLength[5]">   4.2.2.   特性 名称 类型 说明 默认值 required boolean 定义是否字段应被输入。 false validType string 定义字段的验证类型，比如 email、url，等等。 null missingMessage string 当文本框是空时出现的提示文字。 This field is required. invalidMessage string 当文本框的内容无效时出现的提示文字。 null 4.2.3.   方法 名称 参数 说明 destroy none 移除并且销毁这个组件。 validate none 进行验证以判定文本框的内容是否有效。 isValid none 调用 validate 方法并且返回验证结果，true 或者 false。     4.3.  Combo  组合 扩展自 $.fn.validatebox.defaults 。 用 $.fn.combo.defaults 重写了 defaults 。   4.3.1.   依赖 validatebox panel 4.3.2.   用法 1.   id="cc" value="001">   2.       1.  $('#cc').combo({    2.      required:true,    3.      multiple:true   4.  });   4.3.3.   特性 其特性扩展自 validatebox，下列是为 combo 增加的特性： 名称 类型 说明 默认值 Width number 组件的宽度。 auto panelWidth number 下拉面板的宽度。 null panelHeight number 下拉面板的高度。 200 multiple boolean 定义是否支持多选。 false separator string 多选时文本的分隔符。 , editable boolean 定义是否用户可以往文本域中直接输入文字。 true disabled boolean 定义是否禁用文本域。 false hasDownArrow boolean 定义是否显示向下箭头的按钮。 true Value string 默认值。   Delay number 从最后一个键的输入事件起，延迟进行搜索。 200 keyHandler object 当用户按键后调用的函数。默认的 keyHandler 像这样定义： keyHandler: {           up: function(){},           down: function(){},           enter: function(){},           query: function(q){} }   4.3.4.   事件 说明 参数 说明 onShowPanel none 当下拉面板显示的时候触发。 onHidePanel none 当下拉面板隐藏的时候触发。 onChange newValue, oldValue 当文本域的值改变的时候触发。 4.3.5.   方法 其方法扩展自 validatebox，下列是为 combo 增加的方法。 名称 参数 说明 options none 返回选项（options）对象。 panel none 返回下拉面板对象。 textbox none 返回文本框对象。 destroy none 销毁组件。 resize width 调整组件的宽度。 showPanel none 显示下拉面板。 hidePanel none 隐藏下拉面板。 disable none 禁用组件。 enable none 启用组件。 validate none 验证输入的值。 isValid none 返回验证结果。 clear none 清除组件的值。 getText none 获取输入的文本。 setText text 设置文本值。 getValues none 获取组件的值的数组。 setValues values 设置组件的值的数组。 getValue none 获取组件的值。 setValue value 设置组件的值。     4.4.  ComboBox  组合框 扩展自 $.fn.combo.defaults。 用 $.fn.combobox.defaults 重写了 defaults。   4.4.1.   依赖 combo 4.4.2.   用法 1.      value="aa">aitem1  bitem2   bitem3  ditem4   eitem5        1.   id="cc" name="dept" value="aa">     1.  $('#cc').combobox({    2.      url:'combobox_data.json',    3.      valueField:'id',    4.      textField:'text'   5.  });   json 数据格式的示例 1.  [{    2.      "id":1,    3.      "text":"text1"   4.  },{    5.      "id":2,    6.      "text":"text2"   7.  },{    8.      "id":3,    9.      "text":"text3",    10.     "selected":true   11. },{    12.     "id":4,    13.     "text":"text4"   14. },{    15.     "id":5,    16.     "text":"text5"   17. }]   4.4.3.   特性 其特性扩展自 combo，下列是为combobox 增加的特性。 名称 类型 说明 默认值 valueField string 绑定到 ComboBox 的 value 上的基础数据的名称。 value textField string 绑定到 ComboBox 的 text 上的基础数据的名称。 text mode string 定义在文本改变时如何加载列表数据。如果组合框从服务器加载就设为 'remote' 。 local url string 从远程加载列表数据的 URL 。 null method string 用来检索数据的 http method 。 post data array 被加载的列表数据。 null filter function 定义当 'mode' 设为 'local' 时如何过滤数据。这个函数有两个参数： q：用户输入的文字 row：列表中的行数据。 返回 true 就允许显示该行。   formatter function 定义如何呈现行。这个函数有一个参数：row。   4.4.4.   事件 其事件扩展自 combo，下列是为 combobox 增加的事件。 名称 参数 说明 onLoadSuccess none 当远程数据加载成功时触发。 onLoadError none 当远程数据加载失败时触发。 onSelect record 当用户选择一个列表项时触发。 onUnselect record 当用户取消选择一个列表项时触发。 4.4.5.   方法 其方法扩展自 combo，下列是为 combobox 追加或重写的方法。 名称 参数 说明 options none 返回 options 对象。 getData none 返回加载的数据。 loadData data 加载本地列表数据。 reload url 请求远程的列表数据。 setValues values 把数组设置为组合框的值。 setValue value 设置组合框的值。 clear none 清除组合框的值。 select value 选择指定的选项。 unselect value 取消选择指定的选项。     4.5.  ComboTree  组合树 扩展自 $.fn.combo.defaults 和 $.fn.tree.defaults。用 $.fn.combotree.defaults 重写了defaults。     4.5.1.   依赖 combo tree 4.5.2.   用法 1.       1.   id="cc" value="01">     1.  $('#cc').combotree({    2.      url:'tree_data.json'   3.  });   4.5.3.   特性 其特性扩展自 combo 和 tree，下列是为 combotree 重写的特性。 名称 类型 说明 默认值 editable boolean 定义用户是否可以直接往文本域中输入文字。 false 4.5.4.   事件 其事件扩展自 combo 和 tree。 4.5.5.   方法 其方法扩展自 combo，下列是为 combotree 追加或重写的方法。 名称 参数 说明 options none 返回 options 对象。 tree none 返回 tree 对象。 loadData data 加载本地的 tree 数据。 reload url 再一次请求远程的 tree 数据。 clear none 清除组件的值。 setValues values 把数组设置给组件的值。 setValue value 设置组件的值。    4.6.  ComboGrid  组合表格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults，用 $.fn.combogrid.defaults 重写了 defaults 。 4.6.1.   依赖 combo datagrid 4.6.2.   用法 1.       1.   id="cc" name="dept" value="01">     1.  $('#cc').combogrid({    2.      panelWidth:450,    3.      value:'006',    4.       5.      idField:'code',    6.      textField:'name',    7.      url:'datagrid_data.json',    8.      columns:[[    9.          {field:'code',title:'Code',width:60},    10.         {field:'name',title:'Name',width:100},    11.         {field:'addr',title:'Address',width:120},    12.         {field:'col4',title:'Col41',width:100}    13.     ]]    14. });   4.6.3.   特性 其特性扩展自combo 和 datagrid，下列是为 combogrid 增加的特性。 名称 类型 说明 默认值 loadMsg string 当 datagrid 正加载远程数据时显示的信息。 null idField string id 的字段名 null textField string 显示到文本框中的 text 字段名。 null mode string 定义当文本改变时如何加载 datagrid 数据。如果组合树从服务器加载就设为 'remote' 。 local filter function(q, row) 定义当 'mode' 设为 'local' 时如何选择本地数据。返回 true 就选中改行。   4.6.4.   事件 其事件扩展自 combo 和 datagrid。 4.6.5. 方法 其方法扩展自 combo，下列是位combogrid 追加或重写的方法。 名称 参数 说明 options none 返回 options 对象。 grid none 返回 datagrid 对象。 setValues values 把组件的值设为数组。 setValue value 设置组件的值。 clear none 清除组件的值。     4.7.  NumberBox  数字框 扩展自 $.fn.validatebox.defaults，用 $.fn.numberbox.defaults 重写了 defaults 。 4.7.1.   依赖 validatebox 4.7.2.   用法 1.   type="text" id="nn">     1.  $('#nn').numberbox({    2.      min:0,    3.      precision:2    4.  });   4.7.3.   特性 其特性扩展自 validatebox，下列是为 numberbox 增加的特性。 名称 类型 说明 默认值 disabled boolean 定义是否禁用该域。 false min number 允许的最小值。 null max number 允许的最大值。 null precision number 显示在小数点后面的最大精度。 0 4.7.4.   方法 其方法扩展自 validatebox，下列是为 numberbox 追加或重写的方法。 名称 参数 说明 disable none 禁用该域。 enable none 启用该域。 fix none 把值固定为有效的值。     4.8.  DateBox  日期框 扩展自 $.fn.combo.defaults。用 $.fn.datebox.defaults 重写了 defaults。   4.8.1.   依赖 combo calendar 4.8.2.   用法 1.   id="dd" type="text">     1.  $('#dd').datebox({    2.      required:true   3.  });   4.8.3.   特性 其特性扩展自 combo，下列是为 datebox 增加的特性。 名称 类型 说明 默认值 panelWidth number 下拉日历面板的宽度。 180 panelHeight number 下拉日历面板的高度。 auto currentText string 当前日期按钮上显示的文字。 Today closeText string 关闭按钮上显示的文字。 Close okText string 确定按钮上显示的文字。 Ok disabled boolean 为 true 时禁用该域。 false formatter function 格式化日期的函数，此函数有一个 'date' 参数，并返回一个字符串值。   parser function 解析日期字符串的函数，此函数有一个 'date' 字符串参数，并返回一个日期值。   4.8.4.   事件 名称 参数 说明 onSelect date 当用户选择一个日期时触发。 4.8.5.   方法 其方法扩展自 combo，下列是为 datebox 重写的方法。 名称 参数 说明 options none 返回 options 对象。 calendar none 获取 calendar 对象。 setValue value 设置 datebox 的值。    4.9.  Calendar  日历 用 $.fn.calendar.defaults 重写了 defaults。   4.9.1.   用法 1.    id="cc" style="width:180px;height:180px;">      1.  $('#cc').calendar({    2.      width:600,    3.      height:600,    4.      current:new Date()    5.  });   4.9.2.   特性 名称 类型 说明 默认值 width number 日历组件的宽度。 180 height number 日历组件的高度。 180 fit boolean true 时设置日历的尺寸以适应它的父容器。 false border boolean 定义是否显示边框。 true weeks array 显示星期的日历。 ['S','M','T','W','T','F','S'] months array 显示月份的列表。 ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] year number 日历的年。 当前年份（4位） month number 日历的月。 当前月份（从1开始） current Date 日历的日期。 当前日期 4.9.3.   事件 名称 参数 说明 onSelect date 当用户选择一个日期时触发。 4.9.4.   方法 名称 参数 说明 options none 返回 options 对象。 resize none 调整日历的尺寸。 moveTo date 移动日历到一个指定的日期。     4.10.    Spinner  微调器 扩展自 $.fn.validatebox.defaults，用 $.fn.spinner.defaults 重写了 defaults。 4.10.1.         依赖 validatebox 4.10.2.         用法 1.   id="ss" value="2">     1.  $('#ss').spinner({    2.      required:true,    3.      increment:10    4.  });   4.10.3.         特性 其特性扩展自 validatebox，下列是为 spinner 增加的特性。 名称 类型 说明 默认值 width number 组件的宽度。 auto value string 初始值。   min string 允许的最小值。 null max string 允许的最大值。 null increment number 点击微调器按钮时的增量值。 1 editable boolean 定义用户是否可以往文本域中直接输入值。 true disabled boolean 定义是否禁用文本域。 false spin function(down) 当用户点击微调按钮时调用的函数。   4.10.4.         事件 名称 参数 说明 onSpinUp none 当用户点击向上微调按钮时触发。 onSpinDown none 当用户点击向下微调按钮时触发。 4.10.5.         方法 其方法扩展自 validatebox，下列是为 spinner 增加的方法。 名称 参数 说明 options none 返回 options 对象。 destroy none 销毁微调器组件。 resize width 重设组件的宽度。 enable none 启用组件。 disable none 禁用组件。 getValue none 获取组件的值。 setValue value 设置组件的值。 clear none 清除组件的值。     4.11.    NumberSpinner  数值微调器 扩展自 $.fn.spinner.defaults 和 $.fn.numberbox.defaults，用 $.fn.numberspinner.defaults 重写了 defaults。   4.11.1.         依赖 spinner numberbox 4.11.2.         用法 1.   id="ss" min="10" max="100" required="true" style="width:80px;">     1.  $('#ss').numberspinner({    2.      editable:false   3.  });   4.11.3.         特性 其特性扩展自 spinner 和 numberbox 。 4.11.4.         事件 其事件扩展自 spinner 。 4.11.5.         方法 其方法扩展自 spinner，下列是为 numberspinner 重写的方法。. 名称 参数 说明 options none 返回 options 对象。 setValue value 设置 numberspinner 的值。   4.12.    TimeSpinner  时间微调器 扩展自 $.fn.spinner.defaults，用 $.fn.timespinner.defaults 重写了 defaults。   4.12.1.         依赖 spinner 4.12.2.         用法 1.   id="ss" required="true" style="width:80px;">     1.  $('#ss').timespinner({    2.      showSeconds:true   3.  });   4.12.3.         特性 其特性扩展自 spinner，下列是为 timespinner 增加的特性。. 名称 类型 说明 默认值 separator string 时分秒之间的分隔符。 : showSeconds boolean 定义是否显示秒的信息。 false highlight number 初期高亮的域， 0 = 时， 1 = 分， …… 0 4.12.4.         事件 其事件扩展自 spinner。 4.12.5.    方法 其方法扩展自 spinner，下列是为 timespinner 重写的方法。 名称 参数 数码 options none 返回 options 对象。 setValue value 设置 timespinner 的值。 getHours none 获取当前的时钟的值。 getMinutes none 获取当前的分钟的值。 getSeconds none 获取当前的秒钟的值。      5.        Window 窗口 5.1.    Window  窗口 扩展自 $.fn.panel.defaults，用 $.fn.window.defaults 重写了 defaults。 5.1.1.   依赖 ·         draggable ·         resizable ·         panel 5.1.2.   用法 1.    id="win" iconCls="icon-save" title="My Window">   2.    Window Content    3.        1.  $('#win').window({    2.      width:600,    3.      height:400,    4.      modal:true   5.  });    6.  $('#win').window('close');  // close window   5.1.3.   特性 其特性扩展自 panel，下列是为 window 重写或增加的特性。 名称 类型 说明 默认值 title string 窗口的标题文字。 New Window collapsible boolean 定义是否显示折叠按钮。 true minimizable boolean 定义是否显示最小化按钮。 true maximizable boolean 定义是否显示最大化按钮。 true closable boolean 定义是否显示关闭按钮。 true closed boolean 定义是否关闭了窗口。 false zIndex number 从其开始增加的窗口的 z-index 。 9000 draggable boolean 定义是否窗口能被拖拽。 true resizable boolean 定义是否窗口可以调整尺寸。 true shadow boolean 如果设为 true， 当窗口能够显示阴影的时候将会显示阴影。 true inline boolean 定义如何放置窗口， true 就放在它的父容器里， false 就浮在所有元素的顶部。 false modal boolean 定义窗口是不是模态窗口。 true 5.1.4.   事件 其事件扩展自 panel。 5.1.5. 方法 其方法扩展自 panel，下列是为 window 增加的方法。 名称 参数 说明 window none 返回 window 对象。      5.2.  Dialog  对话框 扩展自 $.fn.window.defaults，用 $.fn.dialog.defaults 重写了 defaults。   5.2.1.   依赖 window linkbutton 5.2.2.   用法 1.    id="dd" title="My Dialog" style="width:400px;height:200px;">   2.      Dialog Content.    3.        1.  $('#dd').dialog({    2.      modal:true   3.  });   5.2.3.   特性 其特性扩展自 window，下列是为 dialog 重写的特性。 名称 类型 说明 默认值 title string 对话框的标题文字。 New Dialog collapsible boolean 定义是否显示折叠按钮。 false minimizable boolean 定义是否显示最小化按钮。 false maximizable boolean 定义是否显示最大化按钮。 false resizable boolean 定义对话框能否调整尺寸。 false toolbar array 对话框的顶部工具栏，每个工具的选项都与 linkbutton 一样。 null buttons array 对话框的底部按钮，每个按钮的选项都与 linkbutton 一样。 null 5.2.4.   事件 其事件扩展自 window。 5.2.5. 方法 其方法扩展自 window，下列是为 dialog 增加的方法。 名称 参数 说明 dialog none 返回 dialog 对象。     5.3.    Messager  消息框 用 $.messager.defaults 重写了 defaults。   5.3.1.   依赖 window linkbutton progressbar 5.3.2.   用法 1.  $.messager.alert('Warning','The warning message');    2.  $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){    3.      if (r){    4.          alert('ok');    5.      }    6.  });   5.3.3.   特性 名称 类型 说明 默认值 ok string 确定按钮的文字。 Ok cancel string 取消按钮的文字。 Cancel 5.3.4.  方法 名称 参数 说明 $.messager.show options 在屏幕的右下角显示一个消息窗口，options 是一个配置对象： showType： 定义消息窗口如何显示。可用的值是： null、slide、fade、show。默认是 slide。 showSpeed： 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600。 width： 定义消息窗口的宽度。默认是250。 height： 定义消息窗口的高度。默认是100。 msg： 显示的消息文字。 title： 头部面板上显示的标题文字。 timeout： 如果定义为 0，除非用户关闭，消息窗口将不会关闭。如果定义为非 0 值，消息窗口将在超时后自动关闭。 $.messager.alert title, msg, icon, fn 显示一个提示窗口。参数： title： 显示在头部面板的标题文字。 msg： 显示的消息文字。 icon： 显示图标的图片。可用的值是： error、question、info、warning。 fn： 窗口关闭时触发的回调函数。 $.messager.confirm title, msg, fn 显示一个带“确定”和“取消”按钮的确认消息。参数： title： 显示在头部面板上的标题文字。 msg： 显示的消息文字。 fn(b)： 回调函数，当用户点击确认按钮时传递一个 true 参数，否则给它传递一个 false 参数。 $.messager.prompt title, msg, fn 显示一个带确定和取消按钮的消息窗口，提示用户输入一些文字。参数： title： 显示在头部面板上的标题文字。 msg： 显示的消息文字。 fn(val)：回调函数，使用用户输入的数值参数。 $.messager.progress options or method 显示一个进度的消息窗口。 options 这样定义： title： 显示在头部面板上的标题文字，默认值是 '' 。 msg： 消息框的文本，默认值是 '' 。 text： 显示在进度条里的文字，默认值是 undefined 。 interval： 每次进度更新之间以毫秒为单位的时间长度。默认值是 300 。 方法这样定义： bar： 获取 progressbar 对象。 close： 关闭进度窗口。 代码示例 显示进度消息窗口：           $.messager.progress(); 现在关闭消息窗口：           $.messager.progress('close');     6.        DataGrid and Tree 数据表格和树 6.1.  DataGrid  数据表格 扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。 6.1.1.   依赖 panel resizable linkbutton pagination 6.1.2.   用法 1.    id="tt">     1.  $('#tt').datagrid({    2.      url:'datagrid_data.json',    3.      columns:[[    4.          {field:'code',title:'Code',width:100},    5.          {field:'name',title:'Name',width:100},    6.          {field:'price',title:'Price',width:100,align:'right'}    7.      ]]    8.  });   6.1.3.   数据表格（DataGrid）的特性 其特性扩展自 panel，下列是为 datagrid 增加的特性。 名称 类型 说明 默认值 columns array datagrid 的 column 的配置对象，更多详细请参见 column 的特性。 null frozenColumns array 和列的特性一样，但是这些列将被冻结在左边。 null fitColumns boolean True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。 false striped boolean True 就把行条纹化。（即奇偶行使用不同背景色） false method string 请求远程数据的 method 类型。 post nowrap boolean True 就会把数据显示在一行里。 true idField string 标识字段。 null url string 从远程站点请求数据的 URL。 null loadMsg string 当从远程站点加载数据时，显示的提示信息。 Processing, please wait … pagination boolean True 就会在 datagrid 的底部显示分页栏。 false rownumbers boolean True 就会显示行号的列。 false singleSelect boolean True 就会只允许选中一行。 false pageNumber number 当设置了 pagination 特性时，初始化页码。 1 pageSize number 当设置了 pagination 特性时，初始化页码尺寸。 10 pageList array 当设置了 pagination 特性时，初始化页面尺寸的选择列表。 [10,20,30,40,50] queryParams object 当请求远程数据时，发送的额外参数。 {} sortName string 定义可以排序的列。 null sortOrder string 定义列的排序顺序，只能用 'asc' 或 'desc'。 asc remoteSort boolean 定义是否从服务器给数据排序。 true showFooter boolean 定义是否显示一行页脚。 false rowStyler function 返回例如 'background:red' 的样式，该函数需要两个参数： rowIndex： 行的索引，从 0 开始。 rowData： 此行相应的记录。   loadFilter function 返回过滤的数据去显示。这个函数需要一个参数 'data' ，表示原始数据。 你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有 'total' 和 'rows' 特性。   editors object 定义编辑行时的 editor 。 预定义的 editor view object 定义 datagrid 的 view 。 默认的 view 6.1.4.   列（Column）的特性 DataGrid 的 Column 是一个数组对象，它的每个元素也是一个数组。数组元素的元素是一个配置对象，它定义了每个列的字段。 代码示例： 1.  columns:[[    2.      {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},    3.      {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},    4.      {title:'Item Details',colspan:4}    5.  ],[    6.      {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},    7.      {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},    8.      {field:'attr1',title:'Attribute',width:100},    9.      {field:'status',title:'Status',width:60}    10. ]]     名称 类型 说明 默认值 title string 列的标题文字。 undefined field string 列的字段名。 undefined width number 列的宽度。 undefined rowspan number 指一个单元格占据多少行。 undefined colspan number 指一个单元格占据多少列。 undefined align string 指如何对齐此列的数据，可以用 'left'、'right'、'center'。 undefined sortable boolean True 就允许此列被排序。 undefined resizable boolean True 就允许此列被调整尺寸。 undefined hidden boolean True 就隐藏此列。 undefined checkbox boolean True 就显示 checkbox。 undefined formatter function 单元格的格式化函数，需要三个参数：  value： 字段的值。 rowData： 行的记录数据。 rowIndex： 行的索引。 undefined styler function 单元格的样式函数，返回样式字符串来自定义此单元格的样式，例如 'background:red' 。此函数需要三个参数： value： 字段的值。 rowData： 行的记录数据。 rowIndex： 行的索引。 undefined sorter function 自定义字段的排序函数，需要两个参数： a： 第一个字段值。 b： 第二个字段值。 undefined editor string,object 指编辑类型。当是 string 时指编辑类型，当 object 时包含两个特性：  type：string，编辑类型，可能的类型是：  text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 options：对象，编辑类型对应的编辑器选项。 undefined   6.1.5.   编辑器（Editor） 用 $.fn.datagrid.defaults.editors 重写了 defaults。 每个编辑器有下列行为： 名称 参数 说明 init container, options 初始化编辑器并且返回目标对象。 destroy target 如果必要就销毁编辑器。 getValue target 从编辑器的文本返回值。 setValue target , value 给编辑器设置值。 resize target , width 如果必要就调整编辑器的尺寸。 例如，文本编辑器（text editor）像下面这样定义： 1.  $.extend($.fn.datagrid.defaults.editors, {    2.      text: {    3.          init: function(container, options){    4.              var input = $('').appendTo(container);    5.              return input;    6.          },    7.          getValue: function(target){    8.              return $(target).val();    9.          },    10.         setValue: function(target, value){    11.             $(target).val(value);    12.         },    13.         resize: function(target, width){    14.             var input = $(target);    15.             if ($.boxModel == true){    16.                 input.width(width - (input.outerWidth() - input.width()));    17.             } else {    18.                 input.width(width);    19.             }    20.         }    21.     }    22. });   6.1.6.   数据表格视图（DataGrid View） 用 $.fn.datagrid.defaults.view 重写了 defaults。 view 是一个对象，它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。 名称 参数 说明 render target, container, frozen 当数据加载时调用。 target：DOM 对象，datagrid 对象。 container：行的容器。 frozen：表示是否呈现冻结容器。 renderFooter target, container, frozen 这是呈现行脚选项的函数。 renderRow target, fields, frozen, rowIndex, rowData 这是选项的函数，将会被 render 函数调用。 refreshRow target, rowIndex 定义如何刷新指定的行。 onBeforeRender target, rows 视图被呈现前触发。 onAfterRender target 视图被呈现后触发。 6.1.7.   事件 其事件扩展自 panel，下列是为 datagrid 增加的事件。 名称 参数 说明 onLoadSuccess data 当数据加载成功时触发。 onLoadError none 加载远程数据发生某些错误时触发。 onBeforeLoad param 发送加载数据的请求前触发，如果返回 false加载动作就会取消。 onClickRow rowIndex, rowData 当用户点击一行时触发，参数包括：  rowIndex：被点击行的索引，从 0 开始。 rowData：被点击行对应的记录。 onDblClickRow rowIndex, rowData 当用户双击一行时触发，参数包括：  rowIndex：被双击行的索引，从 0 开始。 rowData：被双击行对应的记录。 onClickCell rowIndex, field, value 当用户单击一个单元格时触发。 onDblClickCell rowIndex, field, value 当用户双击一个单元格时触发。 onSortColumn sort, order 当用户对一列进行排序时触发，参数包括：  sort：排序的列的字段名 order：排序的列的顺序 onResizeColumn field, width 当用户调整列的尺寸时触发。 onSelect rowIndex, rowData 当用户选中一行时触发，参数包括：  rowIndex：选中行的索引，从 0 开始 rowData：选中行对应的记录 onUnselect rowIndex, rowData 当用户取消选择一行时触发，参数包括：  rowIndex：取消选中行的索引，从 0 开始 rowData：取消选中行对应的记录 onSelectAll rows 当用户选中全部行时触发。 onUnselectAll rows 当用户取消选中全部行时触发。 onBeforeEdit rowIndex, rowData 当用户开始编辑一行时触发，参数包括：  rowIndex：编辑行的索引，从 0 开始 rowData：编辑行对应的记录 onAfterEdit rowIndex, rowData, changes 当用户完成编辑一行时触发，参数包括：  rowIndex：编辑行的索引，从 0 开始 rowData：编辑行对应的记录 changes：更改的字段/值对 onCancelEdit rowIndex, rowData 当用户取消编辑一行时触发，参数包括：  rowIndex：编辑行的索引，从 0 开始 rowData：编辑行对应的记录 onHeaderContextMenu e, field 当 datagrid 的头部被右键单击时触发。 onRowContextMenu e, rowIndex, rowData 当右键点击行时触发。 6.1.8.   方法 名称 参数 说明 options none 返回 options 对象。 getPager none 返回 pager 对象。 getPanel none 返回 panel 对象。 getColumnFields frozen 返回列的字段，如果 frozen 设定为 true，冻结列的字段被返回。 getColumnOption field 返回指定列的选项。 resize param 调整尺寸和布局。 load param 加载并显示第一页的行，如果指定 param 参数，它将替换 queryParams 特性。 reload param 重新加载行，就像 load 方法一样，但是保持在当前页。 reloadFooter footer 重新加载脚部的行。 loading none 显示正在加载状态。 loaded none 隐藏正在加载状态。 fitColumns none 使列自动展开/折叠以适应 datagrid 的宽度。 fixColumnSize none 固定列的尺寸。 fixRowHeight index 固定指定行的高度。 loadData data 加载本地数据，旧的行会被移除。 getData none 返回加载的数据。 getRows none 返回当前页的行。 getFooterRows none 返回脚部的行。 getRowIndex row 返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值。 getSelected none 返回第一个选中的行或者 null。 getSelections none 返回所有选中的行，当没有选中的记录时，将返回空数组。 clearSelections none 清除所有的选择。 selectAll none 选中当前页所有的行。 unselectAll none 取消选中当前页所有的行。 selectRow index 选中一行，行索引从 0 开始。 selectRecord idValue 通过 id 的值做参数选中一行。 unselectRow index 取消选中一行。 beginEdit index 开始对一行进行编辑。 endEdit index 结束对一行进行编辑。 cancelEdit index 取消对一行进行编辑。 getEditors index 获取指定行的编辑器们。每个编辑器有下列特性： actions：编辑器能做的动作们。 target：目标编辑器的 jQuery 对象。 field：字段名。 type：编辑器的类型。 getEditor options 获取指定的编辑器， options 参数包含两个特性：  index：行的索引。 field：字段名。 refreshRow index 刷新一行。 validateRow index 验证指定的行，有效时返回 true。 updateRow param 更新指定的行， param 参数包含下列特性： index：更新行的索引。 row：行的新数据。 appendRow row 追加一个新行。 insertRow param 插入一个新行， param 参数包括下列特性： index：插入进去的行的索引，如果没有定义，就追加此新行。 row：行的数据。 deleteRow index 删除一行。 getChanges type 获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。 当 type 参数没有分配时，返回所有改变的行。 acceptChanges none 提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。 rejectChanges none 回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。 mergeCells options 把一些单元格合并为一个单元格，options 参数包括下列特性： index：列的索引。 field：字段名。 rowspan：合并跨越的行数。 colspan：合并跨越的列数。 showColumn field 显示指定的列。 hideColumn field 隐藏指定的列。     6.2.    PropertyGrid  属性表格 扩展自 $.fn.datagrid.defaults，用 $.fn.propertygrid.defaults 重写了 defaults。 6.2.1.   依赖 datagrid 6.2.2. 用法 1.    id="pg">     1.  $('#pg').propertygrid({    2.      url:'propertygrid_data.json',    3.      showGroup:true   4.  });   6.2.3. 特性 其特性扩展自 datagrid，下列是为 propertygrid 增加的特性。 名称 类型 说明 默认值 showGroup boolean 定义是否显示特性组。 false groupField string 定义组的字段名。 group groupFormatter function 定义如何格式化组的值。       6.3.    Tree 树 6.4.    TreeGrid 树形表格