无标题文档

jQuery.EasyUI-1.3.2 API

古月

制作日期：2013年3月7日

  • 第一次制作离线文档，不足之处还望见谅。
  • 网络上还没发现有EasyUI的中文API，自己整理了一下，英语水平有限。


文档

每个组件的easyui有属性、方法和事件。用户可以方便地扩展。

属性

属性定义在 jQuery.fn.{plugin}.defaults. 例如,对话框的属性定义在 jQuery.fn.dialog.defaults.

事件

这个事件(回调函数)也定义在jQuery.fn.{plugin}.defaults.

方法

调用方法语法: $('selector').plugin('method', parameter);

说明:

  • selector是jquery对象选择器.
  • plugin 是插件名称.
  • method是现有的方法对应的插件.
  • parameter是参数对象,可以是一个对象,字符串, ...

方法定义在 jQuery.fn.{plugin}.methods. 每个方法有两个参数: jq 和 param. 第一个参数 'jq' 是必须的, 这指的是,jQuery对象. 第二个参数 'param' 指的是真正通过该方法的参数. 例如, 扩展方法命名 'mymove' 在对话框组件, 代码看起来像这样:

$.extend($.fn.dialog.methods, {
     mymove: function(jq, newposition){
        return jq.each(function(){
            $(this).dialog('move', newposition);
        });
    }
});
现在你可以用叫 'mymove' 的方法将对话框来指定位置:

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

开始使用jQuery EasyUI

下载类库并且导入 EasyUI的CSS和JavaScript文件进入页面.

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

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

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

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

一旦你已经包括了这些EasyUI的必须文件,您可以定义一个EasyUI组件从标记或使用JavaScript. 例如,定义一个面板可折叠功能, 您可以编写这样的HTML代码:

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"title="My Panel" iconCls="icon-save" collapsible="true"> The panel content </div>

当从标记创建一个组件时, 'data-options'属性可以用来支持HTML5和从1.3版本兼容的属性名称。所以你可以改写上面的代码像这样:

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="My Panel" data-options="iconCls:'icon-save',collapsible:true"> The panel content </div>

下面的代码显示了如何创建一个组合框,绑定”onSelect事件”.

<input class="easyui-combobox" name="language" data-options=" url:'combobox_data.json', valueField:'id', textField:'text', panelHeight:'auto', onSelect:function(record){ alert(record.text) }" />


解析器

用法

    $.parser.parse();		// parse all the page
    $.parser.parse('#cc');	// parse the specified node

属性

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

事件

名称 | 参数 | 说明
$.parser.onComplete | context | 当解析器完成其解析时触发.

方法

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


加载器

用法

加载EasyUI模块
    easyloader.base = '../';    // set the easyui base directory
    easyloader.load('messager', function(){        // load the specified module
        $.messager.alert('Title', 'load ok');
    });
加载script 从一个绝对路径url
    using('http://code.jquery.com/jquery-1.4.4.min.js', function(){
          // ...
    });
加载 script从一个相对路径url
    // the script path relative to easyui directory
    using('./myscript.js', function(){
        // ...
    });

属性

名称 | 类型 | 说明 | 默认
modules | object | 预定义模块. |
locales | object | 预定义路径. |
base | string | easyui基本目录的, 必须结束与 '/'. | 基本目录会自动设置相对 easyload.js
theme | string | 主题的名称定义在 'themes' 目录 | default
css | boolean | 定义如果加载css文件当加载模块 | true
locale | string | 路径名称 | null
timeout | number | 超时的值以毫秒为单位。如果超时触发事件. | 2000

Defined locales

  • af
  • bg
  • ca
  • cs
  • cz
  • da
  • de
  • en
  • es
  • fr
  • nl
  • tr
  • zh_CN
  • zh_TW

Events

名称 | 参数 | 说明
onProgress | name | 模块加载成功时触发.
onLoad | name | 模块以及其依赖加载成功时触发.

Methods

名称 | 参数 | 说明
load | module, callback | 载指定的模块。当负载成功回调函数会被调用. 模块参数有效类型: 一个单一的模块名称 一个模块阵列 一个css文件,最后“. css” 一个js文件,最后的. js”
﻿


可拖放

重写默认的类 $.fn.draggable.defaults.

应用实例

创建一个可拖拽元素标记

<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>

创建一个可拖拽元素使用javascript.

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

<div id="title" style="background:#ccc;">title</div>

</div>

$('#dd').draggable({ handle:'#title'});

属性

名称 | 类型 | Description | Default
proxy string,function 一个代理元素被用来当拖动, 当设置为“克隆”,一个克隆元素作为代理. 如果一个函数被指定, 它必须返回jQuery对象.

下面的例子显示了如何创建一个简单的代理对象.

$('.dragitem').draggable({
    proxy: function(source){
        var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
        p.html($(source).html()).appendTo('body');
        return p;
    }
});
null
revert | boolean | 如果设置为true, 元素将回到其初始位置当拖动停止. | false
cursor | string | 设置css当拖动. | move
deltaX | number | 拖动元素对应于当前光标位置x | null
deltaY | number | 拖动元素对应于当前光标位置y | null
handle | selector | 当被拖拽的时候事件 | null
disabled | boolean | True为停止拖拽 | false
edge | number | 拖动宽度,可以开始拖拽. | 0
axis | string | 定义了轴的动作拖元素,可用的值是“v”或“h”,当设置为null会跨越“v”和“h”方向. | null

事件

名称 | 变量 | 说明
onBeforeDrag | e | 在拖拽之前的事件，如果返回false则放弃拖拽
onStartDrag | e | 在拖拽开始时的事件
onDrag | e | 当拖拽的时候.返回false,将不做实际上拖.
onStopDrag | e | 当停止拖拽的时候事件.

方法

名称 | 变量 | 说明
options | none | 返回选项属性.
proxy | none | 返回 drag 代理如果代理属性设置.
enable | none | 使拖动操作。
disable | none | 禁用拖动操作。


放置

重写默认方法 $.fn.droppable.defaults.

应用实例

创建一个可以放置的区域。

<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>

创建一个可以放置的区域使用javascript。

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

$('#dd').droppable({ accept:'#d1,#d3'});

属性

名称 | 类型 | 说明 | 默认
accept | selector | 确定哪些可拖拽元素将被接受 | null
disabled | boolean | True停止拖拽 | false

事件

名称 | 参数 | 说明
onDragEnter | e,source | 当拖拽元素被拖进。源参数表明拖DOM元素。执行事件
onDragOver | e,source | 当拖拽元素结束了。源参数表明拖DOM元素。执行事件
onDragLeave | e,source | 当拖拽元素被拖出。源参数表明拖DOM元素。执行事件.
onDrop | e,source | 当拖拽元素被拖拽。源参数表明拖DOM元素。执行事件

方法

名称 | 参数 | 说明
options | none | 返回选择对象。
enable | none | 允许可拖拽的功能。
disable | none | 金庸可拖拽的功能。


可变尺寸

重写默认方法 $.fn.resizable.defaults.

应用实例：

创建可调整大小的对象从标记。

<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>

使用javascript创建可调整大小的对象。

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

$('#rr').resizable({ maxWidth:800, maxHeight:600});

属性

姓名 | 类型 | 说明 | 默认
disabled | boolean | True不能调整大小。 | false
handles | string | 表示方向的可调整大小的,“n”是北方,“e”是东方,等等。. | n, e, s, w, ne, se, sw, nw, all
minWidth | number | 当调整大小的最小宽度。 | 10
minHeight | number | 当调整大小的最小高度。 | 10
maxWidth | number | 当调整大小的最大宽度。 | 10000
maxHeight | number | 当调整大小的最大高度。 | 10000
edge | number | 边界的边缘需要调整大小。 | 5

事件

名称 | 参数 | 说明
onStartResize | e | 开始调整大小的时候
onResize | e | 在整个调整过程. 当返回false,DOM元素不会徒实际调整行动.
onStopResize | e | 在停止调整的时候

方法

名称 | 参数 | 说明
options | none | 返回可调整大小的选项.
enable | none | 启用可调整大小的功能.
disable | none | 禁用可调整大小的功能.


分页

重写默认方法 $.fn.pagination.defaults.

这个分页允许用户导航数据的页面. 它支持可配置的选项页面导航和页面长度的选择. 用户可以添加自定义按钮在右边的页码,增强其功能。

依赖

  • linkbutton

应用实例

从标记创建分页

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>

使用javascript创建分页。

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

$('#pp').pagination({ total:2000, pageSize:10});

让我们创建ajax分页与面板和分页插件。当用户选择一个新页面,面板将显示相应的内容指定的页面。

<div id="content" class="easyui-panel" style="height:200px" data-options="href:'show_content.php?page=1'"> </div>

<div class="easyui-pagination" style="border:1px solid #ccc;" data-options=" total: 2000, pageSize: 10, onSelectPage: function(pageNumber, pageSize){ $('#content').panel('refresh', 'show_content.php?page='+pageNumber); }"> </div>

面板上显示第一页内容默认情况下。当用户浏览页面,“onSelectPage”事件被触发, 在我们调用'refresh'方法内容面板加载新的页面内容与一个新的URL参数。

属性

名称 | 类型 | 说明 | Default
total | number | 总记录数,应创建时设置分页。 | 1
pageSize | number | 页面传值多少。 | 10
pageNumber | number | 显示页码当创建分页。 | 1
pageList array 用户可以改变页面传值多少。pageList的属性定义了页面传值大小可以改变。

代码实例:

$('#pp').pagination({pageList: [10,20,50,100]});
[10,20,30,50]
loading | boolean | 定义数据是否是加载的 | false
buttons array

定义了自定义按钮,每个按钮包含两个属性:

iconCls:CSS类,它将显示一个背景图像
handler: 一个处理函数当按钮被单击

这个自定义按钮可以创建从标记:

<div class="easyui-pagination" style="border:1px solid #ccc" data-options="total: 114,
            buttons: [ {iconCls:'icon-add',handler:function(){alert('add')}},'-',
                       {iconCls:'icon-save',handler:function(){alert('save')}}]">
</div>

定制按钮也可以使用javascript创建:

$('#pp').pagination({
         total: 114,
         buttons: [{
                     iconCls:'icon-add',
                     handler:function(){
                           alert('add')
                     }
                   },'-',
                   {
                     iconCls:'icon-save',
                     handler:function(){
                           alert('save')
                     }
                   }]
});
null
showPageList | boolean | 定义是否显示页面列表。 | true
showRefresh | boolean | 定义是否显示刷新按钮。 | true
beforePageText | string | 显示一个标签在输入组件。 | Page
afterPageText | string | 显示一个标签后输入组件。 | of {pages}
displayMsg | string | 显示一个页面信息。 | 显示 {from} 到 {to} 一共 {total}成员

事件

名称 | 参数 | 说明
onSelectPage pageNumber, pageSize 当用户选择一个新的页面。回调函数包含两个参数:
pageNumber: 新页面数量
pageSize: 新页面元素个数

代码示例:

$('#pp').pagination({
         onSelectPage:function(pageNumber, pageSize){
                        $(this).pagination('loading');
                        alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
                        $(this).pagination('loaded');
                      }
});
onBeforeRefresh | pageNumber, pageSize | 点击刷新按钮前触发事件,返回false取消刷新操作。
onRefresh | pageNumber, pageSize | 刷新后触发事件。
onChangePageSize | pageSize | 改变页面显示元素个数触发事件。

方法

名称 | 参数 | 说明
options | none | 返回选择对象。
loading | none | 使分页成为正在加载状态。
loaded | none | 使分页成为以加载状态。
refresh options 刷新并显示页面信息。这个方法是可用的,从1.3版本以后。

代码实例 :

$('#pp').pagination('refresh');	// refresh the pager bar information
$('#pp').pagination('refresh',{	// change options and refresh pager bar information
                     total: 114,
                     pageNumber: 6
});
select page 选择一个新页面。页面索引从1开始。这个方法是可用的,从1.3版本以后。

代码实例:

$('#pp').pagination('select');	// refresh the current page
$('#pp').pagination('select', 2);	// select the second page


搜索框

重写默认方法 $.fn.searchbox.defaults.

这个searchbox提示用户输入要查找的值。它可以把一个菜单,允许用户选择不同的搜索类别。搜索行动时将执行用户按回车键或点击搜索按钮在右边的组件。

依赖

  • menubutton

应用实例

创建SearchBox

1. 创建从标记。添加“easyui-searchbox”类<input/>标记。

<script type="text/javascript">function qq(value,name){alert(value+":"+name) }</script>

<input id="ss" class="easyui-searchbox" style="width:300px" data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>

<div id="mm" style="width:120px"> <div data-options="name:'all',iconCls:'icon-ok'">All News</div> <div data-options="name:'sports'">Sports News</div> </div>

2. 以JavaScript的方式创建。

<input id="ss"></input>

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

<div data-options="name:'all',iconCls:'icon-ok'">All News</div>

<div data-options="name:'sports'">Sports News</div>

</div>

$('#ss').searchbox({

searcher : function(value,name){alert(value + "," + name)},

menu:'#mm',

prompt:'Please Input Value'

});

属性

名称 | 类型 | 说明 | 默认
width | number | 组件的宽度。 | auto
height | number | 组件的高度。这个属性可以从版本1.3.2开始使用。 | 22
prompt string 提示信息显示在输入框。 ''
value string 输入的值。 ''
menu selector 搜索类型菜单。每个菜单项可以有以下属性:
name: 搜索类型名称。
selected: 当前的选择搜索类型名称。

下面的例子显示了如何定义一个选择搜索类型名称。

<input class="easyui-searchbox" style="width:300px" data-options="menu:'#mm'" />
<div id="mm" style="width:150px">
      <div data-options="name:'item1'">Search Item1</div>
      <div data-options="name:'item2',selected:true">Search Item2</div>
      <div data-options="name:'item3'">Search Item3</div>
</div>
null
searcher | function(value,name) | 呈现在用户面前的搜索功能,用户按下时将调用搜索按钮或按回车键。 | null

方法

名称 | 参数 | 说明
options | none | 返回选择对象。
menu none 返回搜索类型菜单对象。下面的例子显示了如何改变菜单项的图标。
var m = $('#ss').searchbox('menu');  // 获得菜单对象
var item = m.menu('findItem', 'Sports News');  // 找到菜单项

// 改变菜单项的图标
m.menu('setIcon', {
     target: item.target,
     iconCls: 'icon-save'
});

// 选择搜索类型名称
$('#ss').searchbox('selectName', 'sports');
textbox | none | 返回文本框对象。
getValue | none | 返回当前搜索值。
setValue | value | 设置一个新的搜索值。
getName | none | 返回当前搜索类型名称。
selectName name 选择当前搜索类型名称。

代码示例:

$('#ss').searchbox('selectName', 'sports');
destroy | none | 摧毁这个组件。
resize | width | 重置该组件的宽度。


进度栏

重写默认方法 $.fn.progressbar.defaults.

progressbar提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展,让用户知道当前执行一些操作。

依赖

  • none

应用实例

创建ProgressBar

可以创建的ProgressBar组件从html标记或以编程的方式。创建从标记甚至更容易。添加“easyui-progressbar”类< div / >标记。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

创建ProgressBar使用javascript。

<div id="p" style="width:400px;"></div>

$('#p').progressbar({ value: 60});
获取或设置值

我们得到的当前值和设置一个新值为该组件。

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

if (value < 100){

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

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

}

属性

名称 | 类型 | 说明 | 默认
width | string | 设置progressbar宽度。 | auto
height | number | 组件的高度。这个属性可以从版本1.3.2.可以使用 | 22
value | number | 百分比值 | 0
text | string | 文本模板上显示的组件。 | {value}%

事件

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

代码示例:

$('#p').progressbar({
        onChange: function(value){
                  alert(value)
        }
});

方法

名称 | 参数 | 说明
options | none | 返回选择对象。
resize width 调整组件。

代码示例:

$('#p').progressbar('resize');  // resize the bar with original width
$('#p').progressbar('resize', 350);  // resize the bar using a new width
getValue | none | 返回当前进度值。
setValue | value | 设置一个新的进度值。


面板

重写默认方法 $.fn.panel.defaults.

面板是用来作为一个容器对于其他内容。这是最基本的组件构建其他组件(如layout, tabs, accordion, 等等) I还提供内置的可折叠,可闭,允许最大化和允许最小化行为和其他定制的行为。面板可以很容易地嵌入到web页面的任何位置。

应用实例

创建面板

1. 创建面板通过标记

从标记创建甚至更容易。添加“easyui-panel”class< div / >标记。

<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true">

<p>panel content.</p>

<p>panel content.</p>

</div>

2. 以脚本的方式创建面板

让我们创建面板右上角的工具上。

<div id="p" style="padding:10px;">

<p>panel content.</p>

<p>panel content.</p>

</div>

$('#p').panel({

width:500,

height:150,

title: 'My Panel',

tools: [{

iconCls:'icon-add',

handler : function(){

alert('new')}

},{

iconCls:'icon-save',

handler:function(){

alert('save')}

} ]

});

移动面板

所谓的“move”方法来移动面板到一个新的位置

$('#p').panel('move',{ left:100, top:100});

加载内容

让我们通过ajax加载面板内容并显示一些消息当加载成功。

$('#p').panel({

href:'content_url.php',

onLoad : function(){

alert('loaded successfully');

}

});

属性

名称 | 类型 | 说明 | Default
id | string | 面板的id属性。 | null
title | string | 标题文本显示在面板标题。 | null
iconCls | string | 一个CSS类来显示一个16 x16图标面板。 | null
width | number | 设置面板宽度。 | auto
height | number | 设置面板的高度。 | auto
left | number | 设置面板左位置。 | null
top | number | 设置面板顶部的位置。 | null
cls | string | 添加一个CSS类的面板。 | null
headerCls | string | 添加一个CSS类面板标题。 | null
bodyCls | string | 添加一个CSS类面板的主体。 | null
style object 添加一个自定义的规范风格的面板。

代码示例来改变面板边框宽度:

<div class="easyui-panel" style="width:200px;height:100px" data-options="style:{borderWidth:2}"></div>
{}
fit boolean 当真正的设置面板尺寸适合它的父容器。他下面的例子显示了一个面板,可以自动调整大小以最大化填充父容器
<div style="width:200px;height:100px;padding:5px">
     <div class="easyui-panel" style="width:200px;height:100px" data-options="fit:true,border:false">Embedded Panel</div>
</div>
false
border | boolean | 是否显示面板定义边界。 | true
doSize | boolean | 如果设置为true,面板将创建时调整和做布局。 | true
noheader | boolean | 如果设置为true,那么将不会创建面板header。 | false
content | string | 面板的正文内容。 | null
collapsible | boolean | 定义是否显示折叠按钮。 | false
minimizable | boolean | 是否显示最小化按钮 | false
maximizable | boolean | 是否显示最大化按钮 | false
closable | boolean | 是否显示关闭按钮 | false
tools array,selector 自定义工具,可能的值:
1) 一个数组,每个元素包含iconCls和handler属性。
2) 一个选择器,该选择器显示工具

面板工具可以被声明与存在< div >标记:

<div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'"></div>
<div id="tt">
    <a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>

面板工具也可以通过数组定义:

<div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:[
{
  iconCls:'icon-add',
  handler:function(){
         alert('add')
      }
},{
  iconCls:'icon-edit',
  handler:function(){
         alert('edit')
      }
}]"></div>
[]
collapsed | boolean | 定义面板在初始化的时候是否收缩。 | false
minimized | boolean | 定义面板在初始化的时候是否最小化。 | false
maximized | boolean | 定义面板在初始化的时候是否最大化。 | false
closed | boolean | 定义面板在初始化的时候是否关闭。 | false
href string 一个URL加载远程数据,然后显示在面板。注意,内容不会被加载,直到面板是开放和扩大。这是一个创建延迟加载面板有用的:实例
<div id="pp" class="easyui-panel" style="width:300px;height:200px" data-options="href='get_content.php',closed:true">  </div>
<a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>
null
cache | boolean | True为缓存展板内容,从href载入。 | true
loadingMessage | string | 当加载远程数据显示一个消息在面板。 | Loading…
extractor function 定义了如何提取内容从ajax响应,返回提取数据。
extractor: function(data){
    var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
    var matches = pattern.exec(data);
    if (matches){
         return matches[1];	// only extract body content
    } else {
         return data;
    }
}

事件

名称 | 参数 | 说明
onLoad | none | 当加载数据的时候执行事件。
onBeforeOpen | none | 面板打开时执行事件,返回false停止打开。
onOpen | none | 在面板打开后执行事件。
onBeforeClose none 面板关闭时执行事件,返回false停止关闭。下面的面板不能关闭。
<div class="easyui-panel" style="width:300px;height:200px;" title="My Panel" data-options="onBeforeClose:function(){return false}">The panel cannot be closed.</div>
onClose | none | 在面板关闭执行事件。
onBeforeDestroy | none | 面板销毁前执行事件,返回false停止销毁。
onDestroy | none | 面板销毁后执行事件。
onBeforeCollapse | none | 面板收缩前执行事件,返回false停止收缩。
onCollapse | none | 面板收缩后执行事件。
onBeforeExpand | none | 面板展开前执行事件,返回false停止展开。
onExpand | none | 面板展开后执行事件。
onResize width, height 改变面板大小执行事件。
width: 新的外宽度
height: 新的外高度
onMove left,top 移动面板执行事件
left: 新左边的位置
top: 新的最高位置
onMaximize | none | 最大化后执行事件
onRestore | none | 在窗口已经恢复到它原来的大小执行事件。
onMinimize | none | 最小化后执行事件

方法

名称 | 参数 | 说明
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 href 刷新面板加载远程数据。如果“href”参数是指定的,它将覆盖旧的“href”属性。

代码示例:

// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');

// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');
resize options 设置面板的大小和做布局。选择对象包含以下属性:
width: 新的面板宽度
height: 新的面板高度
left: 新的面板左位置
top: 新的面板顶部的位置

代码示例:

$('#pp').panel('resize',{width: 600,height: 400});
move options 移动到一个新位置的面板。选择对象包含以下属性:
left: 新的面板左位置
top: 新的面板顶部的位置
maximize | none | 根据它的容器的面板形成充满容器。
minimize | none | 最小化面板。
restore | none | 恢复最大化面板回到原来的大小和位置。
collapse | animate | 收缩的面板的主体。
expand | animate | 展开的面板的主体。


选项卡

重写默认方法 $.fn.tabs.defaults.

这个选项卡显示一组面板。它显示只有一个选项卡面板在一个时间。每个选项卡面板的标题和一些迷你按钮工具,包括关闭按钮和其他自定义按钮。

依赖

  • panel
  • linkbutton

应用实例

创建选项卡

1. 创建选项卡通过标记

创建标签标记是更简单,我们不需要写任何JavaScript代码。记得添加“easyui-tabs”类< div / >标记。每个选项卡面板创建通过子< div / >标记,使用一样的面板。

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

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

<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">tab2 </div>

<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">tab3 </div>

</div>

2. 以编程的方式创建选项卡

现在我们创建选项卡以编程的方式,我们同时抓住“onSelect”事件。

$('#tt').tabs({

border:false,

onSelect:function(title){

alert(title+' is selected');

}

});

添加新选项卡面板

添加一个拥有小工具栏的新选项卡窗格, 这个小工具栏图标(8x8) 被放置在关闭按钮之前。

// add a new tab panel

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

title:'New Tab',

content:'Tab Body',

closable:true,

tools:[{

iconCls:'icon-mini-refresh',

handler : function(){

alert('refresh');

}

}]

});

得到选中的选项卡

// get the selected tab panel and its tab object

var pp = $('#tt').tabs('getSelected');

var tab = pp.panel('options').tab; // the corresponding tab object

属性

名称 | 类型 | 说明 | 默认
width | number | 标签容器的宽度。 | auto
height | number | 标签容器的高度。 | auto
plain | boolean | True呈现标签条没有背景容器形象。 | false
fit | boolean | True设置标签容器的大小以适应它的父容器。 | false
border | boolean | True显示标签容器边界。 | true
scrollIncrement | number | 像素的数量来滚动每次标签滚动按钮被按下。 | 100
scrollDuration | number | ,每个滚动动画应该用的毫秒数。 | 400
tools array,selector 工具栏放在左边或者右边的头。可能的值:
1. 一个数组表示工具,每个工具选项是linkbutton一样。
2. 一个选择器指向< div / >包含工具。

代码示例:

定义工具使用一个数组。

$('#tt').tabs({
      tools:[{
               iconCls:'icon-add',
               handler:function(){
                    alert('add')
                   }
             },{
               iconCls:'icon-save',
                 handler:function(){
                     alert('save')
                   }
             }]
});

定义工具与DOM容器存在。

$('#tt').tabs({tools:'#tab-tools'});
<div id="tab-tools">
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
null
toolPosition | string | 工具栏的位置。可能的值:“'left','right'。这个属性可以从版本1.3.2开始使用。 | right
tabPosition | string | 标签的位置。可能的值: 'top','bottom','left','right'. T这个属性可以从版本1.3.2开始使用。 | top
headerWidth | number | 选项卡标题宽度,它是有效的只有当tabPosition设置为 'left' or 'right'. 这个属性可以从版本1.3.2开始使用。 | 150

事件

名称 | 参数 | 说明
onLoad | panel | 当ajax选项卡面板完成加载远程数据时执行事件。
onSelect | title,index | 当用户选择一个选项卡面板触发事件。
onBeforeClose title,index 在选项卡面板关闭,返回false取消这个动作。下面的例子显示了如何显示确认对话框之前关闭选项卡面板。
$('#tt').tabs({
      onBeforeClose:function(title){
                        return confirm('Are you sure you want to close ' + title);
                     }
});  // using the async confirm dialog

$('#tt').tabs({
      onBeforeClose: function(title,index){
              var target = this;
              $.messager.confirm('Confirm',
                                 'Are you sure you want to close '+title,function(r){
                                                                    if (r){
                                                                          var opts = $(target).tabs('options');
                                                                          var bc = opts.onBeforeClose;
                                                                          opts.onBeforeClose = function(){};  // allowed to close now
                                                                          $(target).tabs('close',index);
                                                                          opts.onBeforeClose = bc;  // restore the event function
                                                                          } });
                                   return false;	// prevent from closing
               }
});
onClose | title,index | 当用户关闭选项卡面板触发事件。
onAdd | title,index | 当一个新的选项卡面板添加触发事件。
onUpdate | title,index | 当一个选项卡面板更新触发事件。
onContextMenu | e, title,index | 当一个选项卡面板是正确的点击触发事件。

方法

名称 | 参数 | 说明
options | none | 返回标签选项。
tabs | none | 返回所有选项卡面板。
resize | none | 调整标签容器和做布局。
add options

添加一个新的选项卡面板,选择参数是一个配置对象,看到选项卡面板属性为更多的细节。

当添加一个新的选项卡面板,它将成为选择。

添加一个未经选择的选项卡面板,记得设置”selected“属性为false。

// add a unselected tab panel
$('#tt').tabs('add',
        {
          title: 'new tab',
          selected: false
          //...
});
close | which | 关闭选项卡面板,‘which’参数可以是标题或索引的选项卡面板关闭。
getTab | which | 得到指定的选项卡面板,‘which’参数可以是标题或索引的选项卡面板。
getTabIndex | tab | 得到指定的选项卡面板指数
getSelected none 得到选中的选项卡面板。下面的例子显示了如何得到指数选择的选项卡面板。
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
select | which | 选择一个选项卡面板,‘which’参数可以是标题或索引的选项卡面板。
exists | which | 表明如果特别面板是存在,‘which’参数可以是标题或索引的选项卡面板。
update param 更新指定的选项卡面板,param参数包含两个属性:
tab: 更新的选项卡面板。
options: 面板选项。

代码示例:
// 更新选中的面板与新标题和内容
var tab = $('#tt').tabs('getSelected');

// 得到选择面板
$('#tt').tabs('update', {
    tab: tab,
    options: {
        title: 'New Title',
        href: 'get_content.php'  // the new content URL
    }
});
// 称之为'refresh'选项卡面板的方法来更新其内容
var tab = $('#tt').tabs('getSelected');

// 得到选择面板
tab.panel('refresh', 'get_content.php');
enableTab which 使指定的选项卡面板,‘which’参数可以是标题或索引的选项卡面板。这个方法是可用的,从1.3版本以后。

代码示例：

$('#tt').tabs('enableTab', 1);	// 使第二个选项卡面板
$('#tt').tabs('enableTab', 'Tab2');	//启用选项卡面板,有“Tab2”头衔
disableTab which 禁用指定的选项卡面板,‘which’参数可以是标题或索引的选项卡面板。这个方法是可用的,从1.3版本以后。

代码实例 :

$('#tt').tabs('disableTab', 1);	// 禁用第二个选项卡面板。
scrollBy deltaX 滚动选项卡头由指定的数量的像素, 负值滚动到正确的、正值滚动到左边. T他的方法是可用的,从版本1.3.2开始。

代码示例:

// 头向左滚动选项卡
$('#tt').tabs('scroll', 10);

选项卡面板

这个选项卡面板属性定义在面板组件,下面是一些常见的属性。

名称 | 类型 | 说明 | 默认
id | string | 选项卡面板的id属性。 | null
title | string | 这个选项卡面板标题文本。 |
content | string | 这个选项卡面板内容。 |
href | string | 一个URL加载远程内容填充选项卡面板。 | null
cache | boolean | 当为true是缓存选项卡面板,而且href属性设置有效。 | true
iconCls | string | 一个图标的CSS类显示在选项卡面板标题。 | null
width | number | 选项卡面板的宽度。 | auto
height | number | 选项卡面板的高度。 | auto

一些添加属性。

名称 | 类型 | 说明 | 默认
closable | boolean | 当设置为true,该选项卡面板将显示一个按钮就可闭点击关闭选项卡面板。 | false
selected | boolean | 当设置为true,选项卡选项卡面板将被选择。 | false


可折叠

重写默认方法 $.fn.accordion.defaults.

accordion允许您提供多个面板和显示一次. 每个分组有内置支持展开和折叠. 点击分组的头可以展开或收缩面板. 分组内要ajax加载内容可以通过指定一个“href”属性. 用户可以定义一个小组被选中。如果没有指定,那么第一个面板是默认了。

依赖

  • panel
应用实例
创建可折叠布局

创建可折叠布局通过标记,添加“easyui-accordion”类< div / >标记。

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

<div title="Title1" data-options="iconCls:'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" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">

content2

</div>

<div title="Title3">

content3

</div>

</div>

我们可以改变或重新创建和修改某些功能的可折叠组件之后。

$('#aa').accordion({

animate:false

});

刷新可折叠组件面板内容

调用 'getSelected'方法获得当前面板,然后我们可以称之为'refresh'方法来加载新内容的面板.

var pp = $('#aa').accordion('getSelected'); // 得到选中的面板

if (pp){

pp.panel('refresh','new_content.php'); // 称之为'refresh'方法来加载新内容

}

容器设置

名称 | 类型 | 说明 | 默认
width | number | 可折叠容器的宽度。 | auto
height | number | 可折叠容器的高度。 | auto
fit | boolean | 设置为true来设置可折叠组件尺寸适合它的父容器。 | false
border | boolean | 是否显示边界的定义。 | true
animate | boolean | 定义是否显示动画效果展开或折叠面板。 | true

面板设置

可折叠组件面板选项是inhirited附属面板,下面是添加属性:

名称 | 类型 | 说明 | 默认
selected | boolean | 设置为true来展开面板。 | false

事件

名称 | 参数 | 说明
onSelect | title,index | 当一个小组被选中。
onAdd | title,index | 当一个新的面板添加。
onBeforeRemove | title,index | 在一个面板被删除前事件,返回false取消删除操作。
onRemove | title,index | 当一个面板被移除。

方法

名称 | 参数 | 说明
options | none | 返回选择的组件。
panels | none | 得到所有的面板。
resize | none | 调整可折叠组件。
getSelected | none | 得到选中的面板。
getPanel | which | 得到指定的面板。“which”参数可以是标题或索引的面板。
getPanelIndex panel 得到指定的面板指数。这个方法是可用的,从1.3版本以后。

下面的例子显示了如何获得选定的面板指数。

var p = $('#aa').accordion('getSelected');
if (p){
   var index = $('#aa').accordion('getPanelIndex', p);
   alert(index);
}
select | which | 选择指定的面板。“which”参数可以是标题或索引的面板。
add options 添加一个新的面板。默认情况下,添加面板将成为选择。选择添加一个新的面板,通过“selected”属性,将其设置为false。

代码示例:

$('#aa').accordion('add', {  	title: 'New Title',  	content: 'New Content',  	selected: false  });
remove | which | 删除指定的面板。“which”参数可以是标题或索引的面板。


布局

重写默认方法 $.fn.layout.defaults.

这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的,但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立复杂的布局,他想要的。

依赖

  • panel
  • resizable

应用实例

创建布局

1. 通过标记创建布局。

添加“easyui-layout”类< div / >标记。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">

<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>

<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>

<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</div>

2.创建布局在整个页面。

<body class="easyui-layout">

<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>

<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>

<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</body>

3.创建嵌套布局。

注意,西部面板的内部布局是收缩的。

<body class="easyui-layout">

<div data-options="region:'north'" style="height:100px"></div>

<div data-options="region:'center'">

<div class="easyui-layout" data-options="fit:true">

<div data-options="region:'west',collapsed:true" style="width:180px"></div>

<div data-options="region:'center'"></div>

</div>

</div>

</body>

4. 加载内容使用ajax

创建布局基于面板。每个地区面板提供了内置的支持异步加载内容从url。使用异步加载技术,用户可以让他们更快的页面显示更多。

<body class="easyui-layout">

<div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>

<div data-options="region:'center',href:'center_content.php'" ></div>

</body>

Collpase布局面板

$('#cc').layout(); // collapse the west panel

$('#cc').layout('collapse','west');

加上西部地区面板与工具按钮

$('#cc').layout('add',{

region: 'west',

width: 180,

title: 'West Title',

split: true,

tools: [{

iconCls:'icon-add',

handler:function(){alert('add')}

},{

iconCls:'icon-remove',

handler:function(){alert('remove')}

}]

});

布局选项

名称 | 类型 | 说明 | 默认
fit | boolean | 设置为true来设置布局尺寸适合它的父容器。当创建布局在“body“标签,它会自动最大化的完整大小的整个页面。 | false

地区面板选项

该地区面板选项定义在面板组件,下面是一些常见的和添加属性:

名称 | 类型 | 说明 | 默认
title | string | 布局面板标题文本。 | null
region | string | 定义的布局面板位置,这个值是一个如下: north, south, east, west, center. |
border | boolean | True 显示的布局面板边境。 | true
split | boolean | True 显示一个分割线,用户可以改变面板的大小。 | false
iconCls | string | 一个图标的CSS类显示图标面板标题。 | null
href | string | 一个URL加载数据从远程站点。 | null

方法

名称 | 参数 | 说明
resize | none | 设置布局尺寸。
panel | region | 返回指定的面板,“region”参数可能的值:'north','south','east','west','center'.
collapse | region | 收缩指定的面板,“region”参数可能的值:'north','south','east','west'.
expand | region | 展开指定的面板,“region”参数可能的值:'north','south','east','west'.
add | options | 添加指定的面板,选择参数是一个配置对象,看到选项卡面板属性为更多的细节.
remove | region | 删除指定的面板,“region”参数可能的值:'north','south','east','west'.


菜单

重写默认方法 $.fn.menu.defaults.

菜单通常用于上下文菜单。这是最基本的组件构建其他菜单组件如menubutton和splitbutton。它还可以用于导航和执行命令。

应用实例

创建菜单

创建菜单通过标记应该添加“easyui-menu”类< div / >标记。每个菜单项创建通过< div / >标记。我们可以添加“iconCls”属性来定义一个菜单项的图标,将显示在左边的菜单项。添加"menu-sep"类菜单项将生成一个菜单分离器。

<div id="mm" class="easyui-menu" style="width:120px;">

<div>New</div>

<div>

<span>Open</span>

<div style="width:150px;">

<div><b>Word</b></div>

<div>Excel</div>

<div>PowerPoint</div>

</div>

</div>

<div data-options="iconCls:'icon-save'">Save</div>

<div class="menu-sep"></div>

<div>Exit</div>

</div>

创建菜单编程方式和监听“onClick”事件。

$('#mm').menu({

onClick:function(item){

//...

}

});

显示菜单

当菜单被创建,它是隐藏的,不可见的。调用“show”的方法来显示菜单。

$('#mm').menu('show', {

left: 200,

top: 100

});

菜单项

菜单项代表一个单独的项目,是显示在一个菜单。它包含以下属性:

名称 | 类型 | 说明 | 默认
id | string | 菜单项的id属性。 |
text | string | 项目的文本。 |
iconCls | string | 一个CSS类来显示一个16 x16图标项在左边。 |
href | string | 设置页面位置同时点击菜单项。 |
disabled | boolean | 定义是否禁用菜单项。 | false
onclick | function | 单击菜单项而触发的函数. |

菜单属性

名称 | 类型 | 说明 | 默认
zIndex | number | 菜单的z轴样式位置。 | 110000
left | number | 菜单左位置。 | 0
top | number | 菜单顶部位置。 | 0
minWidth | number | 最小宽度的菜单。这个属性可以从版本1.3.2开始使用。 | 120

菜单事件

名称 | 参数 | 说明
onShow | none | 在菜单显示的时候触发。
onHide | none | 在菜单隐藏的时候触发。
onClick item 当单击该菜单项的触发事件。下面的例子显示了如何处理所有菜单项点击:
<div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
   <div data-options="name:'new'">New</div>
   <div data-options="name:'save',iconCls:'icon-save'">Save</div>
   <div data-options="name:'print',iconCls:'icon-print'">Print</div>
   <div class="menu-sep"></div>
   <div data-options="name:'exit'">Exit</div>
</div>
<script type="text/javascript">
   function menuHandler(item){
               alert(item.name)
               }
</script>

菜单方法

名称 | 参数 | 说明
options | none | 返回选择对象。
show pos 在指定位置显示一个菜单。
pos参数有两个属性:
left: 新左边的位置。
top: 新的最高位置。
hide | none | 隐藏菜单。
destroy | none | 摧毁一个菜单。
getItem itemEl 把菜单项属性,包括一个“target”属性指示项目DOM元素。下面的例子显示了如何指定项的id:
<div id="mm" class="easyui-menu" style="width:120px">
   <div>New</div>
   <div id="m-open">Open</div>
   <div>Save</div>
</div>
var itemEl = $('#m-open')[0];  // the menu item element
var item = $('#mm').menu('getItem', itemEl);
console.log(item);
setText param 设置指定的菜单项的文本。“param”参数包含两个属性:
target: DOM对象,该菜单项将打开。
text: 字符串,新的文本值。

代码示例:

var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
   target: item.target,
   text: 'Saving'
});
setIcon param 设置指定的菜单项的图标。“param”参数包含两个属性:
target: DOM对象,菜单项。
iconCls: 新的图标类。

代码示例:

$('#mm').menu('setIcon', {
    target: $('#m-open')[0],
    iconCls: 'icon-closed'
});
findItem text 找到指定的菜单项,返回对象getItem一样。

代码示例:

// 找到“开放”的菜单和禁用它
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appendItem options 添加一个新的菜单项,选择“options“显示新项属性。默认情况下,添加项目将成为一个顶级菜单项。为了添加一个子菜单项,“parent”属性应该设置为指定父项元素,已经有子条目。

代码示例:

// 附加一个顶级菜单项
$('#mm').menu('appendItem', {
    text: 'New Item',
    iconCls: 'icon-ok',
    onclick: function(){
          alert('New Item')
    }
});
//添加一个子菜单项
var item = $('#mm').menu('findItem', 'Open');
//找到“开放”的菜单
$('#mm').menu('appendItem', {
    parent: item.target,  // the parent item element
    text: 'Open Excel',
    iconCls: 'icon-excel',
    onclick: function(){
        alert('Open Excel')
    }
});
removeItem | itemEl | 删除指定的菜单项。
enableItem | itemEl | 允许使用菜单项。
disableItem | itemEl | 禁用菜单项。


链接按钮

重写默认方法 $.fn.linkbutton.defaults.

这个linkbutton是用来创建一个超链接按钮。这是一个表示一个正常的<a>标记。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和收缩/扩张以适应它的文本标签。

应用实例

创建linkbutton

创建一个linkbutton标记是很容易的。

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

以编程方式创建一个linkbutton也是允许的。

<a id="btn" href="#">easyui</a>

$('#btn').linkbutton({

iconCls: 'icon-search'

});

点击linkbutton过程。

点击linkbutton将跳转到其他页面。

<a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

下面的例子是点击弹出提示消息。

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="javascript:alert('easyui')">easyui</a>

绑定单击处理程序使用jQuery。

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

$(function(){

$('#btn').bind('click', function(){

alert('easyui');

});

});

属性

名称 | 类型 | 说明 | 默认
id | string | 这种组件的id属性。 | null
disabled | boolean | True禁用按钮 | false
plain | boolean | True显示一个普通的效应。 | false
text | string | 按钮的文本。 | ''
iconCls | string | 一个CSS类来显示一个16 x16图标在左边。 | null
iconAlign | string | 位置的按钮图标。可能的值是: 'left','right'. 这个属性可以从版本1.3.2以后使用。 | left

方法

名称 | 参数 | 说明
options | none | 返回选择属性。
disable none 禁用按钮

代码示例:

$('#btn').linkbutton('disable');
enable none 启用按钮

代码示例:

$('#btn').linkbutton('enable');


菜单按钮

继承 $.fn.linkbutton.defaults. 重写默认方法 $.fn.menubutton.defaults.

menubutton的是下拉菜单的一部分。它是伴随着linkbutton和菜单。显示的菜单linkbutton虽然是隐藏的。当用户点击或鼠标移动到linkbutton,菜单将显示允许点击它。

依赖

  • menu
  • linkbutton

用法

通常menubutton声明创建从标记。

<a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>

<div id="mm" style="width:150px;">

<div data-options="iconCls:'icon-undo'">Undo</div>

<div data-options="iconCls:'icon-redo'">Redo</div>

<div class="menu-sep"></div>

<div>Cut</div>

<div>Copy</div>

<div>Paste</div>

<div class="menu-sep"></div>

<div data-options="iconCls:'icon-remove'">Delete</div>

<div>Select All</div>

</div>

创建menubutton使用javascript。

<a href="javascript:void(0)" id="mb">Edit</a>

<div id="mm" style="width:150px">

...

</div>

$('#mb').menubutton({

iconCls: 'icon-edit',

menu: '#mm'

});

属性

属性扩展从linkbutton,下面是添加属性menubutton。

名称 | 类型 | 说明 | 默认
plain | boolean | True显示无格式。 | true
menu | string | 一个选择器创建一个相应的菜单。 | null
duration | number | 定义了持续时间以毫秒为单位显示菜单当鼠标停留在按钮上按钮。 | 100

方法

名称 | 参数 | 说明
options | none | 返回选择对象。
disable | none | menubutton禁用。
enable | none | menubutton启用。
destroy | none | 销毁menubutton.


分割按钮

继承 $.fn.linkbutton.defaults.重写默认方法 $.fn.splitbutton.defaults.

和menubutton相比splitbutton也伴随着linkbutton和菜单。menubutton和splitbutton之间的区别是,splitbutton分为两部分。当移动鼠标splitbutton,“split”线将显示。菜单只显示当移动鼠标在右splitbutton的一部分。

依赖

  • menu
  • linkbutton

用法

创建splitbutton从标记。

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton" data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>

<div id="mm" style="width:100px;">

<div data-options="iconCls:'icon-ok'">Ok</div>

<div data-options="iconCls:'icon-cancel'">Cancel</div>

</div>

创建splitbutton使用javascript。

<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')>Ok</a>

<div id="mm" style="width:100px;">

...

</div>

$('#sb').splitbutton({

iconCls: 'icon-ok',

menu: '#mm'

});

属性

属性扩展从linkbutton,下面是添加属性splitbutton。

名称 | 类型 | 说明 | 默认
plain | boolean | True显示无格式。 | true
menu | string | 一个选择器创建一个相应的菜单。 | null
duration | number | 定义了持续时间以毫秒为单位显示菜单当鼠标停留在按钮上。 | 100

方法

名称 | 参数 | 说明
options | none | 返回选择对象。
disable none

splitbutton禁用。

代码示例:

$('#sb').splitbutton('disable');
enable none

splitbutton启用。

代码示例:

$('#sb').splitbutton('enable');
destroy | none | splitbutton摧毁。
﻿


表单

重写默认方法 $.fn.form.defaults.

表单提供了各种方法来执行操作与表单字段如ajax提交、加载、清空等。当提交表单,的validate方法可称为检查表单是否有效。

用法

创建一个简单的HTML表单。构建这个像平时一样和id、action和method。

<form id="ff" method="post">

<div>

<label for="name">Name:</label>

<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />

</div>

<div>

<label for="email">Email:</label>

<input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />

</div>

...

</form>

使变成为ajax提交表单

$('#ff').form({

url:...,

onSubmit: function(){

// 做一些检查

// 返回false来防止提交;

},

success:function(data){

alert(data)

}

});

// 提交表单

$('#ff').submit();

做一个提交动作

// 称之为“submit”形式的方法插件提交表单

$('#ff').form('submit', {

url:...,

onSubmit: function(){

// 做一些检查

// 返回false来防止提交;

},

success:function(data){

alert(data)

}

});

提交额外的参数

$('#ff').form('submit', {

url:...,

onSubmit: function(param){

param.p1 = 'value1';

param.p2 = 'value2';

}

});

处理提交响应

提交一个ajax表单很简单。用户可以获得响应数据当提交完成。注意,响应的数据是原始数据从服务器。一个解析行动来响应数据需要得到正确的数据。

例如,响应数据被认为是JSON,典型的响应数据可能看起来像这样:

{

"success": true,

"message": "Message sent successfully."

}

现在处理JSON字符串在“成功”回调函数。

$('#ff').form('submit', {

success: function(data){

var data = eval('(' + data + ')'); // change the JSON string to javascript object

if (data.success){

alert(data.message)

}

}

});

属性

名称 | 类型 | 说明 | 默认
url | string | 表单动作URL提交 | null

事件

名称 | 参数 | 说明
onSubmit | param | 之前提交事件,返回false来防止提交动作。
success | data | 当表单提交successfuly触发事件。
onBeforeLoad | param | 在数据加载之前触发事件。取消这个动作返回false。
onLoadSuccess | data | 当表单加载数据触发事件。
onLoadError | none | 当一些错误发生而加载表单数据触发事件。

方法

名称 | 参数 | 说明
submit options 做提交操作,选择参数是一个对象,包含以下属性:
url: action URL
onSubmit: 回调函数之前提交
success: 回调函数successfuly后提交

下面的例子显示了如何提交一个有效的形式和避免重复提交表单。

$.messager.progress();	// 显示进度条
$('#ff').form('submit', {
   url: ...,
   onSubmit: function(){
        var isValid = $(this).form('validate');
        if (!isValid){
            $.messager.progress('close');	//隐藏进度条虽然形式是无效的
        }
        return isValid;	// 返回false,将阻止表单提交
   },
   success: function(){
        $.messager.progress('close');	// 隐藏进度条同时提交成功
   }
});
load data 加载记录填表。数据参数可以是一个字符串或一个对象类型,当字符串作为一个远程URL,否则作为一个当地的记录。

代码示例:

$('#ff').form('load','get_data.php');	// load from URL
$('#ff').form('load',{
    name:'name2',
    email:'mymail@gmail.com',
    subject:'subject2',
    message:'message2',
    language:5
});
clear | none | 清除表单数据.
reset | none | 重置表单数据。这个方法是可用的,从版本1.3.2开始。
validate | none | 做表单字段验证吗, 返回true当所有字段是有效的. 他的方法是用validatebox插件.
﻿


验证框

重写默认方法 $.fn.validatebox.defaults.

validatebox的目的是验证表单输入字段。如果用户输入无效的值,它将改变背景颜色,显示报警图标和一个工具提示消息。validatebox可以集成的插件,并将防止与表单字段从提交无效。

用法

创建validatebox从标记。

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />

创建validatebox使用javascript。

<input id="vv" />

$('#vv').validatebox({

required: true,

validType: 'email'

});

检查密码,重新输入密码是相同的。

// extend the 'equals' rule

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

equals: {

validator: function(value,param){

return value == $(param[0]).val();

},

message: 'Field do not match.'

}

});

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />

<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="equals['#pwd']" />

验证规则

定义的验证规则是通过使用要求和validType属性,这是规则已经实现:

  • email: 正则表达式匹配电子邮件规则。
  • url: 正则表达式匹配的URL规则。
  • length[0,100]: 在x和x字符允许。
  • remote['http://.../action.do','paramName']: 发送ajax请求做验证值,返回“true”当成功。

到自定义验证规则,覆盖$.fn.validatebox.defaults.rules。定义了一个验证器功能和无效的消息。例如,定义一个最小长度的有效的类型:

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

minLength: {

validator: function(value, param){

return value.length >= param[0];

},

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

}

});

现在你可以使用最小长度的validtype定义一个输入框,输入应该至少5个字符:

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

属性

名称 | 类型 | 说明 | 默认
required | boolean | 定义是否字段必须输入。 | false
validType string,array 定义字段有效的类型,如电子邮件、网址等。可能的值是:
1)一个有效的字符串类型,应用一个验证规则。
2) 一个有效的类型数组,应用多个验证规则。多个验证规则在一个领域可以从版本1.3.2开始使用。

代码示例:

<input class="easyui-validatebox" data-options="required:true,validType:'url'">
<input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">
null
delay | number | 延迟到最后验证输入值。这个属性可以从版本1.3.2开始使用。 | 200
missingMessage | string | 工具提示文本,出现在文本框为空。 | This field is required.
invalidMessage | string | 工具提示文本时出现文本框的内容是无效的。 | null
tipPosition | string | 定义位置的提示消息的文本框内容时是无效的。可能的值:“left”、“right”。这个属性可以从版本1.3.2开始使用。 | right

方法

名称 | 参数 | 说明
destroy | none | 删除和销毁组件。
validate | none | 请进行验证以确定文本框的内容是有效的。
isValid | none | 调用验证方法并返回验证结果,true或false。
﻿


Combo

继承 $.fn.validatebox.defaults. 重写默认方法 $.fn.combo.defaults.

组合显示一个可编辑的文本框和下拉面板在html页面。这是最基本的组件构建其他复杂的组合部件,如组合框,combotree,combogrid等等。

依赖

  • validatebox
  • panel

用法

组合可创建从一个<select>或<input>元素使用javascript。注意,创建组合从标记无效。

<input id="cc" value="001">

$('#cc').combo({

required:true,

multiple:true

});

属性

从validatebox属性扩展,下面是添加属性组合。

名称 | 类型 | 说明 | 默认
width | number | 组件的宽度。 | auto
height | number | 组件的高度。这个属性可以从版本1.3.2使用。 | 22
panelWidth | number | 下拉面板宽度。 | null
panelHeight | number | 下拉面板高度。 | 200
multiple | boolean | 定义是否支持多个选择。 | false
separator string 分隔符字符文本当多个选择。 ,
editable | boolean | 是否用户可以输入文本定义直接到输入框。 | true
disabled | boolean | 是否禁用该领域的定义。 | false
hasDownArrow | boolean | 定义是否显示向下箭头按钮。 | true
value | string | 默认值。
delay | number | 延迟做搜索,从最后一个关键的输入事件。 | 200
keyHandler object 一个函数被调用当使用者按下键。默认keyHandler被定义为:
keyHandler: {
  up: function(){},
  down: function(){},
  enter: function(){},
  query: function(q){}
}

事件

名称 | 参数 | 说明
onShowPanel | none | 当下拉面板显示时触发事件。
onHidePanel | none | 当下拉面板隐藏时触发事件。
onChange | newValue, oldValue | 当字段值变化的时候触发事件。

方法

从validatebox方法扩展,下面是添加的方法对组合。

名称 | 参数 | 说明
options | none | 返回选择对象。
panel | none | 返回下拉面板对象。
textbox | none | 返回文本框对象。
destroy | none | 销毁组件。
resize | width | 调整组件的宽度。
showPanel | none | 显示下拉面板。
hidePanel | none | 隐藏下拉面板。
disable | none | 禁用组件。
enable | none | 启用组件。
validate | none | 验证输入值。
isValid | none | 返回验证结果。
clear | none | 清空的组件值。
reset | none | 重置组件值。这个方法是可用的,从版本1.3.2以后。
getText | none | 得到输入文本。
setText | text | 设置文本值。
getValues | none | 获取组件值数组。
setValues | values | 设置组件值数组。
getValue | none | 获取组件值。
setValue | value | 设置组件的值。


下拉列表框

继承 $.fn.combo.defaults. 重写 $.fn.combobox.defaults.

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

依赖

  • combo

应用实例

从<select>创建下拉列表框元素与一个预定义的结构。

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">

<option value="aa">aitem1</option>

<option>bitem2</option>

<option>bitem3</option>

<option>ditem4</option>

<option>eitem5</option>

</select>

创建下拉列表框从<input>标记。

<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'" />

使用javascript创建下拉列表框。

<input id="cc" name="dept" value="aa">

$('#cc').combobox({

url:'combobox_data.json',

valueField:'id',

textField:'text'

});

创建两个依赖的组合框。

<input id="cc1" class="easyui-combobox" data-options=" valueField: 'id', textField: 'text', url: 'get_data1.php',

onSelect: function(rec){

var url = 'get_data2.php?id='+rec.id;

$('#cc2').combobox('reload', url);

}" />

<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />

json数据格式示例:

[{"id":1,"text":"text1" },{"id":2,"text":"text2" },{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4" },{"id":5,"text":"text5" }]

属性

属性扩展从组合,下面是添加属性组合框。

名称 | 类型 | 说明 | 默认
valueField | string | 底层数据值名称绑定到这个组合框，传到后台实际值。 | value
textField | string | 底层数据字段名称绑定到这个组合框，前台显示值。 | text
mode | string | 定义了如何加载列表数据当文本改变。设置为“remote“如果下拉列表框从服务器加载。当设置为“remot“模式下,用户类型将被发送的http请求参数命名为“q”服务器来检索新数据。 | local
url | string | 一个URL加载列表数据从远程。 | null
method | string | http方法检索数据。 | post
data array 数据列表加载。

代码示例:

<input class="easyui-combobox" data-options="valueField: 'label',textField: 'value',
     data: [{label: 'java',value: 'Java'},
            {label: 'perl',value: 'Perl'},
            {label: 'ruby', value: 'Ruby'}]" />
null
filter function 定义了如何过滤本地数据当“model”设置为“local”。这个函数接受两个参数:
q: 用户输入的文本。
row: 行数据的列表。
返回true允许这行被显示。

代码示例:

$('#cc').combobox({
    filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
formatter function 定义如何渲染row。这个函数接受一个参数row.

代码示例:

$('#cc').combobox({
     formatter: function(row){
         var opts = $(this).combobox('options');
         return row[opts.textField];
     }
});
loader function(param,success,error) 定义了如何加载数据从远程服务器。可以放弃这次行动返回false。这个函数接受以下参数:
param: 参数对象传递给远程服务器。
success(data): 这个回调函数会调用这些当检索数据成功。
error(): 这个回调函数会调用这些当未能检索数据。 		json loader

事件

事件扩展从组合,下面是添加事件为下拉列表框。

名称 | 参数 | 说明
onBeforeLoad param 在加载数据前触发事件，如果返回false则不会加载数据

代码示例:

// 改变参数的http请求从服务器加载数据之前
$('#cc').combobox({
     onBeforeLoad: function(param){
           param.id = 2;
           param.language = 'js';
      }
});
onLoadSuccess | none | 当远程数据加载成功。
onLoadError | none | 当远程数据加载错误。
onSelect | record | 当用户选择一个列表项。
onUnselect | record | 当用户取消选择列表项。

方法

从组合的方法扩展,下面是添加或重写的方法为下拉列表框。

名称 | 参数 | 说明
options | none | 返回选择对象。
getData | none | 返回数据的加载。
loadData | data | 加载区域列表数据。
reload url 请求远程列表数据。通过“url”参数覆盖原始url值。

代码示例:

$('#cc').combobox('reload');  // 重新加载列表数据使用旧的URL
$('#cc').combobox('reload','get_data.php');  // 重新加载列表数据使用新的URL
setValues values 设置组合框值数组。

代码示例:

$('#cc').combobox('setValues', ['001','002']);
setValue value 设置下拉列表框的值。

代码示例:

$('#cc').combobox('setValue', '001');
clear | none | 清除下拉列表框值。
select | value | 选择指定的项。
unselect | value | 取消选择指定的项。


组合树

继承$.fn.combo.defaults and $.fn.tree.defaults. 重写默认方法 $.fn.combotree.defaults.

combotree的结合与下拉树的选择控制。它类似于组合框但取代列表树组件。这个combotree支持树与树状态复选框,方便多个选择。

依赖

  • combo
  • tree

依赖

创建combotree从标记。

<select id="cc" class="easyui-combotree" style="width:200px;" data-options="url:'get_data.php',required:true"></select>

创建combotree使用javascript。

<input id="cc" value="01">

$('#cc').combotree({

url: 'get_data.php',

required: true

});

属性

属性扩展从combo和tree,下面是combotree覆盖属性。

名称 | 类型 | 说明 | 默认
editable | boolean | 是否用户可以输入文本定义直接到输入框. | false

事件

事件扩展从combo 和tree.

方法

扩展的方法继承于 combo,下面是添加和覆盖方法combotree.

名称 | 参数 | 说明
options | none | 返回选择对象。
tree none 返回对象的树。下面的例子显示了如何获得选中的树节点。
var t = $('#cc').combotree('tree');	// 获得树对象
var n = t.tree('getSelected');		// 获得选中节点显示(文本);
loadData data 加载本地组合树数据。

代码示例:

$('#cc').combotree('loadData', [{id: 1,text: 'Languages',children: [{id: 11,text:'Java'},{id: 12,text: 'C++'}]}]);
reload | url | 再次请求远程树数据。通过“url”参数覆盖原始url值。
clear | none | 清除的组件值。
setValues values 设置组件值数组。

代码示例:

$('#cc').combotree('setValues', [1,3,21]);
setValue value 设置组件的值。

代码示例:

$('#cc').combotree('setValue', 6);


组合表格

继承$.fn.combo.defaults and $.fn.datagrid.defaults. 重写默认方法 $.fn.combogrid.defaults.

这个combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择。这个combogrid提供键盘导航支持选择一个项目。

依赖

  • combo
  • datagrid

应用实例

创建ComboGrid

1. 创建一个combogrid从标记。

<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;" data-options=" panelWidth:450, value:'006', idField:'code', textField:'name', url:'datagrid_data.json',

columns:[[

{field:'code',title:'Code',width:60},

{field:'name',title:'Name',width:100},

{field:'addr',title:'Address',width:120},

{field:'col4',title:'Col41',width:100}]]

"></select>

2. 可以创建的combogrid从现有<select>或<input>元素使用javascript。

<input id="cc" name="dept" value="01" />

$('#cc').combogrid({

panelWidth : 450,

value : '006',

idField : 'code',

textField : 'name',

url : 'datagrid_data.json',

columns:[[

{field:'code',title:'Code',width:60},

{field:'name',title:'Name',width:100},

{field:'addr',title:'Address',width:120},

{field:'col4',title:'Col41',width:100}

]]

});

自动完成功能

让我们加入先进的自动完成功能combogrid。下拉datagrid将显示可能的结果根据用户类型。

$('#cc').combogrid({

delay: 500,

mode: 'remote',

url: 'get_data.php',

idField: 'id',

textField: 'name',

columns: [[

{field:'code',title:'Code',width:120,sortable:true},

{field:'name',title:'Name',width:400,sortable:true}

]]

});

在服务器端,“q”参数必须先检索。用户可以查询数据库,然后返回一个sql结果以JSON格式的浏览器。

get_data.php:

$q = isset($_POST['q']) ? $_POST['q'] : ''; // 请求参数

// 查询数据库并返回JSON结果数据

$rs = mysql_query("select * from item where name like '$q%'");

echo json_encode(...);

属性

属性扩展从combo和datagrid,下面是添加属性combogrid。

名称 | 类型 | 说明 | 默认
loadMsg | string | 显示的消息当datagrid加载远程数据。 | null
idField | string | id字段名。 | null
textField | string | 文本字段将显示在文本框。 | null
mode | string | 定义了如何装载数据当文本改变。数据表格设置为“remote”如果combogrid从服务器加载。当设置为“remote”模式下,用户类型将被发送的http请求参数命名为“问”服务器来检索新数据。 | local
filter function(q, row) 定义了如何选择本地数据当“model”设置为“local”。返回true选择行。

代码示例:

$('#cc').combogrid({
  filter: function(q, row){
     var opts = $(this).combogrid('options');
     return row[opts.textField].indexOf(q) == 0;
  }
});

事件

事件扩展从combo和datagrid。

方法

从组合的方法扩展,下面是combogrid添加或重载方法。

名称 | 参数 | 说明
options | none | 返回选择对象。
grid none 返回datagrid对象。下面的例子显示了如何获取选中的行:
var g = $('#cc').combogrid('grid');	// 得到datagrid对象
var r = g.datagrid('getSelected');	// 得到选中的行;
setValues values 设置组件值数组。

代码示例:

$('#cc').combogrid('setValues', ['001','007']);
setValue value 设置组件的值。

代码示例:

$('#cc').combogrid('setValue', '002');
clear | none | 清除的组件值。


数字框

继承 $.fn.validatebox.defaults. 重写默认方法 $.fn.numberbox.defaults.

这个numberbox是用来让用户只有输入numberical值。它可以转换一个输入元素成不同类型的输入如数字、百分比、货币等。更多类型的输入可以被定义为根据 'formatter'和'parser'的函数.

依赖

  • validatebox

用法

创建numberbox从标记。

<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>

创建numberbox使用javascript。

<input type="text" id="nn"></input>

$('#nn').numberbox({

min:0,

precision:2

});

属性

从validatebox属性扩展,下面是添加属性numberbox。

名称 | 类型 | 说明 | 默认
disabled | boolean | 是否禁用该领域的定义。 | false
value | number | 默认值。 |
min | number | 允许的最小值。 | null
max | number | 最大允许的值。 | null
precision | number | 最大的精度显示十进制分隔符之后。 | 0
decimalSeparator | string | 十进制字符分隔开的整数和小数部分的数。 | .
groupSeparator | string | 字符分隔整数组显示千或百万。 |
prefix | string | 前缀字符串。 |
suffix | string | 后缀字符串。 |
formatter | function(value) | 一个函数的格式numberbox值。返回字符串值,将显示在输入框。 |
parser | function(s) | 一个函数来解析一个字符串。numberbox返回值。 |

事件

名称 | 参数 | 说明
onChange | newValue,oldValue | 当字段值是变化的时候触发事件。

方法

从validatebox方法扩展,下面是对numberbox添加或重写的方法。

名称 | 参数 | 说明
options | none | 返回numberbox选项。
destroy | none | 销毁numberbox对象。
disable | none | 禁用字段。
enable | none | 启用字段。
fix | none | 修复真实有效值。
setValue value numberbox设置值。

代码示例:

$('#nn').numberbox('setValue', 206.12);
getValue none 得到numberbox值。

代码示例:

var v = $('#nn').numberbox('getValue');  alert(v);
clear | none | 清晰的numberbox值。
reset | none | numberbox重置价值。这个方法是可用的,从版本1.3.2开始使用。


日历元件

继承 $.fn.combo.defaults. 重写默认方法 $.fn.datebox.defaults

这个datebox结合一个可编辑的文本框和下拉日历面板,允许用户选择一个日期。输入的字符串的文本框可以转换为一个有效的日期。选定的日期也可以被格式化为预期格式。

依赖

  • combo
  • calendar

应用实例

创建datebox从标记。

<input id="dd" type="text" class="easyui-datebox" required="required"></input>

创建datebox使用javascript。

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

$('#dd').datebox({

required:true

});

属性

属性扩展从combo,下面是添加属性datebox。

名称 | 类型 | 说明 | 默认
panelWidth | number | 下拉日历面板宽度。 | 180
panelHeight | number | 下拉日历面板高度。 | auto
currentText | string | 当前天按钮显示文本。 | Today
closeText | string | 关闭按钮显示文本。 | Close
okText | string | ok按钮显示文本。 | Ok
disabled | boolean | 当为true则禁用字段。 | false
formatter function 一个函数来格式化日期,该函数把一个“date”参数并返回一个字符串值。下面的例子显示了如何覆盖默认格式化程序功能。
$.fn.datebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return m+'/'+d+'/'+y;
}
parser function 一个函数来解析一个日期字符串,函数把一个“date”字符串,并返回一个日期值。下面的例子显示了如何覆盖默认的解析器函数。
$.fn.datebox.defaults.parser = function(s){
   var t = Date.parse(s);
   if (!isNaN(t)){
       return new Date(t);
   } else {
       return new Date();
   }
}

事件

名称 参数 说明
onSelect date 当用户选择一个日期触发事件。

代码示例:

$('#dd').datebox({
   onSelect: function(date){
       alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
   }
});

方法

从combo的方法扩展,下面是datebox覆盖方法。

名称 | 参数 | 说明
options | none | 返回选择对象。
calendar none 把日历对象。下面的例子展示了如何把日历对象,然后重新创建它。
//把日历对象
var c = $('#dd').datebox('calendar');

//设置第一天周星期一
c.calendar({firstDay: 1});
setValue value 设置datebox值。

代码示例:

$('#dd').datebox('setValue', '6/1/2012');	// 给datebox赋值
var v = $('#dd').datebox('getValue');	// 获得datebox的值


日期时间框

继承 $.fn.datebox.defaults, 重写默认方法$.fn.datetimebox.defaults.

datebox相似,datetimebox允许用户选择一个日期和时间显示与指定的日期和时间格式。它增加了一个timespinner组件下拉面板。

依赖

  • datebox
  • timespinner

应用实例

创建datetimebox从标记。

<input class="easyui-datetimebox" name="birthday" data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">

创建datetimebox使用javascript。

<input id="dt" type="text" name="birthday"></input>

$('#dt').datetimebox({

value: '3/4/2010 2:3',

required: true,

showSeconds: false

});

属性

从datebox属性扩展,下面是datetimebox添加属性:

名称 | 类型 | 说明 | 默认
showSeconds | boolean | 定义是否显示第二个信息。 | true
timeSeparator | string | 时间小时/分钟之间的分隔符和第二。这个属性可以从版本1.3以后使用。 | :

方法

从datebox方法扩展,下面是datetimebox覆盖方法。

名称 | 参数 | 说明
options | none | 返回选择对象。
spinner | none | 返回timespinner对象。
setValue value 设置datetimebox值。

代码示例:

$('#dt').datetimebox('setValue', '6/1/2012 12:30:56');	// 给datetimebox赋值
var v = $('#dt').datetimebox('getValue');		// 获取datetimebox中的值;


日历

重写默认方法 $.fn.calendar.defaults.

日历显示一个月的日历,允许用户选择日期和移动到下一个或前一个月。默认情况下,一周的第一天是设置为周日。它可以改变通过设置值的“firstDay”属性。

应用实例

创建日历从标记。

<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>

创建日历使用javascript。

<div id="cc" style="width:180px;height:180px;"></div>

$('#cc').calendar({

current:new Date()

});

属性

名称 | 类型 | 说明 | 默认
width | number | 日历组件的宽度。 | 180
height | number | 日历组件的高度。 | 180
fit | boolean | 当返回true的时候设置日历大小适合它的父容器。 | false
border | boolean | 是否显示边界的定义。 | true
firstDay | number | 定义了一周的第一天。星期天是0,星期一是1,…… | 0
weeks | array | 周的列表将显示。 | ['S','M','T','W','T','F','S']
months | array | 月的列表将显示。 | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
year number 今年的日历。下面的例子显示了如何创建一个日历使用指定的年份和月份。
<div class="easyui-calendar" data-options="year:2012,month:6" />
current year(four digits)
month | number | 这个月的日历。 | current month, start with 1
current | Date | 当前日期。 | current date

事件

名称 参数 说明
onSelect date 当用户选择一个日期时触发事件。

代码示例:

$('#cc').calendar({
   onSelect: function(date){
       alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
   }
});

方法

名称 | 参数 | 说明
options | none | 返回选择对象。
resize | none | 调整大小的日历。
moveTo date 移动到指定日期的日历。

代码示例:

$('#cc').calendar('moveTo', new Date(2012, 6, 1));


可调控框

继承$.fn.validatebox.defaults. 重写默认方法 $.fn.spinner.defaults.

spinner结合了一个可编辑的文本框和两个小按钮,让用户选择一个范围的值。类似于组合框,spinner允许用户键入一个值但不有一个下拉列表。spinner 基本组件创建其他转子组件如numberspinner,timespinner等等。

依赖

  • validatebox

应用实例

spinner应该创建使用javascript。创建从标记是不允许的。

<input id="ss" value="2">

$('#ss').spinner({

required:true,

increment:10

});

属性

从validatebox属性扩展,下面是添加属性spinner.

名称 | 类型 | 说明 | 默认
width | number | 这个组件的宽度。 | auto
height | number | 这个组件的高度。这个属性可以从版本1.3.2开始使用。 | 22
value | string | 初始化值。 |
min | string | 允许的最小值。 | null
max | string | 最大允许的值。 | null
increment | number | 当点击spinner的增量值按钮。 | 1
editable | boolean | 定义了是否用户可以直接写入该领域类型值。 | true
disabled | boolean | 是否禁用该领域的定义。 | false
spin | function(down) | 一个函数称为当用户单击spinner按钮。“down”参数表明如果用户单击向下的按钮。 |

事件

名称 | 参数 | 说明
onSpinUp | none | 当用户单击了up按钮触发事件。
onSpinDown | none | 当用户单击了down按钮触发事件。

方法

从validatebox方法扩展,下面是添加的方法对spinner。

名称 | 参数 | 说明
options | none | 返回选择对象。
destroy | none | 破坏spinner组件。
resize width 重置该组件的宽度。覆盖原来的宽度通过“width”参数。

代码示例:

$('#ss').spinner('resize');  // 调整与原宽度
$('#ss').spinner('resize', 200);  // 调整与新宽度
enable | none | 启用组件。
disable | none | 禁用组件。
getValue | none | 获取组件值。
setValue | value | 设置组件的值。
clear | none | 清除的组件值。
reset | none | 重置组件值。这个方法是可用的,从版本1.3.2开始使用。


数值微调器

继承$.fn.spinner.defaults 和$.fn.numberbox.defaults. 重写 $.fn.numberspinner.defaults.

numberspinner创建的基于转子和numberbox。它可以转换成不同类型的输入值如数字、百分比、电流等,也允许用户滚动到所需的值使用向上/向下微调器按钮。

依赖

  • spinner
  • numberbox

使用的例子

创建numberspinner从标记。

<input id="ss" class="easyui-numberspinner" style="width:80px;"required="required" data-options="min:10,max:100,editable:false">

创建numberspinner使用javascript。

<input id="ss" required="required" style="width:80px;">

$('#ss').numberspinner({

min: 10,

max: 100,

editable: false

});

numberspinner创建和格式化号码为货币形式。

<input class="easyui-numberspinner" value="1234567890" style="width:150px;" data-options="required:true,precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'$'" />

属性

属性扩展从spinner和numberbox。

事件

事件扩展从spinner.

方法

从spinner的方法扩展,下面是numberspinner覆盖方法。

名称 | 参数 | 说明
options | none | 返回选择对象。
setValue value 设置numberspinner值。

代码示例:

$('#ss').numberspinner('setValue', 8234725);  // 设定值
var v = $('#ss').numberspinner('getValue');  // 获得价值


时间微调器

继承 $.fn.spinner.defaults.重写默认访法 $.fn.timespinner.defaults.

创建的timespinner基于spinner。这是numberspinner相同但显示时间值。这个timespinner允许用户增加或减少时间点击spinner按钮在右边的组件。

依赖

  • spinner

应用实例

创建timespinner从标记。

<input id="ss" class="easyui-timespinner" style="width:80px;" required="required" data-options="min:'08:30',showSeconds:true" />

创建timespinner使用javascript。

<input id="ss" style="width:80px;">

$('#ss').timespinner({

min: '08:30',

required: true,

showSeconds: true

});

属性

属性扩展从spinner,下面是添加属性timespinner。

名称 | 类型 | 说明 | 默认
separator | string | 小时和分钟和秒之间的分隔符。 | :
showSeconds | boolean | 定义是否显示秒。 | false
highlight | number | 字段来强调最初, 0 = hours, 1 = minutes, … | 0

事件

从spinner的事件扩展。

方法

从spinner的方法扩展,下面是timespinner覆盖方法。

名称 | 参数 | 说明
options | none | 返回选择对象。
setValue value 设置timespinner值。

代码示例:

$('#ss').timespinner('setValue', '17:45');  // set timespinner value
var v = $('#ss').timespinner('getValue');  // get timespinner value  alert(v);
getHours | none | 获取当前的小时值。
getMinutes | none | 获取当前的分钟值。
getSeconds | none | 获得当前秒值。


滑动器

重写默认方法 $.fn.slider.defaults.

滑块允许用户选择一个数值从一个有限的范围。当移动的指针控制沿轨道,将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。

依赖

  • draggable

应用实例

当使用作为一个表单字段,创建滑块从<input>标记。

<input class="easyui-slider" value="12" style="width:300px" data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />

创建滑块从< div / >也是允许的,但“value”属性是无效的。

<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

以编程的方式创建滑块。

<div id="ss" style="height:200px"></div>

$('#ss').slider({ mode: 'v', tipFormatter: function(value){ return value + '%'; } });

属性

名称 | 类型 | 说明 | 默认
width | number | 滑块的宽度。 | auto
height | number | 滑块的高度。 | auto
mode | string | 显示什么类型的滑块。可能的值:“h”(水平)、“v”（垂直)。 | h
reversed | boolean | 设置为true的最小值和最大值将开关他们的位置。这个属性可以从版本1.3.2开始使用。 | false
showTip | boolean | 定义是否显示值信息提示。 | false
disabled | boolean | 定义是否禁用滑块。 | false
value | number | 默认值。 | 0
min | number | 允许的最小值。 | 0
max | number | 最大允许的值。 | 100
step | number | 增加或减少值。 | 1
rule | array | 显示标签旁边滑块,“|”——显示就行。 | []
tipFormatter | function | 一个函数格式滑块值。返回字符串值,将显示作为提示。 |

事件

名称 | 参数 | 说明
onChange | newValue, oldValue | 当字段值变化时触发事件。
onSlideStart | value | 当开始拖动滑块时触发事件。
onSlideEnd | value | 当结束拖动滑块时触发事件。

方法

名称 | 参数 | 说明
options | none | 返回滑块选项。
destroy | none | 销毁滑块对象。
resize | param | 设置滑块大小。“param”参数包含以下属性: width: 新的滑块宽度 height: 新的滑块高度
getValue | none | 得到滑块值。
setValue | value | 滑块设置值。
enable | none | 启用滑块组件。
disable | none | 禁用滑块组件。
﻿


窗口

继承 $.fn.panel.defaults.重写默认方法 $.fn.window.defaults.

窗口是一个浮动和拖拽面板,可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

依赖

  • draggable
  • resizable
  • panel

应用实例

创建一个窗口

1. 创建窗口从标记。

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">

Window Content

</div>

2. 使用javascript创建窗口。

<div id="win"></div>

$('#win').window({ width:600, height:400, modal:true});

3. 创建窗口,complext布局。

像往常一样你可以定义窗口布局。下面的例子显示了如何分裂窗区域分为两部分:北部和中心。

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">

<div class="easyui-layout" data-options="fit:true">

<div data-options="region:'north',split:true" style="height:100px"></div>

<div data-options="region:'center'">

The Content.

</div>

</div>

</div>

一些请求与窗口

打开和关闭窗口。

$('#win').window('open'); // open a window

$('#win').window('close'); // close a window

通过Ajax请求加载一个窗口

$('#win').window('refresh', 'get_content.php');

属性

属性扩展从面板,下面是覆盖和添加属性窗口。

名称 | 类型 | 说明 | 默认
title | string | 窗口标题文本。 | New Window
collapsible | boolean | 定义是否显示折叠按钮。 | true
minimizable | boolean | 定义是否显示最小化按钮。 | true
maximizable | boolean | 定义是否显示最大化按钮。 | true
closable | boolean | 定义是否显示关闭按钮。 | true
closed | boolean | 初始是否关闭 | false
zIndex | number | 窗口的z轴坐标 | 9000
draggable | boolean | 定义是否窗口可以拖。 | true
resizable | boolean | 定义是否窗口可以调整大小。 | true
shadow | boolean | 如果设置为true,当窗口显示阴影将显示。 | true
inline | boolean | 定义了如何保持窗户,true呆在它的父组件上，false去掉上面的所有元素。 | false
modal | boolean | 定义如果窗口是一个模式窗口。 | true

事件

从面板的事件扩展。

方法

从面板的方法扩展,下面是为窗口添加的方法。

名称 | 参数 | 说明
window | none | 返回外窗口对象。
hcenter | none | 中心窗口只有水平。这个方法是可用的,因为版本1.3.1。
vcenter | none | 中心窗口只有垂直。这个方法是可用的,因为版本1.3.1。
center | none | 中心窗口在屏幕上。这个方法是可用的,因为版本1.3.1。


对话框

继承$.fn.window.defaults. 重写默认方法 $.fn.dialog.defaults.

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

依赖

  • window
  • linkbutton

用法

创建对话框通过标记从现有的DOM节点。下面的例子显示了一个模态对话框和可调整大小的功能。

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true">

Dialog Content.

</div>

使用javascript创建对话框也是允许的。现在让我们创建一个模态对话框,然后调用刷新方法通过ajax加载它的内容。

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

$('#dd').dialog({

title: 'My Dialog',

width: 400,

height: 200,

closed: false,

cache: false,

href: 'get_content.php',

modal: true

});

$('#dd').dialog('refresh', 'new_content.php');

属性

属性扩展从窗口,下面是覆盖属性对话框。

名称 | 类型 | 说明 | 默认
title | string | 对话框标题文本。 | New Dialog
collapsible | boolean | 定义是否显示折叠按钮。 | false
minimizable | boolean | 定义是否显示最小化按钮。 | false
maximizable | boolean | 定义是否显示最小化按钮。 | false
resizable | boolean | 对话框定义是否可以调整大小。 | false
toolbar array,selector 顶部工具栏的对话框中,可能的值:
1) 一个数组,每个工具选项linkbutton一样。
2) 一个选择器,该选择器显示工具栏。

对话框工具栏可以被声明在< div >标记:

<div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',toolbar:'#tb',modal:true">
  Dialog Content.
</div>
<div id="tb">
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

工具栏的对话框也可以通过数组定义:

<div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',modal:true,toolbar:[{ text:'Edit', iconCls:'icon-edit', handler:function(){alert('edit')} },{ text:'Help', iconCls:'icon-help', handler:function(){alert('help')}}]">
  Dialog Content.
</div>
null
buttons array,selector 底部的按钮的对话框中,可能的值:
1) 一个数组,每个按钮选项是linkbutton一样。
2) 一个选择器,该选择器显示按钮栏。

这个按钮可以被声明在< div >标记:

<div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',buttons:'#bb',modal:true">
  Dialog Content.
</div>
<div id="bb">
  <a href="#" class="easyui-linkbutton">Save</a>
  <a href="#" class="easyui-linkbutton">Close</a>
</div>

按钮也可以通过数组定义:

<div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',modal:true,buttons:[{text:'Save', handler:function(){...} },{text:'Close', handler:function(){...} }]">
   Dialog Content.
</div>
null

事件

从窗口的事件扩展。

方法

这个方法扩展从窗口,下面是对话框添加方法。

名称 | 参数 | 说明
dialog | none | 返回外对话框对象。


消息框

重写默认的方法 $.messager.defaults.

提供不同风格的消息框,包括警报,确认,提示、进度等。所有的Messager都是异步的。用户可以使用回调函数来做一些可以在相互作用后送信者。

依赖

  • window
  • linkbutton
  • progressbar

用法

$.messager.alert('Warning','The warning message');

$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){

if (r){

alert('ok');

}

});

属性

名称 | 类型 | 说明 | 默认
ok | string | Ok按钮文本。 | Ok
cancel | string | 取消按钮的文本。 | Cancel

方法

名称 参数 说明
$.messager.show options 显示一个消息窗口在屏幕底部。选项参数是一个配置对象:
showType: 定义了如何将显示消息窗口。可用值: null,slide,fade,show. 默认为slide。
showSpeed: 定义了时间在毫秒完成显示消息窗口。默认值为600。
width: 定义消息窗口的宽度。默认值为250。
height: 定义消息窗口的高度。默认值为100。
title: 标题文本显示在标题面板。
msg: 消息文本显示。
style: 定义了自定义dpecification风格为消息窗口。
timeout: 如果定义为0,消息窗口不会关闭,除非用户关闭它。对unzero定义,消息窗口将自动关闭当超时。默认为4秒。

代码示例:

$.messager.show({
  title:'My Title',
  msg:'Message will be closed after 5 seconds.',
  timeout:5000,
  showType:'slide'
});

// 显示消息窗口顶部中心
$.messager.show({
  title:'My Title',
  msg:'Message will be closed after 4 seconds.',
  showType:'show',
  style:{
    right:'',
    top:document.body.scrollTop+document.documentElement.scrollTop,
    bottom:''
  }
});
$.messager.alert title, msg, icon, fn 显示一个警告窗口。参数:
title: 标题文本显示在标题面板。
msg: 消息文本显示。
icon: 形象的图标将显示。可用值是:error,question,info,warning.
fn: 这个回调函数窗口关闭时触发。

代码示例:

$.messager.alert('My Title','Here is a info message!','info');
$.messager.confirm title, msg, fn 显示一个确认消息窗口,可以取消按钮。参数:
title: 标题文本显示在标题面板。
msg: 消息文本显示。
fn(b): 回调函数,当用户单击Ok按钮,通过true函数,否则通过false来它。

代码示例:

$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){if (r){ // exit action; } });
$.messager.prompt title, msg, fn 显示一个消息窗口,可以取消按钮提示用户输入一些文本。参数:
title: 标题文本显示在标题面板。
msg: 消息文本显示。
fn(val): 这个回调函数值与用户输入的参数。

代码示例:

$.messager.prompt('Prompt', 'Please enter your name:', function(r){if (r){ alert('Your name is:' + r); }});
$.messager.progress options or method 显示一个进度消息窗口。
这个选项被定义为:
title: 标题文本显示在标题面板,默认”。
msg: 消息框体文字,默认”。
text: 文本显示在进度条,默认未定义。
interval: 时间以毫秒为单位的长度之间的每一次进步都更新,默认300。

该方法被定义为:
bar: 得到progressbar对象。
close: 关闭进度窗口。

代码示例:

显示进度信息窗口。
    $.messager.progress();
现在关闭消息窗口。
    $.messager.progress('close');


数据表格

继承$.fn.panel.defaults. 重写默认方法 $.fn.datagrid.defaults.

datagrid显示数据表格格式,提供了丰富的支持选择、分类、组织和编辑数据。datagrid被设计来减少开发时间和要求没有专业知识开发人员。它是不重要的,功能丰富。单元合并、 表头合并、冻结一列页脚只是它的一些特性。

依赖

  • panel
  • resizable
  • linkbutton
  • pagination

应用实例

从现有表创建数据表格元素,定义列、行和数据在html中。

<table class="easyui-datagrid">

<thead>

<tr>

<th data-options="field:'code'">Code</th>

<th data-options="field:'name'">Name</th>

<th data-options="field:'price'">Price</th>

</tr>

</thead>

<tbody>

<tr>

<td>001</td>

<td>name1</td>

<td>2323</td>

</tr>

<tr>

<td>002</td>

<td>name2</td>

<td>4612</td>

</tr>

</tbody>

</table>

通过<table>创建数据表格标记。嵌套的< th >标记定义列的表。

<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">

<thead>

<tr>

<th data-options="field:'code',width:100">Code</th>

<th data-options="field:'name',width:100">Name</th>

<th data-options="field:'price',width:100,align:'right'">Price</th>

</tr>

</thead>

</table>

创建数据表格使用javascript也是允许的。

<table id="dg"></table>

$('#dg').datagrid({

url:'datagrid_data.json',

columns:[[

{field:'code',title:'Code',width:100},

{field:'name',title:'Name',width:100},

{field:'price',title:'Price',width:100,align:'right'}

]]

});

查询数据和一些参数。

$('#dg').datagrid('load', {

name: 'easyui',

address: 'ho'

});

改变数据到服务器后,刷新前的数据。

$('#dg').datagrid('reload'); // 刷新当前页数据

DataGrid属性

属性扩展从panel。下面是添加属性数据表格。

名称 | 类型 | 说明 | 默认
columns | array | datagrid列配置对象,见列属性为更多的细节。 | undefined
frozenColumns | array | 同列的属性,但这些列将被冻结在左。 | undefined
fitColumns boolean

自动伸展或收缩列宽来保证表格正好充满屏幕

 false
resizeHandle | string | 调整列的位置,可用值是: 'left','right','both'. 当 'right'时,用户可以通过拖拽调整列的右边缘的列标题,等等。这个属性可以从版本1.3.2开始使用。 | right
autoRowHeight | boolean | 定义如果设置行高基于内容的行。设置为false可以提高加载性能。 | true
toolbar array,selector 顶部工具栏的数据网格面板。可能的值:
1) 一个数组,每个工具选项linkbutton一样。
2) 一个选择器,该选择器显示工具栏。

定义工具栏在< div >标记:

$('#dg').datagrid({
  toolbar: '#tb'
});
<div id="tb">
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

通过数组定义工具栏:

$('#dg').datagrid({
  toolbar: [{
  iconCls: 'icon-edit',
  handler: function(){alert('edit')}
  },'-',{
  iconCls: 'icon-help',
  handler: function(){alert('help')}
  }]
});
null
striped | boolean | True有条纹的行。 | false
method | string | 方法类型请求远程数据。 | post
nowrap | boolean | true把数据显示在一行上。设置为true能提高加载性能。 | true
idField | string | 指明哪个字段是一个标识字段。 | null
url | string | 一个URL请求数据从远程站点。 | null
data array,object 数据加载。这个属性可以从版本1.3.2。

代码示例:

$('#dg').datagrid({
  data: [
    {f1:'value11', f2:'value12'},
    {f1:'value21', f2:'value22'}
  ]
});
null
loadMsg | string | 当加载数据从远程站点,显示一个提示信息。 | Processing, please wait …
pagination | boolean | true显示分页栏datagrid底。 | false
rownumbers | boolean | True显示行号列。 | false
singleSelect | boolean | True允许选择只有一行。 | false
checkOnSelect | boolean | 如果true,复选框checked/ unchecked当用户单击一个行。如果为false,复选框只是checked /unchecked当用户单击正是对复选框。这个属性可以从版本1.3开始使用。 | true
selectOnCheck boolean 如果设置为true,点击复选框将永远选择行。如果false选择一个行不会检查复选框。
这个属性可以从版本1.3。 		true
pagePosition string 定义分页工具栏位置，可选参数有: 'top','bottom','both'.
这个属性可以从版本1.3。 		bottom
pageNumber | number | 当设置分页属性,初始化页号。 | 1
pageSize | number | 当设置分页属性,初始化页面大小。 | 10
pageList | array | 当设置分页属性,初始化页面大小选择列表。 | [10,20,30,40,50]
queryParams object 当请求远程数据,发送额外的参数。

代码示例:

$('#dg').datagrid({
  queryParams: {
    name: 'easyui',
    subject: 'datagrid'
  }
});
{}
sortName | string | 定义了哪些列可以进行排序。 | null
sortOrder | string | 定义了列的排序顺序,只能“asc’或‘desc’。 | asc
remoteSort | boolean | 定义是否排序数据从服务器。 | true
showHeader | boolean | 定义是否显示行标题。 | true
showFooter | boolean | 定义是否显示行页脚。 | false
scrollbarSize | number | 滚动条的width(当滚动条是垂直)或high(当滚动条是水平)。 | 18
rowStyler function 返回样式如'background:red'. 带两个参数的函数:
rowIndex: 行索引,从0
rowData:与此相应的记录行

代码示例:

$('#dg').datagrid({
  rowStyler: function(index,row){
     if (row.listprice>80){
        return 'background-color:#6293BB;color:#fff;';
     }
  }
});
loader function 定义了如何加载数据从远程服务器。可以放弃这次行动返回false。这个函数接受以下参数:
param: 参数对象传递给远程服务器。
success(data): 这个回调函数会调用这些当检索数据成功。
error(): 这个回调函数会调用这些当未能检索数据。 		json loader
loadFilter function 返回过滤数据显示。 函数把一个参数的“data“表明原始数据。你可以改变原始数据标准数据格式。Th是函数必须返回标准数据对象,包含“total“和”row“属性。

代码示例:

// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
  loadFilter: function(data){
    if (data.d){
      return data.d;
    } else {
      return data;
    }
  }
});
editors | object | 定义了编辑在编辑一行。 | predefined editors
view | object | 定义了视图的数据表格。 | default view

列属性

DataGrid列是一个数组对象,它的元素也是一个数组。元素的元素是一个配置对象数组,它定义了每一列字段。

代码示例:

columns:[[

{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},

{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},

{title:'Item Details',colspan:4}

],[

{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},

{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},

{field:'attr1',title:'Attribute',width:100},

{field:'status',title:'Status',width:60}

]]

名称 | 类型 | 说明 | 默认
title | string | 列标题文本。 | undefined
field | string | 列字段名。 | undefined
width | number | 列的宽度。如果没有定义,宽度将自动扩充以适应其内容。 | undefined
rowspan | number | 显示多少行单元应该占用。 | undefined
colspan | number | 显示有多少列一个单元应占据。 | undefined
align | string | 显示如何对齐列数据。 'left','right','center' 可以被使用。 | undefined
halign | string | 显示如何对齐列标题。可能的值是:'left','right','center'. 如果不指定,标题对齐是相同数据对齐定义通过 'align' 属性 . 这个属性可以从版本1.3.2。 | undefined
sortable | boolean | 真正的允许列可以进行排序。 | undefined
order | string | 默认的排序顺序,只能“asc’或‘desc’。这个属性可以从版本1.3.2。 | undefined
resizable | boolean | 真正的允许列可以调整大小。 | undefined
hidden | boolean | True隐藏列。 | undefined
checkbox | boolean | True 显示一个复选框。 复选框列固定宽度。 | undefined
formatter function 单元格式化程序函数,取三个参数:
value: 字段值。
rowData:行记录数据。
rowIndex: 行索引。

代码示例:

$('#dg').datagrid({
  columns:[[{
     field:'userId',
     title:'User',
     width:80,
     formatter: function(value,row,index){
         if (row.user){
            return row.user.name;
         } else {
            return value;
         }
     }
  }]]
});
undefined
styler function 单元格式样函数,返回字符串的风格自定义单元格样式如'background:red'. 这个函数需要三参数:
value: 字段值。
rowData: 行记录数据。
rowIndex: 行索引。

代码示例:

$('#dg').datagrid({
    columns:[[{
        field:'listprice',
        title:'List Price',
        width:80,
        align:'right',
        styler: function(value,row,index){
                  if (value < 20){
                      return 'background-color:#ffee00;color:red;';
                  }
        }
    }]]
});
undefined
sorter function 自定义字段排序函数,用来做当地的排序,带两个参数:
a: 第一个字段值。
b: 第二个字段值。

代码示例:

$('#dg').datagrid({
      remoteSort: false,
      columns: [[
          {field:'date',title:'Date',width:80,sortable:true,align:'center',
                sorter:function(a,b){
                    a = a.split('/');
                    b = b.split('/');
                    if (a[2] == b[2]){
                        if (a[0] == b[0]){
                            return (a[1]>b[1]?1:-1);
                        } else {
                            return (a[0]>b[0]?1:-1);
                        }
                    } else {
                        return (a[2]>b[2]?1:-1);
                    }
                }
            }
      ]]
  });
undefined
editor string,object 显示编辑类型。当字符串显示编辑类型,当对象包含两个属性:
type: 字符串,编辑类型、可能的类型是:文本,文本区,复选框,numberbox,validatebox,datebox combotree、组合框。
options: 对象,编辑选项对应的编辑类型。 		undefined

编辑

重写默认方法 $.fn.datagrid.defaults.editors.

每个编辑器有以下动作:

名称 | 参数 | 说明
init | container, options | 初始化编辑器并返回目标对象。
destroy | target | 如果有必要摧毁编辑。
getValue | target | 编辑文本的值。
setValue | target , value | 赋值给编辑器。
resize | target , width | 如果有必要调整编辑器。

例如,文本编辑器被定义如下:

$.extend($.fn.datagrid.defaults.editors, {

text: {

init: function(container, options){

var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);

return input;

},

getValue: function(target){

return $(target).val();

},

setValue: function(target, value){

$(target).val(value);

},

resize: function(target, width){

var input = $(target);

if ($.boxModel == true){

input.width(width - (input.outerWidth() - input.width()));

} else {

input.width(width);

}

}

}

});

表格视图

重写默认方法 $.fn.datagrid.defaults.view.

视图是一个对象,将告诉datagrid如何渲染行。对象必须定义了以下功能:

名称 | 参数 | 说明
render | target, container, frozen | 数据加载时调用。 target: DOM对象,datagrid对象。 container: 行容器。 frozen: 表明有无呈现冷冻集装箱。
renderFooter | target, container, frozen | 这是一个选择函数来渲染行页脚。
renderRow | target, fields, frozen, rowIndex, rowData | 这是一个选择功能和将被渲染功能。
refreshRow | target, rowIndex | 定义了如何刷新指定的行。
onBeforeRender | target, rows | 在视图呈现前触发。
onAfterRender | target | 在视图呈现后触发。

事件

从panel的事件扩展,下面是添加事件datagrid。

名称 | 参数 | 说明
onLoadSuccess | data | 当数据被加载成功时触发。
onLoadError | none | 一些错误发生时加载远程数据。
onBeforeLoad | param | 前一个请求将数据加载时触发。如果返回false加载操作将被取消。
onClickRow rowIndex, rowData 当用户点击一个行,参数包含:
rowIndex: 点击的行索引,从0
rowData:点击对应的记录行
onDblClickRow rowIndex, rowData 当用户双击一行,参数包含:
rowIndex: 点击的行索引,从0
rowData: 点击对应的记录行
onClickCell | rowIndex, field, value | 当用户点击一个单元格。
onDblClickCell rowIndex, field, value Fires当用户双击一个单元格。

代码示例:

// 当双击一个单元格,开始编辑,使编辑器获得焦点
$('#dg').datagrid({
      onDblClickCell: function(index,field,value){
          $(this).datagrid('beginEdit', index);
          var ed = $(this).datagrid('getEditor', {index:index,field:field});
          $(ed.target).focus();
      }
  });
onSortColumn sort, order 当用户排序一个列,参数包含:
sort:那种列字段名
order: 排序的列次序
onResizeColumn | field, width | 当用户调整列时触发。
onSelect rowIndex, rowData 当用户选择一个行,参数包含:
rowIndex: 选中的行索引,从0
rowData: 记录对应于选中的行
onUnselect rowIndex, rowData 当用户取消选择一行,参数包含:
rowIndex: 没有被选中的行索引,从0
rowData:记录对应于未经选择的行
onSelectAll | rows | 当用户选择所有行。
onUnselectAll | rows | 当用户取消选择所有的行。
onCheck rowIndex,rowData 当用户检查一行,参数包含:
rowIndex: 检查的行索引,从0
rowData: 记录对应检查行
这个事件是自1.3版本可用。
onUncheck rowIndex,rowData 当用户选中一行,参数包含:
rowIndex:没被选择的行索引,从0
rowData: 对应的记录行
这个事件是自1.3版本可用。
onCheckAll | rows | 当用户选中所有行。这个事件是自1.3版本可用。
onUncheckAll | rows | 当用户反选中的所有行。这个事件是自1.3版本可用。
onBeforeEdit rowIndex, rowData 当用户开始编辑一行,参数包含:
rowIndex: 编辑行索引,从0
rowData: 对应的记录编辑行
onAfterEdit rowIndex, rowData, changes 当用户完成编辑,参数包含:
rowIndex: 编辑行索引,从0
rowData: 对应的记录编辑行
changes: 更改的字段/值对
onCancelEdit rowIndex, rowData 当用户取消编辑行,参数包含:
rowIndex: 编辑行索引,从0
rowData: 对应的记录编辑行
onHeaderContextMenu | e, field | 当datagrid的头部被点击。
onRowContextMenu | e, rowIndex, rowData | 当一行被点击。

方法

名称 | 参数 | 说明
options | none | 返回选择对象。
getPager | none | 返回对象的页面。
getPanel | none | 返回面板对象。
getColumnFields frozen 返回列字段。如果设置为true,冻结冻结列字段返回。
代码示例:
var opts = $('#dg').datagrid('getColumnFields');	// get unfrozen columns
var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
getColumnOption | field | 返回指定列选项。
resize | param | 做调整和做布局。
load param 加载和显示第一页行。如果指定的param”,它将取代与queryParams 的属性。通常一个查询通过一些参数,这种方法可以调用从服务器加载新数据。
$('#dg').datagrid('load',{
      code: '01',
      name: 'name01'
  });
reload | param | 重新加载行。相同的加载方法但停留在当前页面。
reloadFooter footer 重新加载页脚行。代码示例:
// update footer row values and then refresh
  var rows = $('#dg').datagrid('getFooterRows');
  rows[0]['name'] = 'new name';
  rows[0]['salary'] = 60000;
  $('#dg').datagrid('reloadFooter');

// update footer rows with new data
  $('#dg').datagrid('reloadFooter',[
      {name: 'name1', salary: 60000},
      {name: 'name2', salary: 65000}
  ]);
loading | none | 显示加载状态。
loaded | none | 隐藏加载状态。
fitColumns | none | 使列自动伸展/收缩适应表格
fixColumnSize field 固定列的大小。如果“field的参数没有分配,所有列的大小是固定的。

代码示例:

$('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size
$('#dg').datagrid('fixColumnSize');  // fix all columns size
fixRowHeight | index | 修复指定的行高。如果“index”参数没有分配,所有行高度将是固定的。
freezeRow | index | 冻结的行指定将永远显示在顶部当datagrid向下滚动页面。这个方法是可用的,因为版本1.3.2。
autoSizeColumn | field | 调整列宽适合内容。这个方法是可用的,因为1.3版本。
loadData | data | 加载本地数据,老行将被删除。
getData | none | 返回数据的加载。
getRows | none | 返回当前页的行。
getFooterRows | none | 返回页脚行。
getRowIndex | row | 返回指定的行索引,行参数可以一行记录或id字段值。
getChecked | none | 返回所有的行被选中的复选框。这个方法是可用的,因为1.3版本。
getSelected | none | 返回第一个选中的行记录或null。
getSelections | none | 返回所有选定的行,当没有记录被选中,我将返回空数组。
clearSelections | none | 清除所有的选择。
clearChecked | none | 清除所有选中的行。这个方法是可用的,因为版本1.3.2。
selectAll | none | 选择当前页面所有行。
unselectAll | none | 取消选择所有当前页面的行。
selectRow | index | 选择一行,行索引为0的开始。
selectRecord | idValue | 选择一行通过id值参数。
unselectRow | index | 取消选择一行。
checkAll | none | 选中当前页面所有行。这个方法是可用的,因为1.3版本。
uncheckAll | none | 取消选中当前页面所有行。这个方法是可用的,因为1.3版本。
checkRow | index | 选中一个行,该行指数从0。这个方法是可用的,因为1.3版本。
uncheckRow | index | 取消选中一行,行索引从0。这个方法是可用的,因为1.3版本。
beginEdit | index | 开始编辑一行。
endEdit | index | 编辑一行结束。
cancelEdit | index | 取消编辑一行。
getEditors index 得到指定的行编辑器。每个编辑器有以下属性:
actions: 的动作编辑器可以做,一样的编辑器定义。
target: 目标编辑器jQuery对象。
field: 字段名。
type: 编辑器类型,如“text”、“combobox”、“datebox”等等。
getEditor options 得到指定的编辑器,选择包含两个属性:
index: 行索引。
field: 字段名。

Code example:

// 得到datebox编辑和改变它的值
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');
refreshRow | index | 刷新一行。
validateRow | index | 验证指定的行,还真当有效。
updateRow param 更新指定的行,参数包含以下属性:
index: 行索引更新。
row: 新行数据。

代码示例:

$('#dg').datagrid('updateRow',{
      index: 2,
      row: {
          name: 'new name',
          note: 'new note message'
      }
  });
appendRow row 添加一个新行。新行将被添加到最后的位置:
$('#dg').datagrid('appendRow',{
      name: 'new name',
      age: 30,
      note: 'some messages'
  });
insertRow param

插入一个新行,参数包含以下属性:
index: 插入的行索引,如果没有定义,添加新行。
row: 行数据。

代码示例:

//插入新的一行在第二排的位置
$('#dg').datagrid('insertRow',{
      index: 1,	// index start with 0
      row: {
          name: 'new name',
          age: 30,
          note: 'some messages'
      }
  });
deleteRow | index | 删除一行。
getChanges | type | 获得换行上次提交。类型参数指示哪些类型改变行,可能的值是:插入、删除、更新等。当没有指定类型参数,返回所有行改变。
acceptChanges | none | 提交的所有更改数据,因为它被加载或自上次acceptChanges被调用。
rejectChanges | none | 回滚所有更改数据,因为它被创建或自上次acceptChanges调用。
mergeCells options 合并一些单元格,选择包含以下属性:
index: 行索引。
field: 字段名。
rowspan: 要合并的行宽计数。
colspan: colspan数到合并的。
showColumn | field | 显示指定的列。
hideColumn | field | 隐藏指定的列。
﻿


属性表格

继承$.fn.datagrid.defaults. 重写 $.fn.propertygrid.defaults.

为用户提供一个界面的propertygrid浏览和编辑属性的对象。属性网格是一个内联编辑datagrid。它是相当容易使用。用户可以轻松地创建一个层次列表编辑的属性和代表任何数据类型的项。属性网格带有一个内置的排序和分组功能。

依赖

  • datagrid

用法

创建一个propertygrid在标记。注意,列已经内置,不需要再次声明它们。

<table id="pg" class="easyui-propertygrid" style="width:300px" data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>

创建一个propertygrid使用javascript。

<table id="pg" style="width:300px"></table>

$('#pg').propertygrid({

url: 'get_data.php',

showGroup: true,

scrollbarSize: 0

});

添加一个新行,propertygrid。

var row = {

name:'AddName',

value:'',

group:'Marketing Settings',

editor:'text'

};

$('#pg').propertygrid('appendRow',row);

行数据

propertygrid datagrid的扩展。它的行数据格式是datagrid一样。作为一个property行,以下字段是必需的:
name:字段名。
value: 被编辑的字段值。
group: 按字段分组
editor: 编辑在编辑属性值。

行数据的例子:

{"total":4,"rows":[

{"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},

{"name":"Address","value":"","group":"ID Settings","editor":"text"},

{"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},

{"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{

"type":"validatebox",

"options":{

"validType":"email"

}

}}

]}

属性

属性扩展从datagrid,下面是添加属性propertygrid。

名称 | 类型 | 说明 | 默认
showGroup | boolean | 是否显示属性组定义。 | false
groupField | string | 定义分组字段名。 | group
groupFormatter | function(group,rows) | 定义了如何格式化组值。这个函数接受以下参数: group: 该分组字段值。 rows:行属于它的分组。 |

方法

扩展的方法从datagrid,下面是propertygrid添加方法。

名称 | 参数 | 说明
expandGroup | groupIndex | 扩大指定组。如果“groupIndex的参数没有分配,展开分组所有。
collapseGroup | groupIndex | 指定的组崩溃。如果“groupIndex的参数没有分配,全部折叠组。


树

重写默认方法$.fn.tree.defaults.

这棵树显示分层数据在一个树结构在一个web页面。它提供了用户扩展、压缩、拖拽、编辑和异步加载的功能。

依赖

  • draggable
  • droppable

应用实例

树可以研究在< ul >元素。标记可以定义了叶和儿童。节点将<li>元素在ul列表。以下显示的元素,这将用来制作树节点的嵌套在ul元素。

<ul id="tt" 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>

树还可以被定义在一个空的< ul >元素和负载数据使用javascript。

<ul id="tt"></ul>

$('#tt').tree({

url:'tree_data.json'

});

使用loadFilter处理json数据从ASP.NET的web服务。

$('#tt').tree({

url: ...,

loadFilter: function(data){

if (data.d){

return data.d;

} else {

return data;

}

}

});

树数据的格式

每个节点可以包含以下属性:

  • id: 节点id,它是重要的来加载远程数据
  • text: 节点文本来显示
  • state: 节点状态,“open”或“closed”,默认是“open”。当设置为“closed”,节点有子节点,并将负载从远程站点
  • checked: 显示选定的节点是否选中。
  • attributes: 自定义属性可以被添加到一个节点
  • children: 一个数组节点定义了一些子节点

一些例子:

[{

"id":1,

"text":"Folder1",

"iconCls":"icon-save",

"children":[{

"text":"File1",

"checked":true

},{

"text":"Books",

"state":"open",

"attributes":{

"url":"/demo/book/abc",

"price":100

},

"children":[{

"text":"PhotoShop",

"checked":true

},{

"id": 8,

"text":"Sub Bookds",

"state":"closed"

}]

}]

},{

"text":"Languages",

"state":"closed",

"children":[{

"text":"Java"

},{

"text":"C#"

}]

}]

树的异步

这棵树支持内置的异步加载模式,用户创建一个空的树,然后指定一个服务器端动态返回JSON数据用来填充树与异步和需求。这里是一个例子:

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

这棵树是装有URL”get_data.php’。子节点加载依赖父节点状态。当扩展一个封闭的节点,如果节点没有子节点加载,它将发送节点id的值作为http请求参数命名为“id”到服务器上面定义通过URL检索的子节点。

看着从服务器返回的数据:

[{

"id": 1,

"text": "Node 1",

"state": "closed",

"children": [{

"id": 11,

"text": "Node 11"

},{

"id": 12,

"text": "Node 12"

}]

},{

"id": 2,

"text": "Node 2",

"state": "closed"

}]

节点1和节点2是封闭的,当扩展节点1,将直接显示它的子节点。当扩展节点2,它将发送值(2)服务器获取子节点。

这tutorialCreate异步Treeshows如何编写服务器代码返回树数据需求。

属性

名称 | 类型 | 说明 | 默认
url | string | 一个URL检索远程数据。 | null
method | string | http方法检索数据。 | post
animate | boolean | 定义是否显示动画效果当节点展开或折叠。 | false
checkbox | boolean | 定义是否显示复选框每个节点之前。 | false
cascadeCheck | boolean | 定义是否级联检查。 | true
onlyLeafCheck | boolean | 定义是否显示复选框只有在叶节点。 | false
lines | boolean | 定义是否显示树线。 | false
dnd | boolean | 定义是否启用拖拽。 | false
data array 节点数据加载。
$('#tt').tree({
      data: [{
          text: 'Item1',
          state: 'closed',
          children: [{
              text: 'Item11'
          },{
              text: 'Item12'
          }]
      },{
          text: 'Item2'
      }]
  });
null
loader function(param,success,error) 定义了如何加载数据从远程服务器。可以放弃这次行动返回false。这个函数接受以下参数:
param: 参数对象传递给远程服务器。
success(data):这个回调函数会调用这些当检索数据成功。
error(): 这个回调函数会调用这些当未能检索数据。 		json loader
loadFilter function(data,parent) 返回过滤数据显示。返回的数据是在标准的树格式。这个函数接受以下参数:
data: 原始数据加载。
parent: DOM对象,显示父节点。

事件

许多事件回调函数可以把“节点”参数,其中包含以下属性:

  • id: 一个标识值绑定到该节点。
  • text: 文本显示。
  • iconCls: css类来显示图标。
  • checked: 检查是否该节点。
  • state: 节点状态,“open”或“closed”。
  • attributes: 自定义属性绑定到该节点。
  • target: 目标DOM对象。
名称 | 参数 | 说明
onClick node 当用户点击一个节点。代码示例:
$('#tt').tree({
      onClick: function(node){
          alert(node.text);  // alert node text property when clicked
      }
  });
onDblClick | node | 当用户双击一个节点。
onBeforeLoad | node, param | 前一个请求加载数据,返回false取消这种加载作用。
onLoadSuccess | node, data | 当数据加载成功时触发。
onLoadError | arguments | 当数据加载失败,参数的参数是一样的“错误”功能的jquery ajax。
onBeforeExpand | node | 节点扩展之前,返回false取消这个扩大行动。
onExpand | node | 当节点展开时触发事件。
onBeforeCollapse | node | 在节点收缩,返回false取消这个收缩行为。
onCollapse | node | 当节点收缩时触发事件。
onBeforeCheck | node, checked | 在用户单击复选框,返回false取消此检查行动。这个事件可以从版本1.3.1。
onCheck | node, checked | 当用户单击复选框。
onBeforeSelect | node | 在节点被选中时,返回false取消这个选择行动。
onSelect | node | 当节点被选中。
onContextMenu e, node 当节点是正确的点击。代码示例:
// right click node and then display the context menu
$('#tt').tree({
      onContextMenu: function(e, node){
          e.preventDefault();  		// select the node
          $('#tt').tree('select', node.target);  		// display context menu
          $('#mm').menu('show', {
              left: e.pageX,
              top: e.pageY
          });
      }
  });

// the context menu is defined as below:
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
      <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>
onBeforeDrag | node | 当一个节点的拖动开始,返回false取消拖动。这个事件可以从版本1.3.2。
onStartDrag | node | 当开始拖动一个节点。这个事件可以从版本1.3.2。
onStopDrag | node | 停止拖拽一个节点之后。这个事件可以从版本1.3.2。
onDragEnter target, source 当一个节点被拖进某个目标节点,可以下降到。返回错误的拒绝掉。
target: 目标节点元素被删除。
source: 被拖动的源节点。
这个事件可以从版本1.3.2。
onDragOver target, source 当一个节点是拖了一些目标节点,可以删除,返回错误的拒绝掉。
target: 目标节点元素被删除。
source: 被拖动的源节点。
这个事件可以从版本1.3.2。
onDragLeave target, source 当一个节点是拖着离开一些目标节点,可以下降到。
target: 目标节点元素被删除。
source: 被拖动的源节点。
这个事件可以从版本1.3.2。
onDrop target, source, point Fires 当一个节点被删除。
target: DOM对象,节点目标的下降。
source: 源节点。
point: 表明放操作,可能的值是: 'append','top' or 'bottom'.
onBeforeEdit | node | 在编辑节点之前。
onAfterEdit | node | 在编辑节点之后。
onCancelEdit | node | 当取消编辑操作。

方法

名称 | 参数 | 说明
options | none | 返回选项树。
loadData | data | 加载树的数据。
getNode | target | 获取指定节点对象。
getData | target | 获取指定节点数据,包括它的子节点。
reload | target | 重新加载树的数据。
getRoot | none | 得到根节点,返回节点对象
getRoots | none | 得到根节点,返回节点数组。
getParent | target | 得到父节点,该节点的目标参数表明DOM对象。
getChildren | target | 让子节点、目标参数显示节点的DOM对象。
getChecked state 得到节点的检查。状态提供的值是: 'checked','unchecked','indeterminate'. 如果一个国家没有指定,返回“'checked'节点。

代码示例:

var nodes = $('#tt').tree('getChecked');	// get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');	// get unchecked nodes
var nodes = $('#tt').tree('getChecked', 'indeterminate');	// get indeterminate nodes
getSelected | none | 得到选中的节点,并返回它,如果没有节点选择返回null。
isLeaf | target | 确定指定的节点是叶,目标参数显示节点的DOM对象。
find id

找到指定的节点,并返回该节点对象。

代码示例:

// 找到一个节点,然后选择它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
select | target | 选择一个节点,该节点的目标参数表明DOM对象。
check | target | 设置指定的节点被选中。
uncheck | target | 设置指定的节点不被选中。
collapse | target | 收缩的一个节点,该节点的目标参数表明DOM对象。
expand | target | 展开一个节点,该节点的目标参数表明DOM对象。当节点被关闭,没有子节点,节点id值(称为“id”参数)将被发送到服务器的请求的子节点数据。
collapseAll | target | 所有节点收缩。
expandAll | target | 打开所有的节点。
expandTo | target | 展开从根到指定的节点。
append param 附加一些子节点一个父节点。param参数有两个属性:
parent: DOM对象,父节点添加到,如果不指定,作为根节点添加。
data: 数组,节点数据。代码示例:
// 一些节点添加到选定的节点
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
      parent: selected.target,
      data: [{
          id: 23,
          text: 'node23'
      },{
          text: 'node24',
          state: 'closed',
          children: [{
              text: 'node241'
          },{
              text: 'node242'
          }]
      }]
  });
toggle | target | 切换展开/折叠状态的节点、目标参数显示节点的DOM对象。
insert param 插入一个节点到指定节点之前或之后。“param”参数包含以下属性:
before: DOM对象,节点插入之前。
after: DOM对象,节点插入后。
data: 对象,节点数据。

下面的代码显示了如何插入一个新节点之前选中的节点:

var node = $('#tt').tree('getSelected');
  if (node){
      $('#tt').tree('insert', {
          before: node.target,
          data: {
              id: 21,
              text: 'node text'
          }
      });
  }
remove | target | 删除一个节点和它的孩子节点、目标参数显示节点的DOM对象。
pop | target | 取出一个节点和它的孩子节点,该方法是一样的,但返回删除的节点删除数据。
update param 更新指定的节点。“param“的参数有以下属性:
target(DOM object, the node to be updated),id,text,iconCls,checked,etc.

代码示例:

// update the selected node text
var node = $('#tt').tree('getSelected');
  if (node){
      $('#tt').tree('update', {
          target: node.target,
          text: 'new text'
      });
  }
enableDnd | none | 支持拖放功能。
disableDnd | none | 禁用拖放功能。
beginEdit | target | 开始编辑一个节点。
endEdit | target | 编辑节点结束。
cancelEdit | target | 取消编辑节点。
﻿


树型表格

继承$.fn.datagrid.defaults. 重写默认方法$.fn.treegrid.defaults.

treegrid用于显示分层数据网格。它是基于数据网格和结合,可编辑网格树状视图。treegrid允许您创建可定制的,异步可扩展的行和列显示在muliple分层数据。

依赖

  • datagrid

应用实例

创建那么treegrid速度将在HTML标记。在大多数情况下,treegrid遵循相同的结构和格式是datagrid。

<table id="tt" class="easyui-treegrid" style="width:600px;height:400px" data-options="url:'get_data.php',idField:'id',treeField:'name'">

<thead>

<tr>

<th data-options="field:'name',width:180">Task Name</th>

<th data-options="field:'persons',width:60,align:'right'">Persons</th>

<th data-options="field:'begin',width:80">Begin Date</th>

<th data-options="field:'end',width:80">End Date</th>

</tr>

</thead>

</table>

treegrid使用javascript创建。

<table id="tt" style="width:600px;height:400px"></table>

$('#tt').treegrid({

url:'get_data.php',

idField:'id',

treeField:'name',

columns:[[

{title:'Task Name',field:'name',width:180},

{field:'persons',title:'Persons',width:60,align:'right'},

{field:'begin',title:'Begin Date',width:80},

{field:'end',title:'End Date',width:80}

]]

});

属性

属性扩展从datagrid,下面是添加treegrid属性。

名称 | 类型 | 说明 | 默认
idField | string | 定义了关键字段来标识一个树节点。要求。 | null
treeField | string | 定义了树节点字段。必须的。 | null
animate | boolean | 定义是否显示动画效果当节点展开或折叠。 | false
loader | function(param,success,error) | 定义了如何加载数据从远程服务器。可以放弃这次行动返回false。这个函数接受以下参数: param: 参数对象传递给远程服务器。 success(data): 这个回调函数会调用这些当检索数据成功。 error(): 这个回调函数会调用这些当未能检索数据。 | json loader
loadFilter | function(data,parentId) | 返回过滤数据显示。 |

事情

事件扩展从datagrid,下面是添加的事件,那么treegrid速度将。

名称 | 参数 | 说明
onClickRow | row | 当用户点击一个节点。
onDblClickRow | row | 当用户双击一个节点。
onClickCell | field,row | 当用户点击一个单元格。
onDblClickCell | field,row | 当用户双击一个单元格。
onBeforeLoad | row, param | 一个请求加载数据前触发事件,返回false取消这个加载。
onLoadSuccess | row, data | 一个请求加载数据成功后触发事件,
onLoadError | arguments | 当数据加载失败时触发,参数的参数是一样的“error”功能的jquery ajax。
onBeforeExpand | row | 节点扩展之前,返回false取消这个展开行为。
onExpand | row | 当节点扩展。
onBeforeCollapse | row | 在节点收缩,返回false取消这个收缩。
onCollapse | row | 当节点收缩。
onContextMenu | e, row | 当节点被右键点击。
onBeforeEdit | row | 当用户开始编辑一个节点。
onAfterEdit | row,changes | 当用户完成编辑。
onCancelEdit | row | 当用户取消编辑节点。

方法

很多方法把一个参数命名的“id”,此参数表明树节点值。

名称 | 参数 | 说明
options | none | 返回选择的treegrid属性。
resize options treegrid设置大小,选择包含两个属性:
width: 新宽度
height: 新高度
fixRowHeight | id | 修复指定的行高。
loadData | data | 加载treegrid数据。
reload id 重新加载那么treegrid速度将数据。如果“id”参数是通过,重新加载指定的树行,否则重新加载所有树行。

代码示例:

$('#tt').treegrid('reload', 2);	// reload the row which value is equals to 2
$('#tt').treegrid('reload');	// reload the all rows
reloadFooter | footer | 重新加载页脚数据。
getData | none | 获得加载数据。
getFooterRows | none | 获得页脚数据
getRoot | none | 得到根节点,返回节点对象
getRoots | none | 得到根节点,返回节点数组。
getParent | id | 得到父节点。
getChildren | id | 得到子节点。
getSelected | none | 得到选中的节点,并返回它,如果没有节点选择返回null。
getSelections | none | 得到所有选定的节点。
getLevel | id | 获取指定节点级别。
find | id | 找到指定的节点,并返回该节点的数据。
select | id | 选择一个节点。
unselect | id | 取消选择一个节点。
selectAll | none | 选择所有节点。
unselectAll | none | 取消选择所有节点。
collapse | id | 收缩的一个节点。
expand | id | 展开一个节点。
collapseAll | id | 所有节点收缩。
expandAll | id | 展开所有的节点。
expandTo | id | 展开从根到指定的节点。
toggle | id | 切换展开/折叠状态的节点。
append param 添加节点到父节点。“param”参数包含以下属性:
parent: 父节点id,如果不指定,作为根节点添加。
data: 数组,节点数据。
代码示例:
// 附加一些节点选定的行
var node = $('#tt').treegrid('getSelected');
$('#tt').treegrid('append',{
      parent: node.id,  // 节点有一个“id”定义的值通过“idField”属性
      data: [{
          id: '073',
          name: 'name73'
      }]
  });
insert param 插入一个新节点到指定的节点。“param”参数包含以下属性:
before: id值的节点插入之前。
after: id值的节点插入后。
data: 新节点的数据。

代码示例:

// 插入一个新节点之前选中的节点
var node = $('#tt').treegrid('getSelected');
  if (node){
      $('#tt').treegrid('insert', {
          before: node.id,
          data: {
              id: 38,
              name: 'name38'
          }
      });
  }
这个方法是可用的,因为版本1.3.1。
remove | id | 删除一个节点和它的子节点。
pop | id | 取到和返回一个节点数据包括其子节点后删除。这个方法是可用的,因为版本1.3.1。
refresh | id | 刷新指定的节点。
update param 更新指定的节点。这个参数包含以下属性:
id: 节点标识,表明节点更新。
row: 新行数据。

代码示例:

$('#tt').treegrid('update',{
      id: 2,
      row: {
          name: 'new name',
          iconCls: 'icon-save'
      }
  });
这个方法是可用的,因为版本1.3.1。
beginEdit | id | 开始编辑一个节点。
endEdit | id | 编辑节点结束。
cancelEdit | id | 取消编辑节点。
getEditors id 得到指定的行编辑器。每个编辑器有以下属性:
actions: 的动作编辑器可以做。
target: 目标编辑器jQuery对象。
field: 字段名。
type: 编辑器类型。
getEditor param 得到指定的编辑器,参数包含两个属性:
id: 行节点id。
field: 字段名。