码迷,mamicode.com
首页 > 其他好文 > 详细

Easyui部分组件讲解

时间:2016-10-08 14:03:48      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

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         实例

1.1.1    HTML代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title> accordion EasyUI</title>

<link rel="stylesheet" type="text/css"  href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script type="text/javascript">

    $( function() {

        $(‘#aa‘).accordion( {

            width : 400,

            height : 200,

            fit : false

        });

    });

</script>

</head>

<body>

<div id="aa" border="true" >

<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">

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

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

</div>

<div title="Title2" icon="icon-reload" selected="true"  style="padding: 10px;">content2</div>

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

</div>

</body>

</html>

1.1.2    效果图

 

1.1.3    扩展

实例html代码中

<div id="aa" border="true">

此行也可写成

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">

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

1.2         参数

1.2.1    容器参数

参数名称

参数类型

描述

默认值

width

数字

可折叠标签的宽度。

auto

height

数字

可折叠标签的高度。

auto

fit

布尔

是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。

false

border

布尔

是否显示边界线。

true

1.2.2    面板参数

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

参数名称

参数类型

描述

默认值

selected

布尔

设置可折叠标签中默认展开的标签页

false

2                DateBox(日期框)

2.1         实例

2.1.1        代码

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title> datebox EasyUI</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

    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>

<input id="dd"></input>

</body>

</html>

2.1.2        效果图

 

2.2         参数

属性名

类型

描述

默认值

currentText

字符串

为当前日期按钮显示的文本

Today

closeText

字符串

关闭按钮显示的文本

Close

disabled

布尔

如果为true则禁用输入框

false

required

布尔

定义输入框是否为必添

false

missingMessage

字符串

当输入框为空时提示的文本

必填

formatter

function

格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串

——

parser

function

分析字符串的函数,这个函数以’date’为参数并返回一个日期

——

2.3         事件

事件名

参数

描述

 

onSelect

date

当选择一个日期时触发

 

2.4         方法

方法名

参数

描述

 

destroy

none

销毁组件

 

disable

none

禁用输入框.

 

enable

none

启用输入框

 

 

3                ComboBox(组合框)

3.1         实例

3.1.1        代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title> ComboBox EasyUI</title>

<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

       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,

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>

<span>Options: </span>

<select id="cc" name="dept" required="true">

    <option value="">==请选择==</option>

    <option value="0">苹果</option>

    <option value="1">香蕉</option>

    <option value="2">鸭梨</option>

    <option value="3">西瓜</option>

    <option value="4">芒果</option>

</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"

}]

3.1.2        效果图

 

3.2         参数

属性名

类型

描述

默认值

width

数字

组件的宽度

auto

listWidth

数字

下拉列表的宽度

null

listHeight

数字

下拉列表的高度

null

valueField

字符串

基础数据值名称绑定到这个组合框

value

textField

字符串

基础数据的字段的名称绑定到这个组合框

text

editable

布尔

定义是否可以直接到文本域中键入文本

true

url

字符串

加载列表数据的远程URL

null

3.3         事件

事件名

参数

描述

onLoadSuccess

none

当远程数据成功加载时触发

onLoadError

none

当远程数据加载失败时触发

onSelect

record

当用户选择了一个列表项时触发

onChange

newValue, oldValue

当文本域字段的值改变时触发

3.4         方法

方法名

参数

描述

select

value

选择下拉列表中的一项

setValue

param

设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。

getValue

none

获取字段值

reload

url

请求远程列表数据.

 

4                Dialog(对话框)

4.1         实例

4.1.1        代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

       $(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>

<div style="margin-bottom: 10px;">

<a href="#" onclick="open1()">open1</a>

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

<div id="dd" icon="icon-save"   style="padding: 5px; width: 400px; height: 200px;">

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

</div>

</body>

</html>

4.1.2        效果图

 

4.2         参数

属性名

类型

描述

默认值

title

字符串

对话框的标题文本

New Dialog

collapsible

布尔

定义是否显示可折叠按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

resizable

布尔

定义对话框是否可编辑大小

false

toolbar

数组

对话框上的工具条,每个工具条包括:

text,

iconCls,

disabled,

handler

etc.

null

buttons

数组

对话框底部的按钮,每个按钮包括:

text,

iconCls,

handler

etc.

null

4.3         事件

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

4.4         方法

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

5                Messager(提示框)

5.1         实例

5.1.1        代码

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title> Messager EasyUI</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

       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>

<div style="height: 600px;"></div>

</body>

</html>

5.1.2        效果图

 

 

 

 

5.2         方法

 

方法名

参数

描述

$.messager.show

options

在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象:
showType:定义如何将显示消息窗口。可用的值是:null,slide,fade,show。默认值是slide。
showSpeed:定义消息窗口完成的时间(以毫秒为单位), 默认值600。
width:定义消息窗口的宽度。 默认值250。
height:定义消息窗口的高度。 默认值100。
msg:定义显示的消息文本。
title:定义显示在标题面板显示的标题文本。
timeout:如果定义为0,消息窗口将不会关闭,除非用户关闭它。如果定义为非0值,当超时后消息窗口将自动关闭。

$.messager.alert

title, msg, icon, fn

显示一个警告窗口。参数如下:
title:显示在标题面板的标题文本。
msg:提示框显示的消息文本。
icon:提示框显示的图标。可用的值是:error,question,info,warning.
fn:当窗口关闭时触发的回调函数。

$.messager.confirm

title, msg, fn

显示一个含有确定和取消按钮的确认消息窗口。参数如下:
title:显示在标题面板的标题文本。
msg:确认消息窗口显示的消息文本。
fn(b):当用户点击按钮后触发的回调函数,如果点击OK则给回调函数传true,如果点击cancel则传false。

$.messager.prompt

title, msg, fn

显示一个确定和取消按钮的信息提示窗口,提示用户输入一些文本。参数如下:
title:显示在标题面板的标题文本。
msg:提示窗口显示的消息文本。
fn(val):用户点击按钮后的回调函,参数是用户输入的内容。

 

 

 

 

5.3         扩展

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

名字

类型

描述

默认值

 

 

ok

字符串

Ok

按钮上的文本

Ok

 

cancel

字符串

Cancel

按钮上的文本

Cancel

 

 

6                NumberBox(数字框)

6.1         实例

6.1.1        代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

       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>

<p>The Box can only input number.</p>

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

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

<input id="nn" required="true" />

</body>

</html>

6.1.2        效果图

 

6.2         参数

选项名

类型

描述

默认值

 

min

数字

文本框中可允许的最小值

null

 

max

数字

文本框中可允许的最大值

null

 

precision

数字

最高可精确到小数点后几位

0

 

 

7                ValidateBox(验证框)

7.1         实例

7.1.1        代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<style type="text/css">

input,textarea {

    width: 200px;

    border: 1px solid #ccc;

    padding: 2px;

}

</style>

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

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>Name:</td>

       <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>URL:</td>

       <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>Note:</td>

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

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

    </tr>

</table>

</div>

</body>

</html>

7.1.2        效果图

 

7.2         参数

属性名

类型

描述

默认值

required

布尔

定义文本域是否为必填项

false

validType

字符串

定义字段的验证类型

url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null

missingMessage

字符串

当文本框为空时提示的文本信息

This field is required.

invalidMessage

字符串

当文本框内容不合法时提示的文本信息

null

7.3         方法

方法名

参数

描述

destroy

none

删除并且销毁组件

validate

none

做验证以确定文本框的内容是否是有效的。

isValid

none

调用验证方法并返回验证结果,true或者false

7.4         扩展

当然也可以自定义验证规则,重写$.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个字符:

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

 

8                Pagination(分页)

8.1         实例

8.1.1        代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

       $(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>

8.1.2        效果图

 

8.2         参数

属性名

类型

描述

默认值

total

数字

当分页建立时设置记录的总数量

1

pageSize

数字

每一页显示的数量

10

pageNumber

数字

当分页建立时,显示的页数

1

pageList

数组

用户可以修改每一页的大小,pageList属性定义了多少种大小可以改变.

[10,20,30,50]

loading

布尔

定义数据是否正在加载

false

buttons

数组

定义自定义按钮,每个按钮包含两个属性:iconCls:   显示背景图像的CSS类

handler:   当一个按钮被点击时的处理函数

null

showPageList

布尔

定义是否显示页面列表

true

showRefresh

布尔

定义是否显示刷新按钮

true

beforePageText

字符串

在输入框组件前显示的标签

Page

afterPageText

字符串

在输入框组件后显示的标签

Of  {pages}

displayMsg

字符串

显示一个页面的信息。

Displaying {from} {to} of       {total}    items

8.3         事件

事件名

参数

描述

onSelectPage

pageNumber, pageSize

当用户选择一个新页时触发,回调函数包含两个参数:pageNumber: 新页面的页数pageSize: 新页面的大小

onBeforeRefresh

ageNumber, pageSize

刷新按钮被点击之前触发,如果返回false则取消刷新操作

onRefresh

ageNumber, pageSize

刷新以后触发

onChangePageSize

ageSize

改变页面大小时触发

 

9                Window(窗口)

窗口的主要用法和面板(panel)用法差不多

9.1         实例

9.1.1        代码

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

 

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

<html style="height:100%;width:100%;">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

       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>

<body style="height: 100%; width: 100%; overflow: hidden; border: none;">

<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 class="easyui-layout" fit="true">

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

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

jQuery EasyUI framework help you build your web page easily. <br />

<br />

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>

</div>

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

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

</body>

</html>

9.1.2        效果图

 

 

9.2         参数

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

属性名

类型

描述

默认值

zIndex

数字

窗口的z-index属性,可以通过这个属性来增加

9000

draggable

布尔

定义窗口是否可被拖动

true

resizable

布尔

定义窗口是否可以被改变大小

true

shadow

布尔

如果设置为true,窗口的阴影也将显示。

true

modal

布尔

定义窗口是否是一个模式窗口。

false

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

属性名

类型

描述

默认值

title

字符串

窗口的标题文本

New Window

collapsible

布尔

定义是否显示可折叠定义按钮

true

minimizable

布尔

定义是否显示最小化按钮

true

maximizable

布尔

定义是否显示最大化按钮

true

closable

布尔

定义是否显示关闭按钮

true

 

9.3         事件

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

9.4         方法

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

 

10          Panel(面板)

10.1    实例

10.1.1    代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

       function open1(){

           $(‘#p‘).panel(‘open‘);

       }

       function close1(){

           $(‘#p‘).panel(‘close‘);

       }

       function load1(){

           $(‘#p‘).panel({

              href:‘tabs_href_test.html‘

           });

$(‘#p‘).panel(‘open‘);

       }

    </script>

</head>

<body style="background: #fafafa;">

<h1>Panel</h1>

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

<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;">

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

</div>

</div>

 

</body>

</html>

10.1.2    效果图

 

10.2    参数

名字

类型

描述

默认值

title

字符串

在面板头部显示的标题文本

null

iconCls

字符串

一个CSS类来显示在面板中的16x16图标

null

width

数字

设置面板的宽度

auto

height

数字

设置面板的高度

auto

left

数字

设置面板左侧位置

null

top

数字

设置面板的顶部位置

null

cls

字符串

给面板添加一个CSS类

null

headerCls

字符串

给面板头部添加一个CSS类

null

bodyCls

字符串

给面板主体添加一个CSS类

null

style

对象

给面板自定义样式

{}

fit

布尔

当设置为true,面板尺寸将适合它的父容器。

false

border

布尔

定义面板的边框

true

doSize

布尔

当设置为true,面板载创建的时候将被调整和重新布局

true

collapsible

布尔

定义是否显示可折叠定义按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

closable

布尔

定义是否显示关闭按钮

false

tools

数组

自定义工具,每个工具可以包含两个属性:iconCls and handler

[]

collapsed

布尔

定义在初始化的时候折叠面板

false

minimized

布尔

定义在初始化的时候最小化面板

false

maximized

布尔

定义在初始化的时候最大化面板

false

closed

布尔

定义在初始化的时候关闭面板

false

href

字符串

一个远程的URL加载数据,然后显示在面板中

null

loadingMessage

字符串

当加载远程数据时,在面板中显示的信息

Loading…

10.3    事件

名字

参数

描述

onLoad

none

当远程数据加载时触发

onBeforeOpen

none

当面板打开之前触发

onOpen

none

当面板打开之后触发

onBeforeClose

none

当面板关闭之前触发

onClose

none

当面板关闭之后触发

onBeforeDestroy

none

当面板销毁之前触发

onDestroy

none

当面板关闭之后触发

onBeforeCollpase

none

当面板折叠之前触发

onCollapse

none

当面板折叠之后触发

onBeforeExpand

none

当面板展开之前触发

onExpand

none

当面板展开之后触发

onResize

width, height

当面板调整大小之后触发width: 新的宽度;height: 新的高度

onMove

left,top

当面板移动之后触发left: 新的左侧位置top: 新的顶部位置

onMaximize

none

当窗口最大化的时候被触发

onRestore

none

当窗口恢复到原来的大小时被触发

onMinimize

none

当窗口最小化的时候被触发

10.4    方法

名字

参数

描述

options

none

返回设置的属性值

panel

none

返回面板对象

header

none

返回面板头部对象

body

none

返回面板主体对象

setTitle

title

设置面板头部标题

open

forceOpen

当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数

close

forceClose

当forceClose设置为true,面板被关闭的时候忽略onBeforeClose回调函数

destroy

forceDestroy

当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数

refresh

none

当设置了href值时,刷新面板来加载远程数据

resize

options

设置面板的大小和布局,这些选项包含以下的属性:width: 新面板的宽度; height: 新面板的高度; left: 新面板的左侧位置; top: 新面板的顶部位置

move

options

移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top: 新面板的顶部位置

 

11          Tabs(标签)

11.1    实例

11.1.1    代码

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

       <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

       <link rel="stylesheet" type="text/css" href="../themes/icon.css">

       <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

       <script type="text/javascript" src="../jquery.easyui.min.js"></script>

       <script>

              var index = 0;

              function addTab(){

                     index++;

                     $(‘#tt‘).tabs(‘add‘,{

                            title:‘New Tab ‘ + index,

                            content:‘Tab Body ‘ + index,

                            closable:true

                     });

              }

       </script>

</head>

<body>

       <h1>Tabs</h1>

       <div>

              <a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>

       </div>

       <br/>

       <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

              <div title="Tab1" style="padding:20px;display:none;">

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

              <div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">

              <table id="test" class="easyui-datagrid" fit="true">

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

                                   <td>d1</td>

                                   <td>d2</td>

                                   <td>d3</td>

                            </tr>

                            <tr>

                                   <td>d11</td>

                                   <td>d21</td>

                                   <td>d31</td>

                            </tr>

                     </tbody>

              </table>

              </div>

              <div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">

                     <iframe scrolling="yes" frameborder="0"  src="http://www.google.com" style="width:100%;height:100%;"></iframe>

              </div>

              <div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">

                     <div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">

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

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

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

                     </div>

              </div>

       </div>

</body>

</html>

11.1.2    效果图

 

11.2    参数

参数名

参数

描述

默认值

width

数字

标签容器的宽度

auto

height

数字

标签容器的高度

auto

idSeed

数字

The base id seed to generate tab panel’s DOM id attribute.

0

plain

布尔

如果为ture标签没有背景图片

false

fit

布尔

如果为ture则设置标签的大小以适应它的容器的父容器

false

border

布尔

如果为true则显示标签容器的边框

true

scrollIncrement

数字

滚动按钮每次被按下时滚动的像素值

100

scrollDuration

数字

每次滚动持续的毫秒数

400

11.3    事件

事件名

参数

描述

onLoad

arguments

当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同

onSelect

title

当用户选择一个标签面板时被触发

onClose

title

当用户关闭一个标签面板时被触发

11.4    方法

方法名

参数

描述

resize

none

调整标签容器的大小和布局

add

options

添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性

close

title

关闭一个标签面板,标题参数表明被关闭的面板

select

title

选择一个标签面板

exists

title

指示特定的标签是否存在

11.5    标签面板属性

属性名

类型

描述

默认值

id

字符串

标签面板的ID属性

null

title

字符串

标签面板的文本标题

 

content

字符串

标签面板的主体内容

 

href

字符串

填充标签内容的远程URL地址

null

cache

布尔

如果为true,当设置href时,对标签面板进行缓存

true

icon

字符串

标签面板上标题的图标CSS类

null

closable

布尔

如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。

false

selected

布尔

如果为true,标签标签面板将被选中

false

width

数字

标签面板的宽度

auto

height

数字

标签面板的高度

auto

 

12          Tree(树)

12.1    实例

12.1.1    代码

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script type="text/javascript">

       $(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>

<h1>Tree</h1>

<p>Create from HTML markup</p>

<ul id="tt1" class="easyui-tree">

    <li><span>Folder</span>

    <ul>

       <li><span>Sub Folder 1</span>

       <ul>

           <li><span><a href="#">File 11</a></span></li>

           <li><span>File 12</span></li>

           <li><span>File 13</span></li>

       </ul>

       </li>

       <li><span>File 2</span></li>

       <li><span>File 3</span></li>

    </ul>

    </li>

    <li><span>File21</span></li>

</ul>

<hr></hr>

<p>Create from JSON data</p>

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

 

<ul id="tt2"></ul>

</body>

</html>

12.1.2    效果图

 

12.2    参数

选项名

类型

描述

默认值

 

url

字符串

一个网址retrive远程数据。

null

 

animate

布尔

当节点展开或折叠是否显示动画效果。

false

 

checkbox

布尔

是否带复选框

False

 

 

12.3    事件

事件名

参数

描述

onClick

node

用户点击一个节点时触发。,该节点参数包含以下属性:

id:节点ID

text:节点的文本

attributes:节点自定义属性

target:点击DOM对象的目标

onDblClick

node

用户双击一个节点时触发,参数同onclick事件

onLoadSuccess

arguments

加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数

onLoadError

arguments

加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数

 

12.4    方法

方法名

参数

描述

options

none

返回树的所有参数对象

loadData

data

加载树的数据

reload

none

重新加载树的数据

getRoot

none

返回树的root节点

getRoots

none

返回树的所有root节点

getParent

target

返回某个节点的父节点

getChildren

target

返回某个节点的孩子节点

getChecked

none

获取被勾选的节点

getSelected

none

获取选中的节点,并返回它,如果没有节点选择返回null。

isLeaf

target

判断某个节点是否叶子节点

select

target

选择一个节点,目标参数表明该节点的DOM对象。

collapse

target

折叠节点,目标参数表明该节点的DOM对象。

expand

target

展开一个节点,目标参数表明该节点的DOM对象。

collapseAll

none

折叠所有节点

expandAll

none

展开所有节点

append

param

一些子节点追加到父节点。参数有两个属性:

parent: DOM对象,父节点追加。

data:数组,节点数据。

toggle

target

绑定某个节点的展开或者折叠状态,使之不能再改变。

remove

target

删除一个节点和它的子节点,目标参数表明该节点的DOM对象。

update

param

更新指定的节点,参数param包含如下属性:

Target:目标节点;

id,text,iconCls,checked,etc.

 

13          Layout(布局)

13.1    实例

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

13.1.1    代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

       <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

       <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

       <script type="text/javascript" src="../jquery.easyui.min.js"></script>

       <script>

              $(function(){

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

                            onCollapse:function(){

                                   alert(‘collapse‘);

                            }

                     });

                     setTimeout(function(){

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

                     },0);

              });

       </script>

</head>

<body class="easyui-layout">

       <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 region="center" title="Main Title">

       </div>

</body>

</html>

13.1.2    效果图

 

13.2    参数

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

名称

类型

描述

默认值

title

字符串

布局面板的标题文本

null

region

字符串

定义布局面板的位置,该值是下列之一: north,       south,  east,       west, center.

 

border

布尔

如果为ture则显示布局面板的边框

true

split

布尔

如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小

false

icon

字符串

在面板头部显示图标的CSS

null

href

字符串

从远程地址加载数据的URL

null

 

13.3    方法

方法名

参数

描述

panel

region

返回某个方位的面板,参数region取值可以是:north,south,east,west,center

collapse

region

收缩某个方位的面板,参数region取值可以是:north,south,east,west

expand

region

展开某个方位的面板,参数region取值可以是:north,south,east,west

 

 

 

 

14          Datagrid(数据表)

14.1    实例

14.1.1    代码

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

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

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

       $(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 ‘<span style="color:red">Edit Delete</span>‘;

                     }

                  }

              ],[

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

 

<table id="test"></table>

 

</body>

</html>

14.1.2    效果图

 

14.2    参数

Name

Type

Description

Default

title

字符串

标题文字

null

iconCls

字符串

一个css类,将提供一个背景图片作为标题图标

null

border

布尔

是否显示面板的边界。

true

width

数字

表格的宽度

auto

height

数字

表格的高度

auto

columns

数组

表格的列的配置对象,详见下面column属性介绍。

null

frozenColumns

数组

与columns属性相通,但这些列将固定在左侧,不得变动。

null

striped

布尔

是否显示斑马线

false

method

字符串

远程数据的获取类型,可取值为post或get

post

nowrap

布尔

是否在一行显示数据

true

idField

字符串

指定哪些字段时标识字段

null

url

字符串

从远程请求数据的地址

null

loadMsg

字符串

当远程加载数据时,现实的等待信息提示

Processing, please wait …

pagination

布尔

是否显示底部分页工具栏

false

rownumbers

布尔

是否显示行号列

false

singleSelect

布尔

是否允许只选择一行

false

fit

布尔

是否允许表格自动缩放,以适应父容器

false

pageNumber

数字

初始化页码

1

pageSize

数字

初始化页面大小

10

pageList

数组

初始化页面大小选择清单

[10,20,30,40,50]

queryParams

对象

当请求远程数据时,发送的额外的参数

{}

sortName

字符串

定义哪一列可以排序

null

sortOrder

字符串

定义列排序的方式,递增(asc)或递减(desc)

asc

editors

对象

定义当编辑某行数据时的编辑器

predefined editors

 

14.3    Column参数

Name

Type

Description

Default

title

字符串

列标题文字

undefined

field

字符串

列字段名称

undefined

width

数字

列宽度

undefined

rowspan

数字

该列占几行单元格

undefined

colspan

数字

该列占几列单元格

undefined

align

字符串

数据对其方式,可选值有left,right,center

undefined

sortable

布尔

是否允许该列排序

undefined

checkbox

布尔

是否显示选择框

undefined

formatter

函数

包含三个参数:

value: the field value.

rowData: the row record data

rowIndex: the row index.

undefined

editor

string,object

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.

undefined

 

14.4    事件

Name

Parameters

Description

onLoadSuccess

data

远程数据加载成功时触发

onLoadError

none

远程数据加载失败时触发

onBeforeLoad

data

请求发出去,加载数据前触发。如果返回false,加载数据动作则退出

onClickRow

rowIndex, rowData

当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row

onDblClickRow

rowIndex, rowData

当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row

onSortColumn

sort, order

当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order

onSelect

rowIndex, rowData

当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row

onUnselect

rowIndex, rowData

当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row

onBeforeEdit

rowIndex, rowData

当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row

onAfterEdit

rowIndex, rowData, changes

当用户完成编辑某行时触发, 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

onCancelEdit

rowIndex, rowData

当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row

 

14.5    方法

Name

Parameter

Description

options

none

返回所有参数的对象

getPager

none

返回分页对象

resize

none

调整表格大小

reload

param

重新加载行

fixColumnSize

none

固定列的大小

loadData

param

加载本地数据,旧行将被删除

getData

none

返回已加载的数据

getRows

none

返回当前页的行数

getSelected

none

返回第一次选择的行记录

getSelections

none

返回所有选定行,如果没选择记录,则返回空数组

clearSelections

none

取消所有选择

selectAll

none

选择当前页所有行

selectRow

index

选择某行,行索引以0开始

selectRecord

idValue

通过id值选择一行

unselectRow

index

取消选择某行

beginEdit

index

开始编辑某行

endEdit

index

结束编辑某行

cancelEdit

index

退出编辑某行

refreshRow

index

刷新一行的数据

appendRow

row

添加新行

deleteRow

index

删除一行

getChanges

type

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.

acceptChanges

none

Commits all the changes data since it was loaded or since the last time acceptChanges was called.

rejectChanges

none

Rolls back all the changes data since it was created, or since the last time acceptChanges was called.

Easyui部分组件讲解

标签:

原文地址:http://www.cnblogs.com/huangf714/p/5938017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!