jquery+easyui文档

分手后的思念是犯贱 2024-02-19 18:03 46阅读 0赞

##  **jquery+easyui培训文档** ##

目 录

**1**.... **Accordion****（可折叠标签）**....................................................................................... 2

**1.1** **实例**........................................................................................................... 2

**1.2** **参数**........................................................................................................... 3

**2**.... **DateBox****（日期框）**................................................................................................. 4

**2.1** **实例**........................................................................................................... 4

**2.2** **参数**........................................................................................................... 6

**2.3** **事件**........................................................................................................... 6

**2.4** **方法**........................................................................................................... 6

**3**.... **ComboBox(****组合框****)**.................................................................................................. 7

**3.1** **实例**........................................................................................................... 7

**3.2** **参数**........................................................................................................... 9

**3.3** **事件**........................................................................................................... 9

**3.4** **方法**........................................................................................................... 9

**4**.... **Dialog****（对话框）**.................................................................................................. 10

**4.1** **实例**......................................................................................................... 10

**4.2** **参数**......................................................................................................... 12

**4.3** **事件**......................................................................................................... 12

**4.4** **方法**......................................................................................................... 12

**5**.... **Messager****（提示框）**.............................................................................................. 12

**5.1** **实例**......................................................................................................... 12

**5.2** **方法**......................................................................................................... 15

**5.3** **扩展**......................................................................................................... 16

**6**.... **NumberBox****（数字框）**.......................................................................................... 16

**6.1** **实例**......................................................................................................... 16

**6.2** **参数**......................................................................................................... 17

**7**.... **ValidateBox****（验证框）**.......................................................................................... 18

**7.1** **实例**......................................................................................................... 18

**7.2** **参数**......................................................................................................... 20

**7.3** **方法**......................................................................................................... 20

**7.4** **扩展**......................................................................................................... 20

**8**.... **Pagination****（分页）**............................................................................................... 20

**8.1** **实例**......................................................................................................... 20

**8.2** **参数**......................................................................................................... 22

**8.3** **事件**......................................................................................................... 23

**9**.... **Window****（窗口）**................................................................................................... 23

**9.1** **实例**......................................................................................................... 23

**9.2** **参数**......................................................................................................... 25

**9.3** **事件**......................................................................................................... 26

**9.4** **方法**......................................................................................................... 26

**10**... **Panel****（面板）**....................................................................................................... 26

**10.1** **实例**......................................................................................................... 26

**10.2** **参数**......................................................................................................... 28

**10.3** **事件**......................................................................................................... 29

**10.4** **方法**......................................................................................................... 29

**11**... **Tabs****（标签）**......................................................................................................... 30

**11.1** **实例**......................................................................................................... 30

**11.2** **参数**......................................................................................................... 32

**11.3** **事件**......................................................................................................... 32

**11.4** **方法**......................................................................................................... 33

**11.5** **标签面板属性**.......................................................................................... 33

**12**... **Tree****（树）**............................................................................................................. 33

**12.1** **实例**......................................................................................................... 33

**12.2** **参数**......................................................................................................... 36

**12.3** **事件**......................................................................................................... 37

**12.4** **方法**......................................................................................................... 37

**13**... **Layout****（布局）**..................................................................................................... 38

**13.1** **实例**......................................................................................................... 38

**13.2** **参数**......................................................................................................... 39

**13.3** **方法**......................................................................................................... 39

**14**... **Datagrid****（数据表）**............................................................................................... 39

**14.1** **实例**......................................................................................................... 39

**14.2** **参数**......................................................................................................... 43

**14.3** **Column****参数**............................................................................................. 44

**14.4** **事件**......................................................................................................... 45

**14.5** **方法**......................................................................................................... 46

##  ##

1.  **Accordion****（可折叠标签）**
    
    1.  **实例**
        
        1.  **代码**

<html>

<head>

<title>jQuery EasyUI</title>

$( **function**() \{

$('\#**aa**').accordion( \{

width : 400,

height : 200,

fit : false

\});

</script>

</head>

<body>

<h3 style=*"color: \#0099FF;"*>Accordion for jQuery</h3>

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

</div>

<div title=*"Title2"* icon=*"icon-reload"* **selected=*"true"***

style=*"padding: 10px;"*>content2</div>

<div title=*"Title3"*>content3</div>

</div>

</body>

</html>

1.  1.  1.  **效果图**

1.1.3 扩展

实例html代码中

此行也可写成

，并且将js代码全部去掉，效果图是一样的。

1.  1.  **参数**
        
        1.  **容器参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:64.85pt;"> 参数名称 </td> 
 <td style="width:42.05pt;"> 参数类型 </td> 
 <td style="width:288.95pt;"> 描述 </td> 
 <td style="width:51.45pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="width:64.85pt;"> width </td> 
 <td style="width:42.05pt;"> 数字 </td> 
 <td style="width:288.95pt;"> 可折叠标签的宽度。 </td> 
 <td style="width:51.45pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="width:64.85pt;"> height </td> 
 <td style="width:42.05pt;"> 数字 </td> 
 <td style="width:288.95pt;"> 可折叠标签的高度。 </td> 
 <td style="width:51.45pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="width:64.85pt;"> fit </td> 
 <td style="width:42.05pt;"> 布尔 </td> 
 <td style="width:288.95pt;"> 是否使可折叠标签自动缩放以适应父容器的大小，当为true时width和height参数将失效。 </td> 
 <td style="width:51.45pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:64.85pt;"> border </td> 
 <td style="width:42.05pt;"> 布尔 </td> 
 <td style="width:288.95pt;"> 是否显示边界线。 </td> 
 <td style="width:51.45pt;"> true </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  1.  **面板参数**

可折叠标签面板继承自面板（panel）,许多属性定义在<div />标签里，下面的属性就是如此：

<table> 
 <tbody> 
 <tr> 
 <td style="width:68.85pt;"> 参数名称 </td> 
 <td style="width:68.85pt;"> 参数类型 </td> 
 <td style="width:233.25pt;"> 描述 </td> 
 <td style="width:55.15pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="width:68.85pt;"> selected </td> 
 <td style="width:68.85pt;"> 布尔 </td> 
 <td style="width:233.25pt;"> 设置可折叠标签中默认展开的标签页 </td> 
 <td style="width:55.15pt;"> false </td> 
 </tr> 
 </tbody> 
</table>

1.  **DateBox****（日期框）**
    
    1.  **实例**
        
        1.  **代码**

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jQuery EasyUI</title>

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

\});

</script>

</head>

<body>

<h1>DateBox</h1>

<div style=*"margin-bottom: 10px;"*><a href=*"\#"* onclick=

disable();

>disable</a>

<a href=*"\#"* onclick=

enable();

>enable</a></div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:80.25pt;"> 属性名 </td> 
 <td style="width:45.8pt;"> 类型 </td> 
 <td style="width:251.55pt;"> 描述 </td> 
 <td style="width:48.5pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"> currentText </td> 
 <td style="vertical-align:top;width:45.8pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:251.55pt;"> 为当前日期按钮显示的文本 </td> 
 <td style="vertical-align:top;width:48.5pt;"> Today </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"> closeText </td> 
 <td style="vertical-align:top;width:45.8pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:251.55pt;"> 关闭按钮显示的文本 </td> 
 <td style="vertical-align:top;width:48.5pt;"> Close </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"> disabled </td> 
 <td style="vertical-align:top;width:45.8pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:251.55pt;"> 如果为true则禁用输入框 </td> 
 <td style="vertical-align:top;width:48.5pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"> required </td> 
 <td style="vertical-align:top;width:45.8pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:251.55pt;"> 定义输入框是否为必添 </td> 
 <td style="vertical-align:top;width:48.5pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"> missingMessage </td> 
 <td style="vertical-align:top;width:45.8pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:251.55pt;"> 当输入框为空时提示的文本 </td> 
 <td style="vertical-align:top;width:48.5pt;"> 必填 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"> formatter </td> 
 <td style="vertical-align:top;width:45.8pt;"> function </td> 
 <td style="vertical-align:top;width:251.55pt;"> 格式化日期的函数，这个函数以’date’为参数，并且返回一个字符串 </td> 
 <td style="vertical-align:top;width:48.5pt;"> —— </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"> parser </td> 
 <td style="vertical-align:top;width:45.8pt;"> function </td> 
 <td style="vertical-align:top;width:251.55pt;"> 分析字符串的函数，这个函数以’date’为参数并返回一个日期 </td> 
 <td style="vertical-align:top;width:48.5pt;"> —— </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"><a rel="nofollow"></a> &nbsp; </td> 
 <td style="vertical-align:top;width:45.8pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:251.55pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:48.5pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:45.8pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:251.55pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:48.5pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:80.25pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:45.8pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:251.55pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:48.5pt;"> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **事件**

<table> 
 <tbody> 
 <tr> 
 <td style="width:97.1pt;"> 事件名 </td> 
 <td style="width:65.6pt;"> 参数 </td> 
 <td style="width:239.05pt;"> 描述 </td> 
 <td style="width:24.35pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:97.1pt;"> onSelect </td> 
 <td style="vertical-align:top;width:65.6pt;"> date </td> 
 <td style="vertical-align:top;width:239.05pt;"> 当选择一个日期时触发 </td> 
 <td style="vertical-align:top;width:24.35pt;"> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **方法**

<table> 
 <tbody> 
 <tr> 
 <td style="width:118.7pt;"> 方法名 </td> 
 <td style="width:89.25pt;"> 参数 </td> 
 <td style="width:185.1pt;"> 描述 </td> 
 <td style="width:33.05pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:118.7pt;"> destroy </td> 
 <td style="vertical-align:top;width:89.25pt;"> none </td> 
 <td style="vertical-align:top;width:185.1pt;"> 销毁组件 </td> 
 <td style="vertical-align:top;width:33.05pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:118.7pt;"> disable </td> 
 <td style="vertical-align:top;width:89.25pt;"> none </td> 
 <td style="vertical-align:top;width:185.1pt;"> 禁用输入框. </td> 
 <td style="vertical-align:top;width:33.05pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:118.7pt;"> enable </td> 
 <td style="vertical-align:top;width:89.25pt;"> none </td> 
 <td style="vertical-align:top;width:185.1pt;"> 启用输入框 </td> 
 <td style="vertical-align:top;width:33.05pt;"> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  **ComboBox(****组合框****)**
    
    1.  **实例**
        
        1.  **代码**

<html>

<head>

<title>jQuery EasyUI</title>

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**

\});

</script>

</head>

<body>

<h1>ComboBox</h1>

<div style=*"margin-bottom: 10px;"*><a href=*"\#"* onclick="loadData()">loadData</a>

<a href=*"\#"* onclick="setValue()">setValue</a> <a href=*"\#"*

onclick="getValue()">getValue</a> <a href=*"\#"* onclick="disable()">disable</a>

<a href=*"\#"* onclick="enable()">enable</a></div>

Options:

</select>

</body>

</html>

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"

\}\]

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:69.2pt;"> 属性名 </td> 
 <td style="width:53.1pt;"> 类型 </td> 
 <td style="width:250.7pt;"> 描述 </td> 
 <td style="width:53.1pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:69.2pt;"> width </td> 
 <td style="vertical-align:top;width:53.1pt;"> 数字 </td> 
 <td style="vertical-align:top;width:250.7pt;"> 组件的宽度 </td> 
 <td style="vertical-align:top;width:53.1pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:69.2pt;"> listWidth </td> 
 <td style="vertical-align:top;width:53.1pt;"> 数字 </td> 
 <td style="vertical-align:top;width:250.7pt;"> 下拉列表的宽度 </td> 
 <td style="vertical-align:top;width:53.1pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:69.2pt;"> listHeight </td> 
 <td style="vertical-align:top;width:53.1pt;"> 数字 </td> 
 <td style="vertical-align:top;width:250.7pt;"> 下拉列表的高度 </td> 
 <td style="vertical-align:top;width:53.1pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:69.2pt;"> valueField </td> 
 <td style="vertical-align:top;width:53.1pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:250.7pt;"> 基础数据值名称绑定到这个组合框 </td> 
 <td style="vertical-align:top;width:53.1pt;"> value </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:69.2pt;"> textField </td> 
 <td style="vertical-align:top;width:53.1pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:250.7pt;"> 基础数据的字段的名称绑定到这个组合框 </td> 
 <td style="vertical-align:top;width:53.1pt;"> text </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:69.2pt;"> editable </td> 
 <td style="vertical-align:top;width:53.1pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:250.7pt;"> 定义是否可以直接到文本域中键入文本 </td> 
 <td style="vertical-align:top;width:53.1pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:69.2pt;"> url </td> 
 <td style="vertical-align:top;width:53.1pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:250.7pt;"> 加载列表数据的远程URL </td> 
 <td style="vertical-align:top;width:53.1pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:69.2pt;"> mode </td> 
 <td style="vertical-align:top;width:53.1pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:250.7pt;"> remote 加载远程数据 local 本地 远程接收的url &nbsp;是q 接收的时候必须进行URL解码 </td> 
 <td style="vertical-align:top;width:53.1pt;"> local </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **事件**

<table> 
 <tbody> 
 <tr> 
 <td style="width:98.65pt;"> 事件名 </td> 
 <td style="width:122.9pt;"> 参数 </td> 
 <td style="width:204.55pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:98.65pt;"> onLoadSuccess </td> 
 <td style="vertical-align:top;width:122.9pt;"> none </td> 
 <td style="vertical-align:top;width:204.55pt;"> 当远程数据成功加载时触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:98.65pt;"> onLoadError </td> 
 <td style="vertical-align:top;width:122.9pt;"> none </td> 
 <td style="vertical-align:top;width:204.55pt;"> 当远程数据加载失败时触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:98.65pt;"> onSelect </td> 
 <td style="vertical-align:top;width:122.9pt;"> record </td> 
 <td style="vertical-align:top;width:204.55pt;"> 当用户选择了一个列表项时触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:98.65pt;"> onChange </td> 
 <td style="vertical-align:top;width:122.9pt;"> newValue, oldValue </td> 
 <td style="vertical-align:top;width:204.55pt;"> 当文本域字段的值改变时触发 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **方法**

<table> 
 <tbody> 
 <tr> 
 <td style="width:47.55pt;"> 方法名 </td> 
 <td style="width:37.05pt;"> 参数 </td> 
 <td style="width:341.5pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:47.55pt;"> select </td> 
 <td style="vertical-align:top;width:37.05pt;"> value </td> 
 <td style="vertical-align:top;width:341.5pt;"> 选择下拉列表中的一项 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:47.55pt;"> setValue </td> 
 <td style="vertical-align:top;width:37.05pt;"> param </td> 
 <td style="vertical-align:top;width:341.5pt;"> 设定指定值到文本域，参数可以是一个字符串，也可以是一个Javascript对象，如果是对象，必须包含两个属性各对应valueField和TextField属性。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:47.55pt;"> getValue </td> 
 <td style="vertical-align:top;width:37.05pt;"> none </td> 
 <td style="vertical-align:top;width:341.5pt;"> 获取字段值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:47.55pt;"> reload </td> 
 <td style="vertical-align:top;width:37.05pt;"> url </td> 
 <td style="vertical-align:top;width:341.5pt;"> 请求远程列表数据. </td> 
 </tr> 
 </tbody> 
</table>

1.  **Dialog****（对话框）**
    
    1.  **实例**
        
        1.  **代码**

<html>

<head>

<title>jQuery EasyUI</title>

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');

</script>

</head>

<body>

<h1>Dialog</h1>

<a href=*"\#"* onclick="close1()">close1</a></div>

<div id=*"dd"* icon=*"icon-save"*

style=*"padding: 5px; width: 400px; height: 200px;"*>

dialog content.

</div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:78.95pt;"> 属性名 </td> 
 <td style="width:51.4pt;"> 类型 </td> 
 <td style="width:220.65pt;"> 描述 </td> 
 <td style="width:75.1pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> title </td> 
 <td style="vertical-align:top;width:51.4pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:220.65pt;"> 对话框的标题文本 </td> 
 <td style="vertical-align:top;width:75.1pt;"> New Dialog </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> collapsible </td> 
 <td style="vertical-align:top;width:51.4pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:220.65pt;"> 定义是否显示可折叠按钮 </td> 
 <td style="vertical-align:top;width:75.1pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> minimizable </td> 
 <td style="vertical-align:top;width:51.4pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:220.65pt;"> 定义是否显示最小化按钮 </td> 
 <td style="vertical-align:top;width:75.1pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> maximizable </td> 
 <td style="vertical-align:top;width:51.4pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:220.65pt;"> 定义是否显示最大化按钮 </td> 
 <td style="vertical-align:top;width:75.1pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> resizable </td> 
 <td style="vertical-align:top;width:51.4pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:220.65pt;"> 定义对话框是否可编辑大小 </td> 
 <td style="vertical-align:top;width:75.1pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> toolbar </td> 
 <td style="vertical-align:top;width:51.4pt;"> 数组 </td> 
 <td style="vertical-align:top;width:220.65pt;"> 对话框上的工具条，每个工具条包括: </td> 
 <td style="vertical-align:top;width:75.1pt;"> text, iconCls, disabled, handler etc. null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> buttons </td> 
 <td style="vertical-align:top;width:51.4pt;"> 数组 </td> 
 <td style="vertical-align:top;width:220.65pt;"> 对话框底部的按钮，每个按钮包括: </td> 
 <td style="vertical-align:top;width:75.1pt;"> text, iconCls, handler etc. null </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **事件**

Dialog的事件和窗口(Window)的事件相同。

1.  1.  **方法**

Dialog的函数方法和窗口(Window)的相同。

1.  **Messager****（提示框）**
    
    1.  **实例**
        
        1.  **代码**

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jQuery EasyUI</title>

href=*"../themes/default/easyui.css"*>

**function** show1()\{

$.messager.show(\{

title:'My Title',

msg:'Message will be closed after 4 seconds.',

showType:'show'

\});

**function** show2()\{

$.messager.show(\{

title:'My Title',

msg:'Message will be closed after 5 seconds.',

timeout:5000,

showType:'slide'

\});

**function** show3()\{

$.messager.show(\{

title:'My Title',

msg:'Message never be closed.',

timeout:0,

showType:'fade'

\});

**function** alert1()\{

$.messager.alert('My Title','Here is a message!');

**function** alert2()\{

$.messager.alert('My Title','Here is a error message!','error');

**function** alert3()\{

$.messager.alert('My Title','Here is a info message!','info');

**function** alert4()\{

$.messager.alert('My Title','Here is a question message!','question');

**function** alert5()\{

$.messager.alert('My Title','Here is a warning message!','warning');

**function** confirm1()\{

$.messager.confirm('My Title', 'Are you confirm this?', **function**(r)\{

**if** (r)\{

alert('confirmed:'\+r);

location.href = 'http://www.google.com';

\});

**function** prompt1()\{

$.messager.prompt('My Title', 'Please type something', **function**(r)\{

**if** (r)\{

alert('you type:'\+r);

\});

$(**function**()\{

**$.messager.defaults=\{ok:****"****确定****"****,cancel:****"****取消****"****\};**

\});

</script>

</head>

<body>

<h1>Messager</h1>

<div><a href=*"javascript:void(0)"* onclick="show1()">show</a> | <a

href=*"\#"* onclick="show2()">slide</a> | <a href=*"\#"* onclick="show3()">fade</a>

|</div>

<div><a href=*"\#"* onclick="alert1()">alert</a> | <a href=*"\#"*

onclick="alert2()">alert(error)</a> | <a href=*"\#"* onclick="alert3()">alert(info)</a>

| <a href=*"\#"* onclick="alert4()">alert(question)</a> | <a href=*"\#"*

onclick="alert5()">alert(warning)</a></div>

<div><a href=*"\#"* onclick="confirm1();">confirm</a></div>

<div><a href=*"\#"* onclick="prompt1()">prompt</a></div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **方法**

<table> 
 <tbody> 
 <tr> 
 <td style="width:106.8pt;"> 方法名 </td> 
 <td style="width:60.85pt;"> 参数 </td> 
 <td style="width:258.45pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:106.8pt;"> $.messager.show </td> 
 <td style="vertical-align:top;width:60.85pt;"> options </td> 
 <td style="vertical-align:top;width:258.45pt;"> 在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象： showType：定义如何将显示消息窗口。可用的值是：null,slide,fade,show。默认值是slide。 showSpeed：定义消息窗口完成的时间（以毫秒为单位）， 默认值600。 width：定义消息窗口的宽度。 默认值250。 height：定义消息窗口的高度。 默认值100。 msg：定义显示的消息文本。 title：定义显示在标题面板显示的标题文本。 timeout：如果定义为0，消息窗口将不会关闭，除非用户关闭它。如果定义为非0值，当超时后消息窗口将自动关闭。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:106.8pt;"> $.messager.alert </td> 
 <td style="vertical-align:top;width:60.85pt;"> title, msg, icon, fn </td> 
 <td style="vertical-align:top;width:258.45pt;"> 显示一个警告窗口。参数如下： title：显示在标题面板的标题文本。 msg：提示框显示的消息文本。 icon：提示框显示的图标。可用的值是：error,question,info,warning. fn：当窗口关闭时触发的回调函数。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:106.8pt;"> $.messager.confirm </td> 
 <td style="vertical-align:top;width:60.85pt;"> title, msg, fn </td> 
 <td style="vertical-align:top;width:258.45pt;"> 显示一个含有确定和取消按钮的确认消息窗口。参数如下： title：显示在标题面板的标题文本。 msg：确认消息窗口显示的消息文本。 fn(b)：当用户点击按钮后触发的回调函数，如果点击OK则给回调函数传true,如果点击cancel则传false。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:106.8pt;"> $.messager.prompt </td> 
 <td style="vertical-align:top;width:60.85pt;"> title, msg, fn </td> 
 <td style="vertical-align:top;width:258.45pt;"> 显示一个确定和取消按钮的信息提示窗口，提示用户输入一些文本。参数如下： title：显示在标题面板的标题文本。 msg：提示窗口显示的消息文本。 fn(val)：用户点击按钮后的回调函，参数是用户输入的内容。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:106.8pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:60.85pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:258.45pt;"> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **扩展**

可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:65.4pt;"> 名字 </td> 
 <td style="vertical-align:top;width:73.4pt;"> 类型 </td> 
 <td style="vertical-align:top;width:69.4pt;"> 描述 </td> 
 <td style="vertical-align:top;width:128.1pt;"> 默认值 </td> 
 <td style="vertical-align:top;width:69.35pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:20.45pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:65.4pt;"> ok </td> 
 <td style="vertical-align:top;width:73.4pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:69.4pt;"> Ok </td> 
 <td style="vertical-align:top;width:128.1pt;"> 按钮上的文本 </td> 
 <td style="vertical-align:top;width:69.35pt;"> Ok </td> 
 <td style="vertical-align:top;width:20.45pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:65.4pt;"> cancel </td> 
 <td style="vertical-align:top;width:73.4pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:69.4pt;"> Cancel </td> 
 <td style="vertical-align:top;width:128.1pt;"> 按钮上的文本 </td> 
 <td style="vertical-align:top;width:69.35pt;"> Cancel </td> 
 <td style="vertical-align:top;width:20.45pt;"> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  **NumberBox****（数字框）**
    
    1.  **实例**
        
        1.  **代码**

<html>

<head>

<title>jQuery EasyUI</title>

href=*"../themes/default/easyui.css"*>

**function** disable()\{

$('\#nn').numberbox('disable');

**function** enable()\{

$('\#nn').numberbox('enable');

$(**function**()\{

$('\#nn').numberbox(\{min:5.5,max:20,precision:2\});

\});

</script>

</head>

<body>

<h1>NumberBox</h1>

The Box can only input number.

<div style=*"margin-bottom: 10px;"*><a href=*"\#"* onclick="disable()">disable</a>

<a href=*"\#"* onclick="enable()">enable</a></div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:77.2pt;"> 选项名 </td> 
 <td style="width:49.85pt;"> 类型 </td> 
 <td style="width:214.35pt;"> 描述 </td> 
 <td style="width:66.3pt;"> 默认值 </td> 
 <td style="width:18.4pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:77.2pt;"> min </td> 
 <td style="vertical-align:top;width:49.85pt;"> 数字 </td> 
 <td style="vertical-align:top;width:214.35pt;"> 文本框中可允许的最小值 </td> 
 <td style="vertical-align:top;width:66.3pt;"> null </td> 
 <td style="vertical-align:top;width:18.4pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:77.2pt;"> max </td> 
 <td style="vertical-align:top;width:49.85pt;"> 数字 </td> 
 <td style="vertical-align:top;width:214.35pt;"> 文本框中可允许的最大值 </td> 
 <td style="vertical-align:top;width:66.3pt;"> null </td> 
 <td style="vertical-align:top;width:18.4pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:77.2pt;"> precision </td> 
 <td style="vertical-align:top;width:49.85pt;"> 数字 </td> 
 <td style="vertical-align:top;width:214.35pt;"> 最高可精确到小数点后几位 </td> 
 <td style="vertical-align:top;width:66.3pt;"> 0 </td> 
 <td style="vertical-align:top;width:18.4pt;"> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  **ValidateBox****（验证框）**
    
    1.  **实例**
        
        1.  **代码**

<html>

<head>

<title>jQuery EasyUI</title>

href=*"../themes/default/easyui.css"*>

input,textarea \{

width: *200px*;

border: *1px solid \#ccc*;

padding: *2px*;

</style>

**function** valid()\{

alert($('\#dfe').validatebox('isValid'));

$(**function**()\{

$.extend($.fn.validatebox.defaults.rules, \{

minLength: \{

validator: **function**(value, param)\{

**return** value.length >= param\[0\];

\},

message: 'Please enter at least \{0\} characters.'

\});

</script>

</head>

<body>

<h1>ValidateBox <a href=*"\#0"* onclick="valid();">EmailisValid</a></h1>

<div>

<table>

<tr>

<td><input class=*"easyui-validatebox"* required=*"true"*

validType=*"length\[1,3\]"*></td>

</tr>

<tr>

<td>Email:</td>

<td><input id=*"dfe"* class=*"easyui-validatebox"*

invalidMessage=*"email**格式错误**"* validType=*"email"*></td>

</tr>

<tr>

<td><input class=*"easyui-validatebox"* required=*"true"*

validType=*"url"*></td>

</tr>

<tr>

<td>testr:</td>

<td><input class=*"easyui-validatebox"* validType=*"minLength\[5\]"*

invalidMessage=*"**至少**5**个字符**"*></td>

</tr>

<tr>

<td><textarea class=*"easyui-validatebox"* required=*"true"*

missingMessage=*"**必填**"* style=*"height: 100px;"*></textarea></td>

</tr>

</table>

</div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:80.3pt;"> 属性名 </td> 
 <td style="width:51.3pt;"> 类型 </td> 
 <td style="width:111.8pt;"> 描述 </td> 
 <td style="width:227.2pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="width:80.3pt;"> required </td> 
 <td style="width:51.3pt;"> 布尔 </td> 
 <td style="width:111.8pt;"> 定义文本域是否为必填项 </td> 
 <td style="width:227.2pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:80.3pt;"> validType </td> 
 <td style="width:51.3pt;"> 字符串 </td> 
 <td style="width:111.8pt;"> 定义字段的验证类型 </td> 
 <td style="width:227.2pt;"> url（匹配电子邮件正则表达式规则）, email（匹配URL正则表达式规则），length[0,100]（允许字符串长度的范围）etc.null </td> 
 </tr> 
 <tr> 
 <td style="width:80.3pt;"> missingMessage </td> 
 <td style="width:51.3pt;"> 字符串 </td> 
 <td style="width:111.8pt;"> 当文本框为空时提示的文本信息 </td> 
 <td style="width:227.2pt;"> This field is required. </td> 
 </tr> 
 <tr> 
 <td style="width:80.3pt;"> invalidMessage </td> 
 <td style="width:51.3pt;"> 字符串 </td> 
 <td style="width:111.8pt;"> 当文本框内容不合法时提示的文本信息 </td> 
 <td style="width:227.2pt;"> null </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **方法**

1.  1.  **扩展**

当然也可以自定义验证规则，重写$.fn.validatebox.defaults.rules 可以定义一个校验器的功能和无效的显示消息。例如，要定义一个minLength有效的类型：

$.extend($.fn.validatebox.defaults.rules, \{

minLength: \{

validator: function(value, param)\{

return value.length >= param\[0\];

\},

message: 'Please enter at least \{0\} characters.'

\});定义好以后我们就可以使用了，下面的代码表示输入的最小长度是5个字符：

1.  **Pagination****（分页）**
    
    1.  **实例**
        
        1.  代码

<html>

<head>

<title>jQuery EasyUI</title>

href=*"../themes/default/easyui.css"*>

$(**function**()\{

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

total:114,

pageSize:15,

pageNumber:2,

pageList:\[10,15,20,30,50,100\],

loading:**false**,

showPageList:**true**,

showRefresh:**true**,

beforePageText:'第',

afterPageText:'页，共\{pages\}页',

displayMsg:'\{from\}-\{to\}/\{total\}',

buttons:\[\{

iconCls:'icon-add',

handler:**function**()\{

alert('add');

\},\{

iconCls:'icon-cut',

handler:**function**()\{

alert('cut');

\},\{

iconCls:'icon-save',

handler:**function**()\{

alert('save');

\}\],

onSelectPage:**function**(pageNumber, pageSize)\{

$(**this**).pagination('loading');

alert('pageNumber:'\+pageNumber+',pageSize:'\+pageSize);

$(**this**).pagination('loaded');

\});

</script>

</head>

<body>

<h1>Pagination</h1>

<div style=*"margin: 10px 0;"*><a href=*"\#"*

onclick="javascript:$('\#pp').pagination(\{loading:false\})">loaded</a> <a

href=*"\#"* onclick="javascript:$('\#pp').pagination(\{loading:true\})">loading</a>

</div>

<div id=*"pp"*

style=*"width: 500px; background: \#efefef; border: 1px solid \#ccc;"*></div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:76.55pt;"> 属性名 </td> 
 <td style="width:42.45pt;"> 类型 </td> 
 <td style="width:191.45pt;"> 描述 </td> 
 <td style="width:127.45pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> total </td> 
 <td style="width:42.45pt;"> 数字 </td> 
 <td style="width:191.45pt;"> 当分页建立时设置记录的总数量 </td> 
 <td style="width:127.45pt;"> 1 </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> pageSize </td> 
 <td style="width:42.45pt;"> 数字 </td> 
 <td style="width:191.45pt;"> 每一页显示的数量 </td> 
 <td style="width:127.45pt;"> 10 </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> pageNumber </td> 
 <td style="width:42.45pt;"> 数字 </td> 
 <td style="width:191.45pt;"> 当分页建立时，显示的页数 </td> 
 <td style="width:127.45pt;"> 1 </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> pageList </td> 
 <td style="width:42.45pt;"> 数组 </td> 
 <td style="width:191.45pt;"> 用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变. </td> 
 <td style="width:127.45pt;"> [10,20,30,50] </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> loading </td> 
 <td style="width:42.45pt;"> 布尔 </td> 
 <td style="width:191.45pt;"> 定义数据是否正在加载 </td> 
 <td style="width:127.45pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> buttons </td> 
 <td style="width:42.45pt;"> 数组 </td> 
 <td style="width:191.45pt;"> 定义自定义按钮，每个按钮包含两个属性：iconCls:&nbsp;&nbsp; 显示背景图像的CSS类 handler:&nbsp;&nbsp; 当一个按钮被点击时的处理函数 </td> 
 <td style="width:127.45pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> showPageList </td> 
 <td style="width:42.45pt;"> 布尔 </td> 
 <td style="width:191.45pt;"> 定义是否显示页面列表 </td> 
 <td style="width:127.45pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> showRefresh </td> 
 <td style="width:42.45pt;"> 布尔 </td> 
 <td style="width:191.45pt;"> 定义是否显示刷新按钮 </td> 
 <td style="width:127.45pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> beforePageText </td> 
 <td style="width:42.45pt;"> 字符串 </td> 
 <td style="width:191.45pt;"> 在输入框组件前显示的标签 </td> 
 <td style="width:127.45pt;"> Page </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> afterPageText </td> 
 <td style="width:42.45pt;"> 字符串 </td> 
 <td style="width:191.45pt;"> 在输入框组件后显示的标签 </td> 
 <td style="width:127.45pt;"> Of&nbsp; {pages} </td> 
 </tr> 
 <tr> 
 <td style="width:76.55pt;"> displayMsg </td> 
 <td style="width:42.45pt;"> 字符串 </td> 
 <td style="width:191.45pt;"> 显示一个页面的信息。 </td> 
 <td style="width:127.45pt;"> Displaying {from} {to} of&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {total}&nbsp;&nbsp;&nbsp; items </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **事件**

<table> 
 <tbody> 
 <tr> 
 <td style="width:91.9pt;"> 事件名 </td> 
 <td style="width:84.35pt;"> 参数 </td> 
 <td style="width:249.85pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:91.9pt;"> onSelectPage </td> 
 <td style="vertical-align:top;width:84.35pt;"> pageNumber, pageSize </td> 
 <td style="vertical-align:top;width:249.85pt;"> 当用户选择一个新页时触发，回调函数包含两个参数：pageNumber: 新页面的页数pageSize: 新页面的大小 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:91.9pt;"> onBeforeRefresh </td> 
 <td style="vertical-align:top;width:84.35pt;"> ageNumber, pageSize </td> 
 <td style="vertical-align:top;width:249.85pt;"> 刷新按钮被点击之前触发，如果返回false则取消刷新操作 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:91.9pt;"> onRefresh </td> 
 <td style="vertical-align:top;width:84.35pt;"> ageNumber, pageSize </td> 
 <td style="vertical-align:top;width:249.85pt;"> 刷新以后触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:91.9pt;"> onChangePageSize </td> 
 <td style="vertical-align:top;width:84.35pt;"> ageSize </td> 
 <td style="vertical-align:top;width:249.85pt;"> 改变页面大小时触发 </td> 
 </tr> 
 </tbody> 
</table>

1.  **Window****（窗口）**

窗口的主要用法和面板（panel）用法差不多

1.  1.  **实例**
        
        1.  **代码**

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Insert title here</title>

href=*"../themes/default/easyui.css"*>

**function** resize()\{

$('\#w').window(\{

title: 'yewen2',

width: 600,

collapsible:**false**,

minimizable:**false**,

maximizable:**false**,

closable:**false**,

closed: **false**,

height: 300,

draggable:**false**,

resizable:**false**,

shadow:**false**,

modal:**true**

\});

**function** open1()\{

$('\#w').window('open');

**function** close1()\{

$('\#w').window('close');

**function** test()\{

$('\#test').window('open');

</script>

</head>

<h1>Window</h1>

<div><a href=*"javascript:void(0)"* onclick="resize()">resize</a> <a

href=*"javascript:void(0)"* onclick="open1()">open</a> <a

href=*"javascript:void(0)"* onclick="close1()">close</a></div>

<div id=*"w"* class=*"easyui-window"* title=*"My Window"* icon=*"icon-save"*

style=*"width: 500px; height: 200px; padding: 5px; background: \#fafafa;"*>

<div region=*"center"* border=*"false"*

style=*"padding: 10px; background: \#fff; border: 1px solid \#ccc;"*>

jQuery EasyUI framework help you build your web page easily.

click <a href=*"\#"* onclick="test()">here</a> to popup another window.</div>

<div region=*"south"* border=*"false"*

style=*"text- align: right; height: 30px; line-height: 30px;"*><a

class=*"easyui-linkbutton"* icon=*"icon-ok"* href=*"javascript:void(0)"*

onclick="resize()">Ok</a> <a class=*"easyui-linkbutton"*

icon=*"icon-cancel"* href=*"javascript:void(0)"* onclick="resize()">Cancel</a>

</div>

<div id=*"test"* class=*"easyui-window"* closed=*"true"* modal=*"true"*

title=*"Test Window"* style=*"width: 300px; height: 100px;"*></div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

大多数的属性和面板(panel)的属性是相同的，下面列出一些Window私有的属性：

<table> 
 <tbody> 
 <tr> 
 <td style="width:63.05pt;"> 属性名 </td> 
 <td style="width:38.45pt;"> 类型 </td> 
 <td style="width:273.45pt;"> 描述 </td> 
 <td style="width:51.15pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.05pt;"> zIndex </td> 
 <td style="vertical-align:top;width:38.45pt;"> 数字 </td> 
 <td style="vertical-align:top;width:273.45pt;"> 窗口的z-index属性，可以通过这个属性来增加 </td> 
 <td style="vertical-align:top;width:51.15pt;"> 9000 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.05pt;"> draggable </td> 
 <td style="vertical-align:top;width:38.45pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:273.45pt;"> 定义窗口是否可被拖动 </td> 
 <td style="vertical-align:top;width:51.15pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.05pt;"> resizable </td> 
 <td style="vertical-align:top;width:38.45pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:273.45pt;"> 定义窗口是否可以被改变大小 </td> 
 <td style="vertical-align:top;width:51.15pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.05pt;"> shadow </td> 
 <td style="vertical-align:top;width:38.45pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:273.45pt;"> 如果设置为true，窗口的阴影也将显示。 </td> 
 <td style="vertical-align:top;width:51.15pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.05pt;"> modal </td> 
 <td style="vertical-align:top;width:38.45pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:273.45pt;"> 定义窗口是否是一个模式窗口。 </td> 
 <td style="vertical-align:top;width:51.15pt;"> false </td> 
 </tr> 
 </tbody> 
</table>

Window也重写了Panel里的一些属性

<table> 
 <tbody> 
 <tr> 
 <td style="width:85.65pt;"> 属性名 </td> 
 <td style="width:55.75pt;"> 类型 </td> 
 <td style="width:194.05pt;"> 描述 </td> 
 <td style="width:90.65pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:85.65pt;"> title </td> 
 <td style="vertical-align:top;width:55.75pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:194.05pt;"> 窗口的标题文本 </td> 
 <td style="vertical-align:top;width:90.65pt;"> New Window </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:85.65pt;"> collapsible </td> 
 <td style="vertical-align:top;width:55.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:194.05pt;"> 定义是否显示可折叠定义按钮 </td> 
 <td style="vertical-align:top;width:90.65pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:85.65pt;"> minimizable </td> 
 <td style="vertical-align:top;width:55.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:194.05pt;"> 定义是否显示最小化按钮 </td> 
 <td style="vertical-align:top;width:90.65pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:85.65pt;"> maximizable </td> 
 <td style="vertical-align:top;width:55.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:194.05pt;"> 定义是否显示最大化按钮 </td> 
 <td style="vertical-align:top;width:90.65pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:85.65pt;"> closable </td> 
 <td style="vertical-align:top;width:55.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:194.05pt;"> 定义是否显示关闭按钮 </td> 
 <td style="vertical-align:top;width:90.65pt;"> true </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **事件**

Window的事件和面板(panel)的事件相同

1.  1.  **方法**

除了”header”和”body”以外，Window的函数方法和面板(panel)的相同

1.  **Panel****（面板）**
    
    1.  **实例**
        
        1.  **代码**

<html>

<head>

<title>jQuery EasyUI</title>

href=*"../themes/default/easyui.css"*>

**function** open1()\{

$('\#p').panel('open');

**function** close1()\{

$('\#p').panel('close');

**function** load1()\{

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

href:'tabs\_href\_test.html'

\});

$('\#p').panel('open');

</script>

</head>

<h1>Panel</h1>

<a href=*"\#"* onclick="close1()">close</a> <a href=*"\#"* onclick="load1()">load</a>

</div>

<div

style=*"width: 600px; height: 300px; border: 1px solid red; padding: 5px;"*>

<div id=*"p"* class=*"easyui-panel"* title=*"My Title"* icon=*"icon-save"*

collapsible=*"true"* minimizable=*"true"* maximizable=*true* closable=*"true"*

style=*"width: 500px; height: 150px; padding: 10px; background: \#fafafa;"*>

panel

</div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:79.05pt;"> 名字 </td> 
 <td style="width:38.75pt;"> 类型 </td> 
 <td style="width:252pt;"> 描述 </td> 
 <td style="width:56.3pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> title </td> 
 <td style="vertical-align:top;width:38.75pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:252pt;"> 在面板头部显示的标题文本 </td> 
 <td style="vertical-align:top;width:56.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> iconCls </td> 
 <td style="vertical-align:top;width:38.75pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:252pt;"> 一个CSS类来显示在面板中的16x16图标 </td> 
 <td style="vertical-align:top;width:56.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> width </td> 
 <td style="vertical-align:top;width:38.75pt;"> 数字 </td> 
 <td style="vertical-align:top;width:252pt;"> 设置面板的宽度 </td> 
 <td style="vertical-align:top;width:56.3pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> height </td> 
 <td style="vertical-align:top;width:38.75pt;"> 数字 </td> 
 <td style="vertical-align:top;width:252pt;"> 设置面板的高度 </td> 
 <td style="vertical-align:top;width:56.3pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> left </td> 
 <td style="vertical-align:top;width:38.75pt;"> 数字 </td> 
 <td style="vertical-align:top;width:252pt;"> 设置面板左侧位置 </td> 
 <td style="vertical-align:top;width:56.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> top </td> 
 <td style="vertical-align:top;width:38.75pt;"> 数字 </td> 
 <td style="vertical-align:top;width:252pt;"> 设置面板的顶部位置 </td> 
 <td style="vertical-align:top;width:56.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> cls </td> 
 <td style="vertical-align:top;width:38.75pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:252pt;"> 给面板添加一个CSS类 </td> 
 <td style="vertical-align:top;width:56.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> headerCls </td> 
 <td style="vertical-align:top;width:38.75pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:252pt;"> 给面板头部添加一个CSS类 </td> 
 <td style="vertical-align:top;width:56.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> bodyCls </td> 
 <td style="vertical-align:top;width:38.75pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:252pt;"> 给面板主体添加一个CSS类 </td> 
 <td style="vertical-align:top;width:56.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> style </td> 
 <td style="vertical-align:top;width:38.75pt;"> 对象 </td> 
 <td style="vertical-align:top;width:252pt;"> 给面板自定义样式 </td> 
 <td style="vertical-align:top;width:56.3pt;"> {} </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> fit </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 当设置为true，面板尺寸将适合它的父容器。 </td> 
 <td style="vertical-align:top;width:56.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> border </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 定义面板的边框 </td> 
 <td style="vertical-align:top;width:56.3pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> doSize </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 当设置为true，面板载创建的时候将被调整和重新布局 </td> 
 <td style="vertical-align:top;width:56.3pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> collapsible </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 定义是否显示可折叠定义按钮 </td> 
 <td style="vertical-align:top;width:56.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> minimizable </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 定义是否显示最小化按钮 </td> 
 <td style="vertical-align:top;width:56.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> maximizable </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 定义是否显示最大化按钮 </td> 
 <td style="vertical-align:top;width:56.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> closable </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 定义是否显示关闭按钮 </td> 
 <td style="vertical-align:top;width:56.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> tools </td> 
 <td style="vertical-align:top;width:38.75pt;"> 数组 </td> 
 <td style="vertical-align:top;width:252pt;"> 自定义工具，每个工具可以包含两个属性：iconCls and handler </td> 
 <td style="vertical-align:top;width:56.3pt;"> [] </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> collapsed </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 定义在初始化的时候折叠面板 </td> 
 <td style="vertical-align:top;width:56.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> minimized </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 定义在初始化的时候最小化面板 </td> 
 <td style="vertical-align:top;width:56.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> maximized </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 定义在初始化的时候最大化面板 </td> 
 <td style="vertical-align:top;width:56.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> closed </td> 
 <td style="vertical-align:top;width:38.75pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:252pt;"> 定义在初始化的时候关闭面板 </td> 
 <td style="vertical-align:top;width:56.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> href </td> 
 <td style="vertical-align:top;width:38.75pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:252pt;"> 一个远程的URL加载数据，然后显示在面板中 </td> 
 <td style="vertical-align:top;width:56.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:79.05pt;"> loadingMessage </td> 
 <td style="vertical-align:top;width:38.75pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:252pt;"> 当加载远程数据时，在面板中显示的信息 </td> 
 <td style="vertical-align:top;width:56.3pt;"> Loading… </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **事件**

<table> 
 <tbody> 
 <tr> 
 <td style="width:86.7pt;"> 名字 </td> 
 <td style="width:65.35pt;"> 参数 </td> 
 <td style="width:274.05pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onLoad </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当远程数据加载时触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onBeforeOpen </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板打开之前触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onOpen </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板打开之后触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onBeforeClose </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板关闭之前触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onClose </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板关闭之后触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onBeforeDestroy </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板销毁之前触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onDestroy </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板关闭之后触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onBeforeCollpase </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板折叠之前触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onCollapse </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板折叠之后触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onBeforeExpand </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板展开之前触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onExpand </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板展开之后触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onResize </td> 
 <td style="vertical-align:top;width:65.35pt;"> width, height </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板调整大小之后触发width: 新的宽度;height: 新的高度 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onMove </td> 
 <td style="vertical-align:top;width:65.35pt;"> left,top </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当面板移动之后触发left: 新的左侧位置top: 新的顶部位置 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onMaximize </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当窗口最大化的时候被触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onRestore </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当窗口恢复到原来的大小时被触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:86.7pt;"> onMinimize </td> 
 <td style="vertical-align:top;width:65.35pt;"> none </td> 
 <td style="vertical-align:top;width:274.05pt;"> 当窗口最小化的时候被触发 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **方法**

<table> 
 <tbody> 
 <tr> 
 <td style="width:41.95pt;"> 名字 </td> 
 <td style="width:65.65pt;"> 参数 </td> 
 <td style="width:318.5pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> options </td> 
 <td style="vertical-align:top;width:65.65pt;"> none </td> 
 <td style="vertical-align:top;width:318.5pt;"> 返回设置的属性值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> panel </td> 
 <td style="vertical-align:top;width:65.65pt;"> none </td> 
 <td style="vertical-align:top;width:318.5pt;"> 返回面板对象 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> header </td> 
 <td style="vertical-align:top;width:65.65pt;"> none </td> 
 <td style="vertical-align:top;width:318.5pt;"> 返回面板头部对象 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> body </td> 
 <td style="vertical-align:top;width:65.65pt;"> none </td> 
 <td style="vertical-align:top;width:318.5pt;"> 返回面板主体对象 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> setTitle </td> 
 <td style="vertical-align:top;width:65.65pt;"> title </td> 
 <td style="vertical-align:top;width:318.5pt;"> 设置面板头部标题 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> open </td> 
 <td style="vertical-align:top;width:65.65pt;"> forceOpen </td> 
 <td style="vertical-align:top;width:318.5pt;"> 当forceOpen设置为true，面板被打开的时候忽略onBeforeOpen回调函数 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> close </td> 
 <td style="vertical-align:top;width:65.65pt;"> forceClose </td> 
 <td style="vertical-align:top;width:318.5pt;"> 当forceClose设置为true，面板被关闭的时候忽略onBeforeClose回调函数 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> destroy </td> 
 <td style="vertical-align:top;width:65.65pt;"> forceDestroy </td> 
 <td style="vertical-align:top;width:318.5pt;"> 当forceDestroy设置为true，面板被销毁的时候忽略onBeforeDestroy回调函数 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> refresh </td> 
 <td style="vertical-align:top;width:65.65pt;"> none </td> 
 <td style="vertical-align:top;width:318.5pt;"> 当设置了href值时，刷新面板来加载远程数据 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> resize </td> 
 <td style="vertical-align:top;width:65.65pt;"> options </td> 
 <td style="vertical-align:top;width:318.5pt;"> 设置面板的大小和布局，这些选项包含以下的属性：width: 新面板的宽度; height: 新面板的高度; left: 新面板的左侧位置; top: 新面板的顶部位置 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:41.95pt;"> move </td> 
 <td style="vertical-align:top;width:65.65pt;"> options </td> 
 <td style="vertical-align:top;width:318.5pt;"> 移动面板到一个新的位置，这些选项包含以下属性: left: 新面板的左侧位置;top: 新面板的顶部位置 </td> 
 </tr> 
 </tbody> 
</table>

1.  **Tabs****（标签）**
    
    1.  **实例**
        
        1.  **代码**

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jQuery EasyUI</title>

var index = 0;

function addTab()\{

index++;

$('\#tt').tabs('add',\{

title:'New Tab ' + index,

content:'Tab Body ' + index,

closable:true

\});

</script>

</head>

<body>

<div>

</div>

</div>

<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs\_href\_test.html"> This is Tab2 width close

button.</div>

<thead>

<tr>

<th field="f1" width="60">field1</th>

<th field="f2" width="60">field2</th>

<th field="f3" width="60">field3</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</div>

<div title="Title1">Content 1</div>

<div title="Title2">Content 2</div>

<div title="Title3">Content 3</div>

</div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:78.95pt;"> 参数名 </td> 
 <td style="width:32.7pt;"> 参数 </td> 
 <td style="width:271pt;"> 描述 </td> 
 <td style="width:43.45pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> width </td> 
 <td style="vertical-align:top;width:32.7pt;"> 数字 </td> 
 <td style="vertical-align:top;width:271pt;"> 标签容器的宽度 </td> 
 <td style="vertical-align:top;width:43.45pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> height </td> 
 <td style="vertical-align:top;width:32.7pt;"> 数字 </td> 
 <td style="vertical-align:top;width:271pt;"> 标签容器的高度 </td> 
 <td style="vertical-align:top;width:43.45pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> idSeed </td> 
 <td style="vertical-align:top;width:32.7pt;"> 数字 </td> 
 <td style="vertical-align:top;width:271pt;"> The base id seed to generate tab panel’s DOM id attribute. </td> 
 <td style="vertical-align:top;width:43.45pt;"> 0 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> plain </td> 
 <td style="vertical-align:top;width:32.7pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:271pt;"> 如果为ture标签没有背景图片 </td> 
 <td style="vertical-align:top;width:43.45pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> fit </td> 
 <td style="vertical-align:top;width:32.7pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:271pt;"> 如果为ture则设置标签的大小以适应它的容器的父容器 </td> 
 <td style="vertical-align:top;width:43.45pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> border </td> 
 <td style="vertical-align:top;width:32.7pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:271pt;"> 如果为true则显示标签容器的边框 </td> 
 <td style="vertical-align:top;width:43.45pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> scrollIncrement </td> 
 <td style="vertical-align:top;width:32.7pt;"> 数字 </td> 
 <td style="vertical-align:top;width:271pt;"> 滚动按钮每次被按下时滚动的像素值 </td> 
 <td style="vertical-align:top;width:43.45pt;"> 100 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:78.95pt;"> scrollDuration </td> 
 <td style="vertical-align:top;width:32.7pt;"> 数字 </td> 
 <td style="vertical-align:top;width:271pt;"> 每次滚动持续的毫秒数 </td> 
 <td style="vertical-align:top;width:43.45pt;"> 400 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **事件**

<table> 
 <tbody> 
 <tr> 
 <td style="width:47.05pt;"> 事件名 </td> 
 <td style="width:54.35pt;"> 参数 </td> 
 <td style="width:324.7pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:47.05pt;"> onLoad </td> 
 <td style="vertical-align:top;width:54.35pt;"> arguments </td> 
 <td style="vertical-align:top;width:324.7pt;"> 当一个AJAX标签加载远程数据完成时被触发，参数和jQuery.ajax成功返回的回调函数相同 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:47.05pt;"> onSelect </td> 
 <td style="vertical-align:top;width:54.35pt;"> title </td> 
 <td style="vertical-align:top;width:324.7pt;"> 当用户选择一个标签面板时被触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:47.05pt;"> onClose </td> 
 <td style="vertical-align:top;width:54.35pt;"> title </td> 
 <td style="vertical-align:top;width:324.7pt;"> 当用户关闭一个标签面板时被触发 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **方法**

<table> 
 <tbody> 
 <tr> 
 <td style="width:51.25pt;"> 方法名 </td> 
 <td style="width:41.8pt;"> 参数 </td> 
 <td style="width:343.1pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:51.25pt;"> resize </td> 
 <td style="vertical-align:top;width:41.8pt;"> none </td> 
 <td style="vertical-align:top;width:343.1pt;"> 调整标签容器的大小和布局 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:51.25pt;"> add </td> 
 <td style="vertical-align:top;width:41.8pt;"> options </td> 
 <td style="vertical-align:top;width:343.1pt;"> 添加新标签面板，可选参数是一个配置对象，详细信息可以查看下面的标签面板属性 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:51.25pt;"> close </td> 
 <td style="vertical-align:top;width:41.8pt;"> title </td> 
 <td style="vertical-align:top;width:343.1pt;"> 关闭一个标签面板，标题参数表明被关闭的面板 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:51.25pt;"> select </td> 
 <td style="vertical-align:top;width:41.8pt;"> title </td> 
 <td style="vertical-align:top;width:343.1pt;"> 选择一个标签面板 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:51.25pt;"> exists </td> 
 <td style="vertical-align:top;width:41.8pt;"> title </td> 
 <td style="vertical-align:top;width:343.1pt;"> 指示特定的标签是否存在 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **标签面板属性**

<table> 
 <tbody> 
 <tr> 
 <td style="width:45.25pt;"> 属性名 </td> 
 <td style="width:51.3pt;"> 类型 </td> 
 <td style="width:300pt;"> 描述 </td> 
 <td style="width:51.35pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> id </td> 
 <td style="vertical-align:top;width:51.3pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:300pt;"> 标签面板的ID属性 </td> 
 <td style="vertical-align:top;width:51.35pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> title </td> 
 <td style="vertical-align:top;width:51.3pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:300pt;"> 标签面板的文本标题 </td> 
 <td style="vertical-align:top;width:51.35pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> content </td> 
 <td style="vertical-align:top;width:51.3pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:300pt;"> 标签面板的主体内容 </td> 
 <td style="vertical-align:top;width:51.35pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> href </td> 
 <td style="vertical-align:top;width:51.3pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:300pt;"> 填充标签内容的远程URL地址 </td> 
 <td style="vertical-align:top;width:51.35pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> cache </td> 
 <td style="vertical-align:top;width:51.3pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:300pt;"> 如果为true，当设置href时，对标签面板进行缓存 </td> 
 <td style="vertical-align:top;width:51.35pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> icon </td> 
 <td style="vertical-align:top;width:51.3pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:300pt;"> 标签面板上标题的图标CSS类 </td> 
 <td style="vertical-align:top;width:51.35pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> closable </td> 
 <td style="vertical-align:top;width:51.3pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:300pt;"> 如果为true，标签面板会显示出关闭按钮，点击可以关闭选项卡面板。 </td> 
 <td style="vertical-align:top;width:51.35pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> selected </td> 
 <td style="vertical-align:top;width:51.3pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:300pt;"> 如果为true，标签标签面板将被选中 </td> 
 <td style="vertical-align:top;width:51.35pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> width </td> 
 <td style="vertical-align:top;width:51.3pt;"> 数字 </td> 
 <td style="vertical-align:top;width:300pt;"> 标签面板的宽度 </td> 
 <td style="vertical-align:top;width:51.35pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:45.25pt;"> height </td> 
 <td style="vertical-align:top;width:51.3pt;"> 数字 </td> 
 <td style="vertical-align:top;width:300pt;"> 标签面板的高度 </td> 
 <td style="vertical-align:top;width:51.35pt;"> auto </td> 
 </tr> 
 </tbody> 
</table>

1.  **Tree****（树）**
    
    1.  **实例**
        
        1.  **代码**

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jQuery EasyUI</title>

href=*"../themes/default/easyui.css"*>

$(**function**()\{

$('\#tt1').tree(\{

animate:**true**,

onClick:**function**(node)\{

alert('you click '\+node.text);

\});

$('\#tt2').tree(\{

checkbox: **true**,

url: 'tree\_data.json',

onClick:**function**(node)\{

alert('you click '\+node.text);

\});

**function** reload()\{

$('\#tt2').tree('reload');

**function** getChecked()\{

**var** nodes = $('\#tt2').tree('getChecked');

**var** s = '';

**for**(**var** i=0; i<nodes.length; i++)\{

**if** (s != '') s += ',';

s += nodes\[i\].text;

alert(s);

**function** getSelected()\{

**var** node = $('\#tt2').tree('getSelected');

alert(node.text);

**function** collapse()\{

**var** node = $('\#tt2').tree('getSelected');

$('\#tt2').tree('collapse',node.target);

**function** expand()\{

**var** node = $('\#tt2').tree('getSelected');

$('\#tt2').tree('expand',node.target);

**function** append()\{

**var** node = $('\#tt2').tree('getSelected');

$('\#tt2').tree('append',\{

parent: node.target,

data:\[\{

text:'new1'

\},\{

text:'new2',

state:'closed',

children:\[\{

text:'subnew1'

\},\{

text:'subnew2'

\}\]

\});

**function** remove()\{

**var** node = $('\#tt2').tree('getSelected');

$('\#tt2').tree('remove', node.target);

**function** isLeaf()\{

**var** node = $('\#tt2').tree('getSelected');

**var** b = $('\#tt2').tree('isLeaf', node.target);

alert(b)

</script>

</head>

<body>

Create from HTML markup

<li>Folder

<ul>

<li>Sub Folder 1

<ul>

</ul>

</li>

</ul>

</li>

</ul>

Create from JSON data

<div style=*"margin: 10px;"*><a href=*"\#"* onclick="reload()">reload</a>

<a href=*"\#"* onclick="getChecked()">getChecked</a> <a href=*"\#"*

onclick="getSelected()">getSelected</a> <a href=*"\#"*

onclick="collapse()">collapse</a> <a href=*"\#"* onclick="expand()">expand</a>

<a href=*"\#"* onclick="append()">append</a> <a href=*"\#"* onclick="remove()">remove</a>

<a href=*"\#"* onclick="isLeaf()">isLeaf</a></div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="width:77.2pt;"> 选项名 </td> 
 <td style="width:49.85pt;"> 类型 </td> 
 <td style="width:214.35pt;"> 描述 </td> 
 <td style="width:66.3pt;"> 默认值 </td> 
 <td style="width:18.4pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:77.2pt;"> url </td> 
 <td style="vertical-align:top;width:49.85pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:214.35pt;"> 一个网址retrive远程数据。 </td> 
 <td style="vertical-align:top;width:66.3pt;"> null </td> 
 <td style="vertical-align:top;width:18.4pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:77.2pt;"> animate </td> 
 <td style="vertical-align:top;width:49.85pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:214.35pt;"> 当节点展开或折叠是否显示动画效果。 </td> 
 <td style="vertical-align:top;width:66.3pt;"> false </td> 
 <td style="vertical-align:top;width:18.4pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:77.2pt;"> checkbox </td> 
 <td style="vertical-align:top;width:49.85pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:214.35pt;"> 是否带复选框 </td> 
 <td style="vertical-align:top;width:66.3pt;"> False </td> 
 <td style="vertical-align:top;width:18.4pt;"> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **事件**

<table> 
 <tbody> 
 <tr> 
 <td style="width:91.9pt;"> 事件名 </td> 
 <td style="width:84.35pt;"> 参数 </td> 
 <td style="width:249.85pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:91.9pt;"> onClick </td> 
 <td style="vertical-align:top;width:84.35pt;"> node </td> 
 <td style="vertical-align:top;width:249.85pt;"> 用户点击一个节点时触发。，该节点参数包含以下属性： id:节点ID text:节点的文本 attributes:节点自定义属性 target:点击DOM对象的目标 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:91.9pt;"> onDblClick </td> 
 <td style="vertical-align:top;width:84.35pt;"> node </td> 
 <td style="vertical-align:top;width:249.85pt;"> 用户双击一个节点时触发，参数同onclick事件 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:91.9pt;"> onLoadSuccess </td> 
 <td style="vertical-align:top;width:84.35pt;"> arguments </td> 
 <td style="vertical-align:top;width:249.85pt;"> 加载数据成功时触发，参数arguments类似jQuery.ajax.的success函数 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:91.9pt;"> onLoadError </td> 
 <td style="vertical-align:top;width:84.35pt;"> arguments </td> 
 <td style="vertical-align:top;width:249.85pt;"> 加载数据成功时触发，参数arguments类似jQuery.ajax.的error函数 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **方法**

<table> 
 <tbody> 
 <tr> 
 <td style="width:63.4pt;"> 方法名 </td> 
 <td style="width:45.7pt;"> 参数 </td> 
 <td style="width:317pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> options </td> 
 <td style="vertical-align:top;width:45.7pt;"> none </td> 
 <td style="vertical-align:top;width:317pt;"> 返回树的所有参数对象 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> loadData </td> 
 <td style="vertical-align:top;width:45.7pt;"> data </td> 
 <td style="vertical-align:top;width:317pt;"> 加载树的数据 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> reload </td> 
 <td style="vertical-align:top;width:45.7pt;"> none </td> 
 <td style="vertical-align:top;width:317pt;"> 重新加载树的数据 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> getRoot </td> 
 <td style="vertical-align:top;width:45.7pt;"> none </td> 
 <td style="vertical-align:top;width:317pt;"> 返回树的root节点 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> getRoots </td> 
 <td style="vertical-align:top;width:45.7pt;"> none </td> 
 <td style="vertical-align:top;width:317pt;"> 返回树的所有root节点 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> getParent </td> 
 <td style="vertical-align:top;width:45.7pt;"> target </td> 
 <td style="vertical-align:top;width:317pt;"> 返回某个节点的父节点 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> getChildren </td> 
 <td style="vertical-align:top;width:45.7pt;"> target </td> 
 <td style="vertical-align:top;width:317pt;"> 返回某个节点的孩子节点 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> getChecked </td> 
 <td style="vertical-align:top;width:45.7pt;"> none </td> 
 <td style="vertical-align:top;width:317pt;"> 获取被勾选的节点 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> getSelected </td> 
 <td style="vertical-align:top;width:45.7pt;"> none </td> 
 <td style="vertical-align:top;width:317pt;"> 获取选中的节点，并返回它，如果没有节点选择返回null。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> isLeaf </td> 
 <td style="vertical-align:top;width:45.7pt;"> target </td> 
 <td style="vertical-align:top;width:317pt;"> 判断某个节点是否叶子节点 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> select </td> 
 <td style="vertical-align:top;width:45.7pt;"> target </td> 
 <td style="vertical-align:top;width:317pt;"> 选择一个节点，目标参数表明该节点的DOM对象。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> collapse </td> 
 <td style="vertical-align:top;width:45.7pt;"> target </td> 
 <td style="vertical-align:top;width:317pt;"> 折叠节点，目标参数表明该节点的DOM对象。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> expand </td> 
 <td style="vertical-align:top;width:45.7pt;"> target </td> 
 <td style="vertical-align:top;width:317pt;"> 展开一个节点，目标参数表明该节点的DOM对象。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> collapseAll </td> 
 <td style="vertical-align:top;width:45.7pt;"> none </td> 
 <td style="vertical-align:top;width:317pt;"> 折叠所有节点 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> expandAll </td> 
 <td style="vertical-align:top;width:45.7pt;"> none </td> 
 <td style="vertical-align:top;width:317pt;"> 展开所有节点 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> append </td> 
 <td style="vertical-align:top;width:45.7pt;"> param </td> 
 <td style="vertical-align:top;width:317pt;"> 一些子节点追加到父节点。参数有两个属性： parent: DOM对象，父节点追加。 data:数组，节点数据。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> toggle </td> 
 <td style="vertical-align:top;width:45.7pt;"> target </td> 
 <td style="vertical-align:top;width:317pt;"> 绑定某个节点的展开或者折叠状态，使之不能再改变。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> remove </td> 
 <td style="vertical-align:top;width:45.7pt;"> target </td> 
 <td style="vertical-align:top;width:317pt;"> 删除一个节点和它的子节点，目标参数表明该节点的DOM对象。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.4pt;"> update </td> 
 <td style="vertical-align:top;width:45.7pt;"> param </td> 
 <td style="vertical-align:top;width:317pt;"> 更新指定的节点，参数param包含如下属性： Target：目标节点； id,text,iconCls,checked,etc. </td> 
 </tr> 
 </tbody> 
</table>

1.  **Layout****（布局）**
    
    1.  **实例**

此例最外层写在了body上，也可以写在某个div上。

1.  1.  1.  **代码**

<html>

<head>

<title>jQuery EasyUI</title>

$(function()\{

var p = $('body').layout('panel','west').panel(\{

onCollapse:function()\{

alert('collapse');

\});

setTimeout(function()\{

$('body').layout('collapse','east');

\},0);

\});

</script>

</head>

<div region="north" border="false" style="height:60px;background:\#B3DFDA;">north region</div>

<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>

<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>

<div region="south" border="false" style="height:50px;background:\#A9FACD;padding:10px;">south region</div>

</div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

所有属性都必须定义在布局面板创建的<div/>标记上。

<table> 
 <tbody> 
 <tr> 
 <td style="width:38.25pt;"> 名称 </td> 
 <td style="width:50.9pt;"> 类型 </td> 
 <td style="width:308.25pt;"> 描述 </td> 
 <td style="width:51.3pt;"> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:38.25pt;"> title </td> 
 <td style="vertical-align:top;width:50.9pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:308.25pt;"> 布局面板的标题文本 </td> 
 <td style="vertical-align:top;width:51.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:38.25pt;"> region </td> 
 <td style="vertical-align:top;width:50.9pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:308.25pt;"> 定义布局面板的位置，该值是下列之一: north,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; south,&nbsp; east,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; west, center. </td> 
 <td style="vertical-align:top;width:51.3pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:38.25pt;"> border </td> 
 <td style="vertical-align:top;width:50.9pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:308.25pt;"> 如果为ture则显示布局面板的边框 </td> 
 <td style="vertical-align:top;width:51.3pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:38.25pt;"> split </td> 
 <td style="vertical-align:top;width:50.9pt;"> 布尔 </td> 
 <td style="vertical-align:top;width:308.25pt;"> 如果为ture则显示分隔栏，用户可以用它来改变布局面板的大小 </td> 
 <td style="vertical-align:top;width:51.3pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:38.25pt;"> icon </td> 
 <td style="vertical-align:top;width:50.9pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:308.25pt;"> 在面板头部显示图标的CSS </td> 
 <td style="vertical-align:top;width:51.3pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:38.25pt;"> href </td> 
 <td style="vertical-align:top;width:50.9pt;"> 字符串 </td> 
 <td style="vertical-align:top;width:308.25pt;"> 从远程地址加载数据的URL </td> 
 <td style="vertical-align:top;width:51.3pt;"> null </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **方法**

1.  **Datagrid****（数据表）**
    
    1.  **实例**
        
        1.  **代码**

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jQuery EasyUI</title>

href=*"../themes/default/easyui.css"*>

$(**function**()\{

$('\#test').datagrid(\{

title:'My Title',

iconCls:'icon-save',

width:800,

height:450,

nowrap: **true**,

striped: **true**,

url:'datagrid\_data.json',

sortName: 'code',

sortOrder: 'desc',

idField:'code',

frozenColumns:\[\[

\{field:'ck',checkbox:**true**\},

\{title:'code',field:'code',width:80,sortable:**true**\}

\]\],

columns:\[\[

\{title:'Base Information',colspan:3\},

\{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,

formatter:**function**(value,rec)\{

**return** 'Edit Delete';

\],\[

\{field:'name',title:'Name',width:120\},

\{field:'addr',title:'Address',width:120,rowspan:2,sortable:**true**\},

\{field:'col4',title:'Col41',width:150,rowspan:2\}

\]\],

pagination:**true**,

rownumbers:**true**,

singleSelect:**true**,

toolbar:\[\{

text:'Add',

iconCls:'icon-add',

handler:**function**()\{

alert('add')

\},\{

text:'Cut',

iconCls:'icon-cut',

disabled:**true**,

handler:**function**()\{

alert('cut')

\},'-',\{

text:'Save',

iconCls:'icon-save',

handler:**function**()\{

alert('save')

\}\]

\});

**var** p = $('\#test').datagrid('getPager');

**if** (p)\{

$(p).pagination(\{

onBeforeRefresh:**function**()\{

alert('before refresh');

\});

**function** resize()\{

$('\#test').datagrid(\{

title: 'New Title',

striped: **true**,

width: 650,

queryParams:\{

p:'param test',

name:'My Name'

\});

**function** getSelected()\{

**var** selected = $('\#test').datagrid('getSelected');

alert(selected.code+":"\+selected.name);

**function** getSelections()\{

**var** ids = \[\];

**var** rows = $('\#test').datagrid('getSelections');

**for**(**var** i=0;i<rows.length;i++)\{

ids.push(rows\[i\].code);

alert(ids.join(':'))

**function** clearSelections()\{

$('\#test').datagrid('clearSelections');

**function** selectRow()\{

$('\#test').datagrid('selectRow',2);

**function** selectRecord()\{

$('\#test').datagrid('selectRecord','002');

**function** unselectRow()\{

$('\#test').datagrid('unselectRow',2);

</script>

</head>

<body>

<h1>DataGrid</h1>

<div style=*"margin-bottom: 10px;"*><a href=*"\#"* onclick="resize()">resize</a>

<a href=*"\#"* onclick="getSelected()">getSelected</a> <a href=*"\#"*

onclick="getSelections()">getSelections</a> <a href=*"\#"*

onclick="clearSelections()">clearSelections</a> <a href=*"\#"*

onclick="selectRow()">selectRow</a> <a href=*"\#"*

onclick="selectRecord()">selectRecord</a> <a href=*"\#"*

onclick="unselectRow()">unselectRow</a></div>

</body>

</html>

1.  1.  1.  **效果图**

1.  1.  **参数**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> Name </td> 
 <td style="border-color:#888888;width:52.85pt;"> Type </td> 
 <td style="border-color:#888888;width:186.75pt;"> Description </td> 
 <td style="border-color:#888888;width:110.95pt;"> Default </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> title </td> 
 <td style="width:52.85pt;"> 字符串 </td> 
 <td style="width:186.75pt;"> 标题文字 </td> 
 <td style="width:110.95pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> iconCls </td> 
 <td style="width:52.85pt;"> 字符串 </td> 
 <td style="width:186.75pt;"> 一个css类，将提供一个背景图片作为标题图标 </td> 
 <td style="width:110.95pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> border </td> 
 <td style="width:52.85pt;"> 布尔 </td> 
 <td style="width:186.75pt;"> 是否显示面板的边界。 </td> 
 <td style="width:110.95pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> width </td> 
 <td style="width:52.85pt;"> 数字 </td> 
 <td style="width:186.75pt;"> 表格的宽度 </td> 
 <td style="width:110.95pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> height </td> 
 <td style="width:52.85pt;"> 数字 </td> 
 <td style="width:186.75pt;"> 表格的高度 </td> 
 <td style="width:110.95pt;"> auto </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> columns </td> 
 <td style="width:52.85pt;"> 数组 </td> 
 <td style="width:186.75pt;"> 表格的列的配置对象，详见下面column属性介绍。 </td> 
 <td style="width:110.95pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> frozenColumns </td> 
 <td style="width:52.85pt;"> 数组 </td> 
 <td style="width:186.75pt;"> 与columns属性相通，但这些列将固定在左侧，不得变动。 </td> 
 <td style="width:110.95pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> striped </td> 
 <td style="width:52.85pt;"> 布尔 </td> 
 <td style="width:186.75pt;"> 是否显示斑马线 </td> 
 <td style="width:110.95pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> method </td> 
 <td style="width:52.85pt;"> 字符串 </td> 
 <td style="width:186.75pt;"> 远程数据的获取类型，可取值为post或get </td> 
 <td style="width:110.95pt;"> post </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> nowrap </td> 
 <td style="width:52.85pt;"> 布尔 </td> 
 <td style="width:186.75pt;"> 是否在一行显示数据 </td> 
 <td style="width:110.95pt;"> true </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> idField </td> 
 <td style="width:52.85pt;"> 字符串 </td> 
 <td style="width:186.75pt;"> 指定哪些字段时标识字段 </td> 
 <td style="width:110.95pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> url </td> 
 <td style="width:52.85pt;"> 字符串 </td> 
 <td style="width:186.75pt;"> 从远程请求数据的地址 </td> 
 <td style="width:110.95pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> loadMsg </td> 
 <td style="width:52.85pt;"> 字符串 </td> 
 <td style="width:186.75pt;"> 当远程加载数据时，现实的等待信息提示 </td> 
 <td style="width:110.95pt;"> Processing, please wait … </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> pagination </td> 
 <td style="width:52.85pt;"> 布尔 </td> 
 <td style="width:186.75pt;"> 是否显示底部分页工具栏 </td> 
 <td style="width:110.95pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> rownumbers </td> 
 <td style="width:52.85pt;"> 布尔 </td> 
 <td style="width:186.75pt;"> 是否显示行号列 </td> 
 <td style="width:110.95pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> singleSelect </td> 
 <td style="width:52.85pt;"> 布尔 </td> 
 <td style="width:186.75pt;"> 是否允许只选择一行 </td> 
 <td style="width:110.95pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> fit </td> 
 <td style="width:52.85pt;"> 布尔 </td> 
 <td style="width:186.75pt;"> 是否允许表格自动缩放，以适应父容器 </td> 
 <td style="width:110.95pt;"> false </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> pageNumber </td> 
 <td style="width:52.85pt;"> 数字 </td> 
 <td style="width:186.75pt;"> 初始化页码 </td> 
 <td style="width:110.95pt;"> 1 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> pageSize </td> 
 <td style="width:52.85pt;"> 数字 </td> 
 <td style="width:186.75pt;"> 初始化页面大小 </td> 
 <td style="width:110.95pt;"> 10 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> pageList </td> 
 <td style="width:52.85pt;"> 数组 </td> 
 <td style="width:186.75pt;"> 初始化页面大小选择清单 </td> 
 <td style="width:110.95pt;"> [10,20,30,40,50] </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> queryParams </td> 
 <td style="width:52.85pt;"> 对象 </td> 
 <td style="width:186.75pt;"> 当请求远程数据时，发送的额外的参数 </td> 
 <td style="width:110.95pt;"> {} </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> sortName </td> 
 <td style="width:52.85pt;"> 字符串 </td> 
 <td style="width:186.75pt;"> 定义哪一列可以排序 </td> 
 <td style="width:110.95pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> sortOrder </td> 
 <td style="width:52.85pt;"> 字符串 </td> 
 <td style="width:186.75pt;"> 定义列排序的方式，递增（asc）或递减（desc） </td> 
 <td style="width:110.95pt;"> asc </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:81.55pt;"> editors </td> 
 <td style="width:52.85pt;"> 对象 </td> 
 <td style="width:186.75pt;"> 定义当编辑某行数据时的编辑器 </td> 
 <td style="width:110.95pt;"> predefined editors </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **Column****参数**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> Name </td> 
 <td style="border-color:#888888;width:46.25pt;"> Type </td> 
 <td style="border-color:#888888;width:275.8pt;"> Description </td> 
 <td style="border-color:#888888;width:64.95pt;"> Default </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> title </td> 
 <td style="width:46.25pt;"> 字符串 </td> 
 <td style="width:275.8pt;"> 列标题文字 </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> field </td> 
 <td style="width:46.25pt;"> 字符串 </td> 
 <td style="width:275.8pt;"> 列字段名称 </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> width </td> 
 <td style="width:46.25pt;"> 数字 </td> 
 <td style="width:275.8pt;"> 列宽度 </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> rowspan </td> 
 <td style="width:46.25pt;"> 数字 </td> 
 <td style="width:275.8pt;"> 该列占几行单元格 </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> colspan </td> 
 <td style="width:46.25pt;"> 数字 </td> 
 <td style="width:275.8pt;"> 该列占几列单元格 </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> align </td> 
 <td style="width:46.25pt;"> 字符串 </td> 
 <td style="width:275.8pt;"> 数据对其方式，可选值有left,right,center </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> sortable </td> 
 <td style="width:46.25pt;"> 布尔 </td> 
 <td style="width:275.8pt;"> 是否允许该列排序 </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> checkbox </td> 
 <td style="width:46.25pt;"> 布尔 </td> 
 <td style="width:275.8pt;"> 是否显示选择框 </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> formatter </td> 
 <td style="width:46.25pt;"> 函数 </td> 
 <td style="width:275.8pt;"> 包含三个参数： value: the field value. rowData: the row record data rowIndex: the row index. </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:62.4pt;"> editor </td> 
 <td style="width:46.25pt;"> string,object </td> 
 <td style="width:275.8pt;"> Indicate the edit type. When string indicates the edit type, when object contains two properties: type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. options: object, the editor options corresponding to the edit type. </td> 
 <td style="width:64.95pt;"> undefined </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **事件**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> Name </td> 
 <td style="border-color:#888888;width:109.65pt;"> Parameters </td> 
 <td style="border-color:#888888;width:236.8pt;"> Description </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onLoadSuccess </td> 
 <td style="width:109.65pt;"> data </td> 
 <td style="width:236.8pt;"> 远程数据加载成功时触发 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onLoadError </td> 
 <td style="width:109.65pt;"> none </td> 
 <td style="width:236.8pt;"> 远程数据加载失败时触发 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onBeforeLoad </td> 
 <td style="width:109.65pt;"> data </td> 
 <td style="width:236.8pt;"> 请求发出去，加载数据前触发。如果返回false，加载数据动作则退出 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onClickRow </td> 
 <td style="width:109.65pt;"> rowIndex, rowData </td> 
 <td style="width:236.8pt;"> 当用户点击某行时触发, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onDblClickRow </td> 
 <td style="width:109.65pt;"> rowIndex, rowData </td> 
 <td style="width:236.8pt;"> 当用户双击某行时触发, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onSortColumn </td> 
 <td style="width:109.65pt;"> sort, order </td> 
 <td style="width:236.8pt;"> 当用户排序某列时触发, the parameters contains: sort: the sort column field name order: the sort column order </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onSelect </td> 
 <td style="width:109.65pt;"> rowIndex, rowData </td> 
 <td style="width:236.8pt;"> 当用户选择某行时触发, the parameters contains: rowIndex: the selected row index, start with 0 rowData: the record corresponding to the selected row </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onUnselect </td> 
 <td style="width:109.65pt;"> rowIndex, rowData </td> 
 <td style="width:236.8pt;"> 当用户取消选择某行时触发, the parameters contains: rowIndex: the unselected row index, start with 0 rowData: the record corresponding to the unselected row </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onBeforeEdit </td> 
 <td style="width:109.65pt;"> rowIndex, rowData </td> 
 <td style="width:236.8pt;"> 当用户开始编辑某行时触发, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onAfterEdit </td> 
 <td style="width:109.65pt;"> rowIndex, rowData, changes </td> 
 <td style="width:236.8pt;"> 当用户完成编辑某行时触发, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row changes: the changed field/value pairs </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:85.65pt;"> onCancelEdit </td> 
 <td style="width:109.65pt;"> rowIndex, rowData </td> 
 <td style="width:236.8pt;"> 当用户退出编辑某行时触发, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  **方法**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> Name </td> 
 <td style="border-color:#888888;width:59.4pt;"> Parameter </td> 
 <td style="border-color:#888888;width:292.3pt;"> Description </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> options </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 返回所有参数的对象 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> getPager </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 返回分页对象 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> resize </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 调整表格大小 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> reload </td> 
 <td style="width:59.4pt;"> param </td> 
 <td style="width:292.3pt;"> 重新加载行 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> fixColumnSize </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 固定列的大小 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> loadData </td> 
 <td style="width:59.4pt;"> param </td> 
 <td style="width:292.3pt;"> 加载本地数据，旧行将被删除 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> getData </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 返回已加载的数据 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> getRows </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 返回当前页的行数 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> getSelected </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 返回第一次选择的行记录 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> getSelections </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 返回所有选定行，如果没选择记录，则返回空数组 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> clearSelections </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 取消所有选择 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> selectAll </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> 选择当前页所有行 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> selectRow </td> 
 <td style="width:59.4pt;"> index </td> 
 <td style="width:292.3pt;"> 选择某行，行索引以0开始 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> selectRecord </td> 
 <td style="width:59.4pt;"> idValue </td> 
 <td style="width:292.3pt;"> 通过id值选择一行 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> unselectRow </td> 
 <td style="width:59.4pt;"> index </td> 
 <td style="width:292.3pt;"> 取消选择某行 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> beginEdit </td> 
 <td style="width:59.4pt;"> index </td> 
 <td style="width:292.3pt;"> 开始编辑某行 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> endEdit </td> 
 <td style="width:59.4pt;"> index </td> 
 <td style="width:292.3pt;"> 结束编辑某行 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> cancelEdit </td> 
 <td style="width:59.4pt;"> index </td> 
 <td style="width:292.3pt;"> 退出编辑某行 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> refreshRow </td> 
 <td style="width:59.4pt;"> index </td> 
 <td style="width:292.3pt;"> 刷新一行的数据 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> appendRow </td> 
 <td style="width:59.4pt;"> row </td> 
 <td style="width:292.3pt;"> 添加新行 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> deleteRow </td> 
 <td style="width:59.4pt;"> index </td> 
 <td style="width:292.3pt;"> 删除一行 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> getChanges </td> 
 <td style="width:59.4pt;"> type </td> 
 <td style="width:292.3pt;"> Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows. </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> acceptChanges </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> Commits all the changes data since it was loaded or since the last time acceptChanges was called. </td> 
 </tr> 
 <tr> 
 <td style="border-color:#888888;width:80.4pt;"> rejectChanges </td> 
 <td style="width:59.4pt;"> none </td> 
 <td style="width:292.3pt;"> Rolls back all the changes data since it was created, or since the last time acceptChanges was called. </td> 
 </tr> 
 </tbody> 
</table>