jQuery EasyUI 框架帮助你轻松建立站点。
easyui是一个基于jquery的集成了各种用户界面的插件。
使用easyui你不需要写太多javascript代码，一般情况下你只需要使用一些html标记来定义用户接口。
easyui非常简单，但是功能非常强大。
基本
语法解析
使用方法
1. $.parser.parse(); // 解析所有的页面 2. $.parser.parse('#cc'); // 解析特定的代码 属性
名称 $.parser.auto 类型 boolean（布尔型） 描述 定义是否自动解析easyui组件。 默认值 true 事件
名称 $.parser.onComplete 参数 context 描述 当语法解析结束时触发事件。 方法
名称 $.parser.parse 参数 context 描述 解析easyui组件。 语法解析
使用方法
1. $.parser.parse(); // 解析所有的页面 2. $.parser.parse('#cc'); // 解析特定的代码 属性
名称 $.parser.auto 类型 boolean（布尔型） 描述 定义是否自动解析easyui组件。 默认值 true 事件
名称 $.parser.onComplete 参数 context 描述 当语法解析结束时触发事件。 方法
名称 $.parser.parse 参数 context 描述 解析easyui组件。 可拖动
使用$.fn.draggable.defaults重载默认值。
使用方法
1.
名称
类型
描述
拖动时的替代元素，当被设置为'clone'时，将
proxy（替代）
string,function
使用该元素的一个复制元素来作为替代元素。如果指定了一个函数, 它将返回一个jquery对象。
revert（复原） cursor（指针） deltaX（水平
boolean（布尔型）
string（字符串） number（数字）
如果设置为true, 当拖动停止时元素将返回它的初始位置。 拖动时的CSS指针。
被拖动元素对应于当前指针的水平位置。
false move null null 默认值
增量，X轴） deltaY（垂直增量，y轴） handle（句柄） disabled（停止拖动） edge（边缘） axis（拖动轴） number（数字） selector（选择器） boolean（布尔型） number（数字） string（字符串） 被拖动元素对应于当前指针的垂直位置。 null 开始拖动的句柄。 null 当设置为true时停止拖动。 可以在其中拖动的容器的宽度 可用值为'v'或者'h',当设置为空时，元素可以同时在水平和垂直方法拖动。 false 0 null 事件
名称 onBeforeDrag onStartDrag onDrag onStopDrag 参数 e e e e 描述 在拖动之前触发，返回false将取消拖动。 当目标对象开始被拖动时触发。 在拖动过程中触发，当不能再拖动时返回false。 当拖动停止时触发。 方法
名称 options proxy enable disable 参数 none none none none 返回属性对象。 如果替代元素被设置，返回将被用于拖动的替代元素。 允许拖动。 禁止拖动。 描述 拖动至容器
使用$.fn.droppable.defaults重载默认值。
使用方法
1.
1. $('#dd').droppable({ 2. accept:'#d1,#d3' 3. }); 属性名称 accept 类型 selector 描述 决定哪个可拖动元素将会被接收。 默认值 null 事件
名称 onDragEnter 参数 e,source 描述 当可拖动元素被拖入目标容器的时候触发，参数source是被拖动的DOM元素。 当可拖动元素被拖至某个元素之上的时候触发，参数source是被拖动的DOM元素。 当可拖动元素被拖离目标容器的时候触发，参数source是被拖动的DOM元素。 当可拖动元素被拖入目标容器并放置的时候触发，参数source是被拖动的DOM元素。 onDragOver e,source onDragLeave e,source onDrop e,source 缩放
使用$.fn.resizable.defaults重载默认值。
使用方法
1.
1. $('#rr').resizable({ 2. maxWidth:800, 3. maxHeight:600 4. }); 属性名称 disabled（禁止缩放）
handles（句柄） minWidth（最小宽度）
minHeight（最小
类型 boolean（布尔型） string（字符串） number（数字） number（数
描述
如果设置为true将禁止缩放。 说明缩放的方向，'n'表示向上（北）,'e'表示向右（东）等。 缩放时所允许的最小宽度。 缩放时所允许的最小高度。
默认值 false
n, e, s, w, ne, se, sw, nw, all 10 10
高度） maxWidth（最大宽度） maxHeight 字） number（数字） number（数字） number（数字） 缩放时所允许的最大宽度。 10000 缩放时所允许的最大高度。 10000 edge（边界） 将被缩放的边框的边界。 5 事件
名称 onStartResize onResize onStopResize 参数 e e e 当开始缩放时触发。 在缩放过程中触发，当返回false时, DOM元素将不再缩放。 当缩放停止是触发。 描述 分页
使用$.fn.pagination.defaults重载默认值。
依赖关系
链接按钮
使用指南
1.
1. $('#pp').pagination({ 2. total:2000, 3. pageSize:10 4. }); 属性名称 total（总数） 类型 number（数字） number（数字） number（数描述 总记录数，当创建分页时必须设置。 每页显示的记录数。 当分页创建完毕时显1 默认值 pageSize（每页记录数） pageNumber（当前页码） 10 1 字）
pageList（可选择的每页记录数）
loading（是否正在载入）
array（数组） boolean（布尔型）
示当前页码。 用户能够改变每页显示的记录数。 定义数据是否正在载入。
自定义按钮，每个按钮包含2个属性: iconCls：显示背景图片的CSS类 handler：当按钮被点击时调用的一个句柄函数
null
[10,20,30,50]
false
buttons（按钮）
array（数组）
showPageList（显示可选择的每页记录数） showRefresh（显示刷新） beforePageText（输入框之前的文本）
afterPageText（输入框之后的文本）
displayMsg（显示信息）
boolean（布尔型） boolean（布尔型） string（字符串） string（字符串） string（字符串）
定义是否显示可选择的每页记录数。 定义是否显示刷新按钮。
在输入框之前显示的符号。
在输入框之后显示的符号。
在插件右上方显示分页信息。
true
true
Page
of {pages}
Displaying {from} to {to} of {total} items
事件
名称 参数 描述 当用户进行翻页时触发，回调函数包含2个onSelectPage pageNumber, pageSize 参数: pageNumber：下一页的页码 pageSize：下一页的显示记录数 onBeforeRefresh pageNumber, pageSize pageNumber, pageSize pageSize 刷新之前触发, 返回false将取消刷新。 onRefresh onChangePageSize 刷新之后触发。 当用户修改每页显示记录数时触发。 方法
名称 参数 描述 options loading loaded none none none 返回分页属性对象。 提醒分页插件正在载入。 提醒分页插件已经载入。 搜索框
使用$.fn.searchbox.defaults重载默认值。
依赖关系
菜单按钮
使用方法
创建搜索框
1. 使用标签创建。对input标签引用'easyui-searchbox'类。 1. 6. 9.
1. 2.
名称 width（宽度） propmt（提醒） value（值） menu（菜单） searcher（搜索器）
类型
number（数字） string（字符串） string（字符串） selector（选择器） function(value,name)
描述
设置组建的宽度。
显示在搜索框的提醒信息。 搜索框的默认值。 搜索类型下拉菜单。
当用户点击搜索按钮或者按下ENTER键的时候搜索函数将被调用。
默认值 auto '' '' null null
方法
名称 options menu textbox getValue setValue getName destroy resize
参数 none none none none value none none width
描述
返回搜索框属性对象。 返回搜索类型菜单对象。 返回文本框对象。 返回当前搜索关键字。 设置新的搜索关键字。 返回当前搜索类型。 清除搜索框组件
重置搜索框组建的宽度。
进度条
使用$.fn.progressbar.defaults重载默认值。
依赖关系
无
使用方法
创建进度条
进度条组件可以通过html标签或脚本两种方法创建。使用html标签创建更容易，只需要对
1.
获取/设置进度值
为进度条获取当前进度值并且设置一个新的进度值。
1. var value = $('#p').progressbar('getValue'); 2. if (value < 100){ 3. value += Math.floor(Math.random() * 10); 4. $('#p').progressbar('setValue', value); 5. } 属性
名称 width（宽度） value（值） text（文本） 类型 string（字符串） number（数字） string（字符串） 描述 设置进度条的宽度。 当前进度，百分比数值。 显示在组件中的文本模板。 默认值 auto 0 {value}% 事件
名称 onChange 参数 newValue,oldValue 描述 当进度发生改变时触发。 方法
名称 options 参数 none 描述 返回进度条属性对象。 resize getValue setValue width none value 重置进度条。 返回当前进度值。 设置一个新的进度值。 布局管理器
控制面板
使用$.fn.panel.defaults重载默认值。
使用方法
创建控制面板
1. 使用标签创建控制面板
使用标签创建控制面板十分简单，只须要对
1.
panel content.
5.panel content.
6.下面的代码将创建一个工具栏在右上方的控制面板。 1.
panel content.
3.panel content.
4.移动控制面板
调用'move'方法可以将控制面板移动到一个新的位置。 1. $('#p').panel('move',{ 2. left:100, 3. top:100 4. });
载入内容
下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。 1. $('#p').panel({ 2. href:'content_url.php', 3. onLoad:function(){ 4. alert('loaded successfully'); 5. } 6. });
属性
名称 类型 描述 默认值 string
title（标题）
（字符串）
iconCls（图标CSS类）
string（字符串） number（数字） number（数字） number（数字） number（数字） string
cls（类）
（字符串）
headerCls（头部css类）
string（字符串） string
bodyCls（主体类）
（字符串）
style（样式）
object（对象） boolean
fit(铺满浏览器)
（布尔型） boolean
border（边框）
（布尔型）
doSize（调整大小）
boolean（布尔型） boolean（布尔型）
如果设置为true，控制面板头部将不被创建。
false
如果设置为true，在控制面板被创建时将被重置大小并且自动布局。 定义是否显示控制面板边框。
true
给控制面板添加一个自定义的样式。
{}
对控制面板主体引用一个CSS类。
null
对控制面板头部引用一个CSS类。
null
对控制面板引用一个CSS类。
null
在控制面板标题前显示一个16x16大小图标的CSS类。
显示在控制面板顶部的标题文本。
null
null
width（宽度） 设置控制面板的宽度。 auto
height（高度） 设置控制面板的高度。 auto
left（左边距） 设置控制面板的左边距。 null
top（顶边距） 设置控制面板的顶边距。 null
设置为true时，控制面板的大小将铺满它所在的容器（浏览器）。
false
true
noheader（无头部）
string
content（内容）
（字符串）
collapsible（可折叠）
boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean
closable（关闭）
（布尔型）
tools（工具栏）
array（数组） boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean
closed（已关闭）
（布尔型） string
href（超链接）
（字符串） boolean
cache（缓存）
（布尔型）
loadingMessage（载入时信息）
string（字符串）
载入远程数据的超链接，载入的数据将显示在控制面板中。
定义控制面板初始化时是否关闭。
false
定义控制面板初始化时是否最大化。
false
定义控制面板初始化时是否最小化。
false
定义控制面板初始化时是否折叠。
false
自定义工具栏，每一个工具都可以包含2个属性：图标类和句柄。
[]
定义是否显示关闭按钮。
false
定义是否显示最大化按钮。
false
定义是否显示最小化按钮。
false
定义是否显示可折叠按钮。
false
控制面板主体的内容。
null
minimizable（最小化）
maximizable（最大化）
collapsed（已折叠）
minimized（已最小化）
maximized（已最大化）
null
如果设置为true，从超链接载入的数据将被缓存。
true
在正在载入远程数据时显示在控制面板中的信息。
Loading…
定义如何从ajax返回值中提取内容,返回被提取的数据。
extractor: function(data){
extractor（提取器）
function（函数）
}
}
return data;
} else {
return matches[1]; //
only extract body content
if (matches){
var matches =
pattern.exec(data);
var pattern =
/ 事件 名称 onLoad onBeforeOpen onOpen onBeforeClose onClose onBeforeDestroy onDestroy onBeforeCollapse onCollapse onBeforeExpand 参数 none none none none none none none none none none 描述 在远程数据被载入时触发。 在控制面板被打开之前触发，返回false将停止打开。 在控制面板被打开之后触发。 在控制面板被关闭之前触发，返回false将取消关闭。 在控制面板被关闭后触发。 在控制面板被注销前触发，返回false将取消注销。 在控制面板被注销后触发。 在控制面板被折叠之前触发，返回false将停止折叠。 在控制面板被折叠之后触发。 在控制面板被扩展之前触发，返回false将停止扩展（这里应该是指扩展区域，宽、高等）。 onExpand none width, height 在控制面板被扩展之后触发。 在控制面板被缩放后触发。 width：新的控制面板宽度 height：新的控制面板高度 在控制面板被移动后触发。 onResize onMove left,top left：新的控制面板左边距 top：新的控制面板顶边距 onMaximize onRestore onMinimize none none none 在控制面板被最大化后触发 在控制面板被重置为初始大小后触发。 在控制面板被最小化后触发。 方法 名称 options panel header body setTitle open 参数 none none none none title forceOpen 返回选项属性。 返回控制面板对象。 返回控制面板头对象。 返回控制面板主体对象。 设置控制面板头部的标题文本。 当参数forceOpen设置为true时，控制面板将被打开，不受onBeforeOpen回调函数的约束。 当参数forceClose设置为true时, 控制面板将被打开，不受onBeforeClose回调函数的约束。 当参数forceDestroy设置为true时,控制面板将被打开，不受onBeforeDestroy回调函数的约束。 当href属性被设置时，刷新控制面板以载入远程数据。 这是控制面板的尺寸并且进行布局。options对象包含以下2个属性: resize options width：新的控制面板宽度 height：新的控制面板高度 left：新的控制面板左边距 top：新的控制面板顶边距 移动控制面板到一个新的位置。options对象包含以下2个属性: move options left：新的控制面板左边距 top：新的控制面板顶边距 描述 close forceClose destroy refresh forceDestroy href maximize minimize restore collapse expand none none none animate animate 使控制面板铺满整个容器。 最小化控制面板。 使最大化的控制面板重置为其初始化时的大小和位置。 折叠控制面板主体。 扩展控制面板主体。 选项卡切换 使用$.fn.tabs.defaults重载默认值。 依赖关系 控制面板 链接按钮 使用方法 创建选项卡 1. 使用HTML标签创建选项卡 使用HTML标签创建选项卡十分简单，不需要写任何javascript代码，只需要 1. 下面的代码演示如何使用脚本创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。 1. $('#tt').tabs({ 2. border:false, 3. onSelect:function(title){ 4. alert(title+' is selected'); 5. } 6. }); 添加一个选项卡面板 1. //添加一个选项卡面板 2. $('#tt').tabs('add',{ 3. title:'New Tab', 4. content:'Tab Body', 5. closable:true 6. }); 获取当前被选择的选项卡 1. //获取当前被选择的选项卡以及相应的选项卡对象 2. var pp = $('#tt').tabs('getSelected'); 3. var tab = pp.panel('options').tab; //相应的选项卡对象 属性 名称 类型 number（数字） number（数字） boolean（布尔型） boolean（布尔 描述 默认值 auto width（宽度） 选项卡所在容器（控制面板）的宽度。 height（高度） 选项卡所在容器（控制面板）的高度。 如果设置为true，将不显示控制面板背景。 设置为true时，选项卡的大小将铺满 auto plain（简洁模式） fit（铺满浏览器） false false 型） border（边框） scrollIncrement（滚动增量） scrollDuration（滚动时间） tools（工具栏） boolean（布尔型） number（数字） number（数字） array（数组） 它所在的容器（浏览器）。 如果设置true，将显示选项卡所在容器（控制面板）的边框。 选项卡滚动条每次滚动的像素值。 true 100 每次滚动持续的时间，单位为毫秒。 控制面板右侧的工具栏，每个工具选项都跟链接按钮一样。 400 null 事件 名称 onLoad onSelect onBeforeClose onClose onAdd onUpdate onContextMenu 参数 panel title title title title title e, title 描述 当一个选项卡完成ajax远程载入对象时触发。 当用户选择一个选项卡时触发。 在一个选项卡被关闭之前触发，返回false将取消关闭。 在用户关闭一个选项卡面板后触发。 在一个选项卡面板被添加后触发。 在一个选项卡面板被更新后触发。 在一个选项卡面板被鼠标右键单击后触发。 方法 名称 options tabs resize add close getTab getSelected select exists 参数 none none none options title title none title title 返回选项卡属性对象。 返回所有的选项卡面板。 重置选项卡容器（控制面板）大小并且自动布局。 添加一个新的选项卡面板，options参数是一个可以配置的对象，查看选项卡控制面板属性获取更多信息。 关闭一个选项卡面板，title参数表示哪个选项卡将被关闭。 获取特定的选项卡面板名称。 获取被选择的选项卡面板名称。 选择一个选项卡面板。 验证一个特定的选项卡面板是否存在。 描述 更新特定的选项卡面板，param参数包含2个属性: update param tab: 将被更新的选项卡。 options: 选项卡相关配置项。 选项卡面板 选项卡面板属性在控制面板组件中定义，以下是一些常用属性。 默认值 null true 名称 title（标题） content（内容） href（超链接） cache（缓存） iconCls（图标CSS类） width（宽度） height（高度） 一些额外属性 类型 string（字符串） string（字符串） string（字符串） boolean（布尔型） string（字符串） number（数字） number（数字） 描述 选项卡面板的标题。 选项卡面板的内容。 从超链接载入远程内容到选项卡面板。 设置为true将缓存选项卡面板，当href（超链接）属性被设置时有效。 一个显示选项卡面板标题图标的CSS类。 选项卡面板的宽度。 选项卡面板的高度。 null auto auto 名称 closable（可关闭） selected（默认选项卡） 类型 boolean（布尔型） boolean（布尔型） 描述 当这是为true时，选项卡面板将会显示一个关闭按钮，点击该按钮将关闭选项卡。 当设置为true时，将会默认显示该选项卡下的内容。 默认值 false false 可伸缩面板 使用$.fn.accordion.defaults重载默认值 依赖关系 控制面板 使用方法 创建可伸缩面板 使用html标签创建可伸缩面板，只须要对 1. Accordion is a part of easyui framework for jQuery. 5. It lets you define your accordion component on web page more easily. 刷新可伸缩面板的内容 调用'getSelected'方法获取当前面板（的名称），接着可以调用控制面板的'refresh'方法来载入新的内容。 1. var pp = $('#aa').accordion('getSelected'); //获取当前选择的可伸缩面板 2. if (pp){ 3. pp.panel('refresh','new_content.php'); //调用'refresh'方法载入新内容 4. } 容器属性（可伸缩面板所在的容器，通常称为‘盒子’） 名称 width（宽度） height（高度） fit（铺满浏览器） 类型 number（数字） number（数字） boolean（布尔型） boolean（布尔型） boolean（布尔型） 描述 可伸缩面板所在容器的宽度。 可伸缩面板所在容器的高度。 如果设置为true，可伸缩面板所在容器将铺满它所在的父容器（浏览器） 定义是否显示边框。 定义当延伸或者折叠面板时是否显示动画效果。 默认值 auto auto false border（边框） animate（动画效果） true true 可伸缩面板属性 可伸缩面板继承控制面板的属性，以下是额外的属性: 名称 selected（被选择） 类型 boolean（布尔型） 描述 设置为true将默认展开面板。 默认值 false 事件 名称 onSelect onAdd onBeforeRemove 参数 title title title 描述 当一个可伸缩面板被选择时触发。 在一个新面板被添加时触发。 在可伸缩面板被移除之前触发，返回false将取消移除。 onRemove title 在一个可伸缩面板被移除时触发。 方法 名称 options panels resize getSelected getPanel select add remove 参数 none none none none title title options title 描述 返回容器属性对象。 获取所有的面板。 重置可伸缩面板。 获取被选择的面板。 获取特定的可伸缩面板。 选择特定的面板。 添加一个先的可伸缩面板。 移除特定的面板。 布局面板 依赖关系 控制面板 缩放 使用方法 创建布局面板 使用HTML标签创建布局面板，只须要对 1. 1. 折叠布局面板 1. $('#cc').layout(); 2. //折叠左边的面板 3. $('#cc').layout('collapse','west'); 布局面板属性 名称 类型 string（字符串） string（字符串） boolean（布尔型） boolean（布尔型） string（字符串） string（字符串） 描述 默认值 null title（标题） 布局面板的标题。 定义布局面板的位置（方向），可以取下列值的其中之一：north, south, east, west, center。 设置为true将显示布局面板的边框。 如果设置为true将显示一个分隔条，用户可以拖动分隔条来改变布局面板的尺寸。 一个用来显示布局面板头部图标的css类。 region（区域） true border（边框） split（分隔条） iconCls（图标CSS类） href（超链接） false null 一个用来从远程站点载入数据的超链接。 null 方法 名称 resize panel 参数 none region 设置布局面板的尺寸大小。 返回特定的布局面板，'region'参数的可取值为：'north','south','east','west','center'。 折叠特定的布局面板，'region'参数的可取值为：'north','south','east','west'。 延伸特定的布局面板，'region'参数的可取值为：'north','south','east','west'。 描述 collapse region expand region 菜单和按钮 菜单 使用$.fn.menu.defaults重载默认值。 使用方法 创建菜单 使用HTML标签创建菜单必须对 1. 显示菜单 当一个菜单创建完毕，它是隐藏而不可见的，调用'show'方法可以显示菜单。 1. $('#mm').menu('show', { 2. left: 200, 3. top: 100 4. }); 属性 名称 zIndex（堆叠顺序） left（左边距） top（顶边距） 类型 number（数字） number（数字） number 描述 菜单的z-index样式,从第一个菜单开始递增。 菜单的左边距。 菜单的顶边距。 默认值 110000 0 0 事件 名称 onShow onHide onClick 参数 none none item 描述 当一个菜单被显示后触发。 在一个菜单被隐藏后触发。 当一个菜单被点击时触发。 方法 名称 参数 在一个特定的位置显示菜单。 show pos pos参数有2个属性： left：新的左边距。 top：新的顶边距。 hide none 隐藏一个菜单。 获取菜单项数据并将其返回, 数据包含以下属性： target：DOM对象，菜单项目。 id：字符串，分配给元素的ID。 getItem itemEl text：字符串，菜单项的文本。 href：字符串，超链接地址。 disabled：布尔型，菜单项是启用还是禁用。 onclick：函数, 当用户点击菜单时将要执行的函数。 iconCls：字符串，图标css类。 setText param 设置特定的菜单文本，'param'参数包含2个属性： target：DOM对象，将要被设置的菜单项。 描述 text：字符串，新的文本值。 设置特定的菜单项图标，'param'参数包含2个属性： setIcon param target：DOM对象，菜单项目。 iconCls: 新的图标css类。 findItem text 查找特定的菜单项，和getItem方法返回的对象相同。 添加菜单，'param'参数包含以下属性： parent: 待添加新菜单的DOM对象，如果没有被设置，新菜单项将会被作为顶级菜单添加。 appendItem param text：字符串，菜单项文本。 href：字符串，超链接地址。 onclick：字符串或者函数，当用户点击菜单项时将要被执行的脚本代码或者函数。 iconCls: string, the icon class. removeItem enableItem disableItem itemEl itemEl itemEl 移除特定的菜单项。 启用菜单项。 禁用菜单项。 链接按钮 使用$.fn.linkbutton.defaults重载默认值 使用方法 1. easyui 1. $('#btn').linkbutton({ 2. plain:true 3. }); 4. $('#btn').linkbutton('disable'); //禁用按钮 5. $('#btn').linkbutton('enable'); //启用按钮 属性 名称 id（ID） disabled（禁用） 类型 string（字符串） boolean（布尔型） 描述 分配给该组件的ID。 设置为true将禁用按钮。 默认值 null false plain（简洁模式） text（文本） iconCls（图标CSS类） boolean（布尔型） string（字符串） string（字符串） 设置为true将显示简洁效果。 显示在按钮上的文本。 用来在左边显示一个16x16大小图标的css类。 false '' null 方法 名称 options disable enable 参数 none none none 描述 返回属性对象。 禁用按钮。 启用按钮。 菜单按钮 继承$.fn.linkbutton.defaults，使用$.fn.menubutton.defaults重载默认值。 依赖关系 菜单 链接按钮 使用方法 1. Edit 2. 继承linkbutton的属性, 以下是菜单按钮独有的属性。 默认值 true null 100 名称 类型 boolean（布尔型） string（字符串） number（数字） 描述 plain（简洁模式） menu（菜单） duration（持续时间） 设置为true将显示简洁效果。 用来创建一个相应菜单的选择器。 定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。 方法 名称 options disable enable 参数 none none none 描述 返回属性对象。 禁用菜单按钮。 启用菜单按钮。 分隔按钮 继承$.fn.linkbutton.defaults，使用$.fn.splitbutton.defaults重载默认值。 依赖关系 菜单 链接按钮 使用方法 1. Ok 2. 属性继承链接按钮, 以下是分隔按钮的独有属性。 默认值 true null 100 名称 类型 boolean（布尔型） string（字符串） number（数字） 描述 plain（简洁模式） menu（菜单） duration（持续时间） 设置为true将显示简洁效果。 用来创建一个相应菜单的选择器。 定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。 方法 名称 options disable enable 参数 none none none 描述 返回属性对象。 禁用分隔按钮。 启用分隔按钮。 表单 表单 使用方法 1. 1. //调用表单插件的'submit'方法提交 2. $('#ff').form('submit', { 3. url:..., 4. onSubmit: function(){ 5. //进行表单验证 6. //如果返回false阻止提交 7. }, 8. success:function(data){ 9. alert(data) 10. } 11. }); 属性 名称 url（目标网址） 类型 string（字符串） 描述 表单提交的目标网址 默认值 null 事件 名称 onSubmit success onBeforeLoad onLoadSuccess onLoadError 参数 none data param data none 描述 在表单提交之前触发，返回false将阻止表单提交。 当表单成功提交时触发。 在发送载入远程数据请求之前触发，返回false将取消请求。 在表单数据被载入时触发。 在载入表单数据发生错误时触发。 方法 名称 参数 描述 执行表单提交，options参数是一个包含以下属性的对象： submit options url：表单提交的目标网址 onSubmit：在表单提交之前执行的回调函数 success: 在表单成功提交后执行的回调函数 载入记录填充表单。 load data data参数可以是字符串或者对象类型，当传入字符串时，data参数必须是一个远程url地址，否则用户必须自定义要载入的数据 clear validate none none 清除表单数据 执行表单域验证，如果全部表单域有效返回true，该方法与表单验证插件一起使用。 表单验证 使用$.fn.validatebox.defaults重载默认值。 使用方法 1. 1. $('#vv').validatebox({ 2. required:true 3. }); 验证规则 验证规则使用required和validType属性来定义, 以下列出的是插件内置的验证规则。 email: 正则匹配电子邮件。 url: 正则匹配url。 length[0,100]: 验证长度范围。 remote['http://.../action.do','paramName']: 发送ajax请求来验证，验证有效时返回true。 要自定义规则，重载$.fn.validatebox.defaults。你所定义的验证规则必须定义一个验证函数和验证无效时的提示信息。例如，定义一个验证最小长度的规则： 1. $.extend($.fn.validatebox.defaults.rules, { 2. minLength: { 3. validator: function(value, param){ 4. return value.length >= param[0]; 5. }, 6. message: 'Please enter at least {0} characters.' 7. } 8. }); 现在你可以使用最小长度验证规则来定义一个至少要输入5个字符的输入框。 1. 属性 名称 required（必填） 类型 boolean（布尔型） string（字符串） string（字符描述 定义表单域必须填写。 定义表单域的验证类型，比如：email, url等。 当表单域未填写时出现的提默认值 false validType（验证类型） missingMessage（未填null This field is 提示） invalidMessage（无效提示） 串） string（字符串） 示信息。 当表单域的内容被验证为无效时出现的提示。 required. null 方法 名称 destroy validate isValid 参数 none none none 移除并注销组件。 验证表单域的内容是否有效。 调用validate方法并且返回验证结果，true或者false。 描述 自定义组合框 继承$.fn.validatebox.defaults，使$.fn.combo.defaults重载。 依赖关系 表单验证 控制面板 使用方法 1. 2. 1. $('#cc').combo({ 2. required:true, 3. multiple:true 4. }); 属性 属性继承表单验证,以下是只读组合框独有的属性。 默认值 auto 名称 类型 number（数字） number（数字） number（数字） boolean（布尔型） string（字符串） boolean（布尔型） boolean（布尔型） boolean（布尔型） string（字符串） number（数字） 描述 width（宽度） panelWidth（下拉框宽度） panelHeight（下拉框高度） multiple（可多选） 组合框的宽度。 下拉框的宽度。 null 下拉框的高度。 200 定义是否支持多选。 false separator（分隔条） 当支持多选时，用以分隔文本的字符。 定义用户是否可以直接向组合框输入内容。 定义是否禁用输入框。 , editable（可编辑） true disabled（禁用） hasDownArrow（下拉图标） value（值） false 定义是否显示下拉按钮。 true 默认值。 最后一次输入事件与搜索（自动完成）之间的延迟间隔。 当用户按下一个键位时调用的函数，默认的按键助手定义如下： keyHandler: { up: function(){}, down: function(){}, enter: function(){}, query: function(q){} 200 delay（延迟） keyHandler（按键助手） object（对象） } 事件 名称 onShowPanel onHidePanel onChange none none newValue, oldValue 参数 描述 当显示下拉面板的时候触发。 当隐藏下拉面板的时候触发。 当组合框的值发生改变时触发。 方法 方法继承表单验证，以下是只读组合框独有的方法。 名称 options panel textbox destroy resize showPanel hidePanel disable enable validate isValid clear getText setText getValues setValues getValue setValue 参数 none none none none width none none none none none none none none text none values none value 返回属性对象。 返回下拉面板对象。 返回文本框对象。 销毁组件。 调整组件的宽度。 显示下拉面板。 隐藏下拉面板。 禁用组合框。 启用组合框。 验证输入的值。 返回验证结果。 清除组件的值。 获取组合框的值。 设置组合框的值。 返回一个存储下拉面板值的数组。 设置下拉面板的值，参数values是一个数组。 获取下拉面板的值。 设置下拉面板的值。 描述 可装载组合框 继承$.fn.combo.defaults，使用$.fn.combobox.defaults重载默认值。 依赖关系 自定义组合框 使用方法 1. 1. 1. $('#cc').combobox({ 2. url:'combobox_data.json', 3. valueField:'id', 4. textField:'text' 5. }); The json data format sample: 1. [{ 2. \"id\":1, 3. \"text\":\"text1\" 4. },{ 5. \"id\":2, 6. \"text\":\"text2\" 7. },{ 8. \"id\":3, 9. \"text\":\"text3\", 10. \"selected\":true 11. },{ 12. \"id\":4, 13. \"text\":\"text4\" 14. },{ 15. \"id\":5, 16. \"text\":\"text5\" 17. }] 属性 继承自定义组合框的属性, 以下是可装载组合框的独有属性。 默认值 value 名称 valueField（值域） textField（文本域） 类型 string（字符串） string（字符串） string（字符串） string（字符串） string（字符串） array（数组） 描述 绑定到组合框下的数据的值域的名称。 绑定到组合框下数据的文本域的名称。 定义当文本发生改变时，如何载入数据列表。如果组合框要从远程地址载入数据，设置为'remote'。 可供载入数据列表的远程地址。 text mode（模式） local url（超链接地址） method（方法） null 获取数据的HTTP方法。 post data（数据） 将被载入的数据列表。 定义当模式设置为'local'时如何过滤本地数据， null filter（过滤器） function（函数） function有2个参数： q: 用户输入的文本。 row: 数据列表 返回true将允许显示数据列表。 formatter(格式) function（函数） 定义如何返回数据，function有一个参数：row。 事件 事件继承自定义组合框，以下是可装载组合框的独有事件。 名称 参数 描述 onLoadSuccess onLoadError onSelect onUnselect none none record record 当远程数据载入成功时触发。 当远程数据载入错误时触发。 当用户选择一个列表项时触发。 当用户取消选择一个列表项时触发。 方法 方法继承自定义组合框，以下是可装载组合框独有的或者重载自定义组合框的方法。 名称 options getData loadData reload setValues setValue clear select unselect 参数 none none data url values value none value value 返回属性对象。 返回已载入的数据。 载入本地数据列表。 请求远程数据列表。 设置组合框的值，参数values是一个数组。 设置组合框的值。 清除组合框的值。 选择特定的项目。 取消选择特定的项目。 描述 组合树 继承$.fn.combo.defaults和$.fn.tree.defaults，使用$.fn.combotree.defaults重载默认值。 依赖关系 自定义组合框 树形菜单 使用方法 1. 1. 1. $('#cc').combotree({ 2. url:'tree_data.json' 3. }); 属性 属性继承自定义组合框和树形菜单，以下是组合树重载的属性。 名称 editable（可编辑） 类型 boolean（布尔型） 描述 定义用户是否可以直接输入。 默认值 false 事件 事件继承自定义组合框和树形菜单 方法 方法继承自定义组合框，以下是组合树独有的或者重载自定义组合框的方法。 名称 options tree loadData reload clear setValues setValue 参数 none none data url none values value 返回属性对象。 返回树形菜单对象。 载入本地树形菜单数据。 再次向远程树形菜单数据发起请求。 清除组件值。 设置组合框的值，参数values是一个数组。 设置组合框的值。 描述 组合表格 继承$.fn.combo.defaults和$.fn.datagrid.defaults，使用$.fn.combogrid.defaults重载默认值。 依赖关系 自定义组合框 数据表格 使用方法 1. 1. 1. $('#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} ]] }); 属性 属性继承自定义组合框和数据表格，以下是组合表格独有的属性。 默认值 null 名称 loadMsg（载入时信息） idField（id字段） textField（文本域） 类型 string（字符串） string（字符串） string（字符串） string（字符串） 描述 当数据表格载入远程数据时的提示信息。 标识表格行数据唯一性的字段名。 null 显示在文本框中的文本域的名称。 定义当文本发生改变时如何载入组合表格的数据。如果组合表格要从远程服务器载入数据，设置为'remote'。 null mode（模式） local filter（过滤器） function(q, row) 定义当模式设置为'local'时如何选择本地数据，返回true将选择一行。 事件 事件继承自定义组合框和数据表格。 方法 方法继承自定义组合框，以下是组合表格独有的或者重载自定义组合框的方法。 名称 options grid setValues setValue clear 参数 none none values value none 返回属性对象。 返回数据表格对象。 设置组合框的值，参数values是一个数组。 设置组合框的值 清除组合框的值。 描述 数字验证框 继承$.fn.validatebox.defaults，使用$.fn.numberbox.defaults重载默认值。 依赖关系 表单验证 使用方法 1. 1. $('#nn').numberbox({ 2. min:0, 3. precision:2 4. }); 属性 属性继承表单验证，以下是数字验证框的独有属性。 名称 disabled（禁用） min（最小值） 类型 boolean（布尔型） number（数字） 描述 定义是否禁用输入框。 允许的最小值。 默认值 false null max（最大值） precision（精度） number（数字） number（数字） 允许的最大值。 精确到小数点后的最大位数。 null 0 Methods（方法） 方法继承表单验证，以下是数字验证独有的或者重载表单验证的方法。 名称 disable enable fix 参数 none none none 禁用输入框。 启用输入框。 将输入框的值修正为一个有效值。 描述 日期组合框 继承$.fn.combo.defaults，使用$.fn.datebox.defaults重载默认值。 依赖关系 自定义组合框 日历 使用方法 1. 1. $('#dd').datebox({ 2. required:true 3. }); 属性 属性继承自定义组合框，以下是日期组合框独有的属性。 默认值 180 名称 panelWidth（面板宽度） panelHeight（面板高度） currentText（当前文本） closeText（关闭） okText（OK按钮文本） disabled（禁用） 类型 number（数字） number（数字） string（字符串） string（字符串） string（字符串） boolean（布尔型） function（函数） function（函数） 描述 下拉日历面板的宽度。 下拉日历面板的高度。 显示在日历左下角用以选择今天日期的按钮上的文本。 显示在关闭按钮上的文本。 auto Today Close 显示在OK按钮上的文本。 Ok 当设置为true时禁用输入框。 一个格式化日期的函数，该函数的参数是一个被选择的日期并且一个字符串。 一个解析日期的字符串，该函数的参数是一个被选择的日期并且返回一个解析后的日期值。 false formatter（格式） parser（解析器） 事件 名称 onSelect 参数 date 描述 当用户选择日期时触发。 方法 方法继承自定义组合框，以下是重载自定义组合框的方法。 名称 options calendar setValue 参数 none none value 描述 返回属性对象。 获取日历对象。 设置日期组合框的值。 日期时间组合框 继承$.fn.datebox.defaults，使用$.fn.datetimebox.defaults重载默认值。 依赖关系 日期组合框 事件调节器 使用方法 1. 1. $('#dt').datetimebox({ 2. showSeconds:false 3. }); 属性 属性继承日期组合框，以下是日期时间组合框独有的属性。 名称 showSeconds（显示秒） 类型 boolean（布尔型） 描述 定义是否显示秒数信息。 默认值 true 方法 方法继承日期组合框，以下是重载日期组合框的方法。 名称 options spinner setValue 参数 none none value 描述 返回属性对象。 返回时间调节器对象。 设置日期时间组合框的值。 日历 使用$.fn.calendar.defaults重载默认值。 使用方法 1. 名称 width（宽度） 类型 number（数字） number（数字） 描述 日历组件的宽度。 180 默认值 height（高度） 日历组件的高度。 当设置为true时，日 180 fit（铺满浏览器） boolean（布尔型） 历组件的大小将铺满装载它的父容器（浏览器）。 false border（边框） weeks（星期代码列表） months（月份代码列表） boolean（布尔型） array（数组） array（数组） 定义是否显示边框。 显示星期几的代码列表。 true ['S','M','T','W','T','F','S'] ['Jan', 'Feb', 'Mar', 'Apr', 'May', 显示月份的代码列表。 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] year（年份） number（数字） number（数字） Date（日期） 日历组件的起始年份 日历组件默认显示的月份。 当前日期。 当前年份(4位数字) month（月份） current(当前日期) 当前月份，从1开始。 当前日期。 事件 名称 onSelect 参数 date 描述 当用户选择日期的时候触发。 方法 名称 options resize moveTo 参数 none none date 描述 返回属性对象。 重置日历的大小。 将日历设置到一个指定的日期。 调节器 继承$.fn.validatebox.defaults，使用$.fn.spinner.defaults重载默认值。 依赖关系 表单验证 使用方法 1. 1. $('#ss').spinner({ 2. required:true, 3. increment:10 4. }); 属性 属性继承表单验证，以下是调节器的独有属性。 默认值 名称 类型 描述 width（宽度） value（值） min（最小值） max（最大值） increment（增量） editable（可编辑） disabled（禁用） spin（调节函数） number（数字） string（字符串） string（字符串） string（字符串） number（数字） boolean（布尔型） boolean（布尔型） function(down) 组件的宽度 初始值。 允许的最小值。 允许的最大值。 当点击调节器按钮时的增量值。 定义用户是否可以直接输入。 定义是否禁用输入框。 当用户点击调节按钮时调用的函数。 auto null null 1 true false 事件 名称 onSpinUp onSpinDown 参数 none none 描述 当用户点击增加按钮时触发。 当用户点击减少按钮时触发。 方法 方法继承表单验证，以下是调节器独有的方法。 名称 options destroy resize enable disable getValue setValue clear 参数 none none width none none none value none 描述 返回属性对象。 销毁组件。 调整组件宽度。 启用组件。 禁用组件。 获取组件的值。 设置组件的值。 清除组件的值。 数字调节器 继承$.fn.spinner.defaults和$.fn.numberbox.defaults，使用$.fn.numberspinner.defaults重载默认值。 依赖关系 调节器 数字验证框 使用方法 1. 1. $('#ss').numberspinner({ 2. editable:false 3. }); 属性 属性继承调节器和数字验证框。 事件 事件继承调节器。 方法 方法继承调节器，以下是重载调节器的方法。 名称 options setValue 参数 none value 描述 返回属性对象。 设置数字调节器的值。 时间调节器 继承$.fn.spinner.defaults，使用$.fn.timespinner.defaults重载默认值。 依赖关系 调节器 使用方法 1. 1. $('#ss').timespinner({ 2. showSeconds:true 3. }); 属性 属性继承调节器，以下是重载调节器的属性。 默认值 : false 名称 separator（分隔符） showSeconds（显示秒数） highlight（高亮） 类型 string（字符串） boolean（布尔型） number（数字） 描述 时分秒直接的分隔符号。 定义是否显示描述信息。 显示高亮背景的时间要素，0=时，1=分，… 0 事件 事件继承调节器 方法 方法继承调节器，以下是重载调节器的方法。 名称 options setValue getHours getMinutes getSeconds 参数 none value none none none 描述 返回属性对象。 设置时间调节器的值。 获取当前小时的值。 获取当前分钟的值。 获取当前秒钟的值。 窗口 窗口 继承$.fn.panel.defaults，使用$.fn.window.defaults重载默认值。 依赖关系 一般拖动 缩放 控制面板 使用方法 1. 继承控制面板，以下是窗口独有的或者重载控制面板的方法。 名称 title（标题） collapsible（可折叠） minimizable（最小化） maximizable（最大化） closable（关闭） 类型 string（字符串） boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean（布尔型） 窗口的标题。 描述 默认值 New Window true 定义是否显示折叠按钮。 定义是否显示最小化按钮。 true 定义是否显示最大化按钮。 true 定义是否显示关闭按钮。 true closed（已关闭） zIndex（堆叠顺序） draggable（可拖放） resizable（可缩放） shadow（阴影） boolean（布尔型） number（数字） boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean（布尔型） 定义是否在初始化组件时关闭（隐藏）窗口 窗口的堆叠顺序，从第一个窗口的zIndex值开始递增。 定义窗口是否可以被拖放。 false 9000 true 定义窗口是否可以被缩放。 如果设置为true，显示窗口的时候将显示阴影。 定义如何布局窗口，如果设置为true，窗口将显示在它的父容器中，否则将显示在所有元素的上面。 定义窗口是否带有遮罩效果。 true true inline（行内显示） false modal（遮罩） true 事件 事件继承控制面板。 方法 方法继承控制面板，以下是窗口独有的方法。 名称 window 参数 none 描述 返回窗口对象。 对话窗口 继承$.fn.window.defaults，使用$.fn.dialog.defaults重载默认值。 依赖关系 窗口 链接按钮 使用方法 1. 属性继承窗口，以下是重载窗口的属性。 名称 title（标题） collapsible（可折叠） minimizable（最小化） maximizable（最大化） resizable（可缩放） 类型 string（字符串） boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean（布尔型） array（数组） 对话标题。 描述 默认值 New Dialog false 定义是否显示折叠按钮。 定义是否显示最小化按钮。 false 定义是否显示最大化按钮。 false 定义对话窗口是否可以被缩放。 对话窗口顶部的工具栏，每个工具的属性都跟链接按钮的属性一样。 false toolbar（工具栏） null buttons（按钮） array（数组） 对话窗口底部的按钮，每个按钮的属性都跟链接按钮一样。 null 事件 事件继承窗口。 方法 方法继承窗口，以下是对话窗口独有的方法。 名称 dialog 参数 none 描述 返回对话窗口对象。 消息窗口 使用$.messager.defaults重载默认值。 依赖关系 窗口 链接按钮 进度条 使用方法 1. $.messager.alert('Warning','The warning message'); 2. $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){ 3. if (r){ 4. alert('ok'); 5. } 6. }); 属性 名称 类型 描述 默认值 ok（确认） cancel（取消） string（字符串） string（字符串） 显示在“确认”按钮上的文本。 显示在“取消”按钮上的文本。 Ok Cancel 方法 名称 参数 描述 在屏幕的右下方显示一个消息窗口，options参数是一个可配置的对象: showType：定义如何显示消息窗口，可选值: null,slide,fade,show，默认为slide。 showSpeed：定义窗口显示的时间，单位毫秒，默认为 600。 $.messager.show options width：定义消息窗口的宽度，默认为250。 height：定义消息窗口的高度，默认为100。 msg：显示在消息窗口的文本。 title：显示在窗口头部的标题。 timeout：如果定义为0，消息窗口将不会关闭直到用户点击关闭为止。如果定义为非0，消息窗口在超时后将自动关闭。 显示警告窗口。参数如下: title, $.messager.alert msg, icon, fn title：显示在窗口头部的标题文本。 msg：显示在窗口中的文本。 icon：显示的图片，可选值：error,question,info,warning。 fn：当窗口关闭时触发的回调函数。 显示一个带有确认和取消按钮的确认信息窗口。参数如下： $.messager.confirm title, msg, fn title：显示在窗口头部的文本。 msg：显示在窗口中的文本。 fn(b)：回调函数，当用户点击确认按钮时，传递一个true值给回调函数，否则传递一个false值。 显示一个带有确认和取消的输入信息窗口。参数如下： $.messager.prompt title, msg, fn title：显示在窗口头部的标题文本。 msg：显示在窗口中的信息 fn(val)：接受用户输入作为参数的回调函数。 显示一个带进度条信息的窗口。 属性定义如下： options $.messager.progress or method title：显示在面板头部的标题文本，默认为''。 msg：显示在主窗体的文本，默认为''。 text：显示在进度条中的信息默认为undefined。 interval：每次进度增加所耗费的时间，单位为毫秒，默认为300. 方法定义如下： bar：获取进度条对象。 close：关闭进程窗口。 示例代码 显示进程消息窗口。 $.messager.progress(); $.messager.progress('close'); 使用如下代码关闭窗口。 数据表格和树形菜单 数据表格 继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。 依赖关系 控制面板 缩放 链接按钮 分页 使用方法 1. 属性继承控制面板，以下是数据表格独有的属性。 名称 columns（列） frozenColumns（固定列） fitColumns（自适应列宽） 类型 array（数组） array（数组） boolean（布尔型） boolean（布尔型） string（字符串） boolean描述 数据表格列配置对象，查看列属性以获取更多细节。 跟列属性一样，但是这些列固定在左边，不会滚动。 设置为true将自动使列适应表格宽度以防止出现水平滚动。 null 默认值 null false striped（显示条纹） 设置为true将交替显示行背景。 false method（方法） 请求远程数据的方法类型。 post nowrap（截取） （布尔型） 设置为true，当数据长度超出列宽时将会自动截取。 true idField（id字段） string（字符串） string（字符串） string（字符串） boolean表明该列是一个唯一列。 一个用以从远程站点请求数据的超链接地址。 当从远程站点载入数据时，显示的一条快捷信息。 设置true将在数据表格底部显示分页工具栏。 null url（超链接） loadMsg（载入时信息） null Processing, please wait … pagination（分页） （布尔型） false rownumbers（行数） boolean（布尔型） boolean（布尔型） number（数字） number（数字） array 当设置分页属性时，初始化分页码。 当设置分页属性时，初始化每页记录数。 当设置分页属性时，初始化每页记录1 设置为true将只允许选择一行。 false 设置为true将显示行数。 false singleSelect（单选模式） pageNumber（当前页码） pageSize（每页记录数） pageList（可选择10 [10,20,30,40,50] 的每页记录数） queryParams（查询参数） sortName（默认排序） sortOrder（排序顺序） remoteSort（远程排序） object（对象） string（字符串） string（字符串） boolean（布尔型） boolean（布尔型） 数列表。 当请求远程数据时，发送的额外参数。 当数据表格初始化时以哪一列来排序。 定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。 定义是否通过远程服务器对数据排序。 {} null asc true showFooter（显示行底） 定义是否显示行底（如果是做统计表格，这里可以显示总计等）。 返回样式，如：'background:red'，false rowStyler（行样式） function（函数） function有2个参数： index：行索引，从0开始. row：对应于该行记录的对象。 返回用以显示的已过滤数据，function loadFilter（载入过滤器） function（函数） 有一个参数'data'表示原始数据，你可以将原始数据改变为规范的数据格式，该函数必须返回包含 'total'和'rows'属性的标准数据对象。 editors（编辑模式） view（视图） object（对象） object（对象） 定义当编辑一行时的编辑模式。 predefined editors default view 定义数据表格的视图。 列属性 数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。 示例代码: 1. columns:[[ 2. {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true}, 3. {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true}, 4. {title:'Item Details',colspan:4} 5. ],[ 6. {field:'listprice',title:'List Price',width:80,align:'right',sortable:true}, 7. {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true}, 8. {field:'attr1',title:'Attribute',width:100}, 9. {field:'status',title:'Status',width:60} 10. ]] 名称 title（标题） field（字段） width（宽度） rowspan（跨行数） colspan（跨列数） align（对其方式） sortable（可排序） resizable（缩放） hidden（隐藏） checkbox（复选框） 类型 string（字符串） string（字符串） number（数字） 列标题。 列字段。 列宽。 描述 默认值 undefined undefined undefined number（数字） 表明一个单元格跨几行。 undefined number（数字） 表明一个单元格跨几列。 表明如何对其列数据，可选值：'left'，'right'，'center'。 设置为true允许对该列排序。 undefined string（字符串） boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean（布尔型） undefined undefined 设置为true允许该列被缩放。 undefined 设置为true将隐藏列。 undefined 设置为true将显示复选框。 格式化单元格函数，有3个参数： undefined formatter（格式化） function（函数） value：字段的值。 rowData：行数据。 rowIndex：行索引。 单元格样式函数，返回样式字符串装饰表格undefined styler（样式） 如'background:red'，function有3个参数： function（函数） value：字段值。 rowData：行数据。 rowIndex：行索引。 undefined sorter（排序function（函数） T自定义字段排序函数，有2个参数： undefined 器） a：该列的第一个值。 b：该列的第二个值。 表明编辑类型。如果属性是字符串类型表示编辑类型，如果是对象则包含2个参数： type：字符串，编辑类型，可选值：text，editor（编辑器） string,object（字符串，对象） textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。 options：对象，对象于编辑类型的编辑器属性。 undefined 编辑器 使用$.fn.datagrid.defaults.editors重载默认值。 每个编辑器都有以下方法： 名称 init destroy getValue setValue resize 参数 container, options target target target , value target , width 描述 初始化编辑器并返回目标对象。 销毁编辑器。 获取编辑框的值。 设置编辑框的值。 调整编辑器 例如，如下代码将定义一个文本编辑器： 1. $.extend($.fn.datagrid.defaults.editors, { 2. text: { 3. init: function(container, options){ 4. var input = $('').appendTo(container); 5. return input; 6. }, 7. getValue: function(target){ 8. return $(target).val(); 9. }, 10. setValue: function(target, value){ 11. $(target).val(value); 12. }, 13. resize: function(target, width){ 14. var input = $(target); 15. if ($.boxModel == true){ 16. input.width(width - (input.outerWidth() - input.width())); 17. } else { 18. input.width(width); 19. } 20. } 21. } 22. }); 数据表格视图 使用$.fn.datagrid.defaults.view重载默认值。 视图是一个告诉数据表格如何呈现行记录的对象，对象必须定义以下方法： 名称 参数 描述 当数据载入时调用。 render target, container, frozen target: DOM对象，数据网格对象。 container: 行记录容器。 frozen: 是否呈现固定容器。 renderFooter renderRow refreshRow onBeforeRender onAfterRender target, container, frozen target, fields, frozen, rowIndex, rowData target, rowIndex target, rows target 这是一个可选函数用以展现行底。 这是一个可选函数，它可以被render函数调用。 定义如何刷新指定的行。 在视图被呈现之前触发。 在视图被程序之后触发。 事件 事件继承控制面板，以下是数据表格独有的属性。 名称 onLoadSuccess onLoadError onBeforeLoad data none param 参数 描述 当数据载入成功时触发。 当载入远程数据发生错误时触发。 在请求载入数据之前触发，如果返回false将取消载入。 当用户点击行时触发，参数如下： rowIndex：被点击的行索引，从0开始。 onClickRow rowIndex, rowData rowData：对应于被点击的行的记录。 当用户双击一行时触发，参数如下： onDblClickRow rowIndex, rowData rowIndex：被点击的行索引，从0开始。 rowData：对应于被点击的行的记录。 onClickCell onDblClickCell rowIndex, field, value rowIndex, field, value 当用户点击单元格时触发。 当用户双击单元格时触发。 当用户对列排序时触发，参数如下： onSortColumn sort, order sort：排序字段名称。 order：排序顺序。 onResizeColumn field, width 当用户调整列宽时触发。 当用户选择一行是触发，参数如下： onSelect rowIndex, rowData rowIndex：被选择的行索引，从0开始。 rowData：对应于被选择行的记录。 当用户取消选择一行时触发，参数如下： onUnselect rowIndex, rowData rowIndex：被取消选择的行索引，从0开始。 rowData：对应于被取消选择行的记录。 onSelectAll onUnselectAll rows rows 当用户选择所有行时触发。 当用户取消选择所有行时触发。 当用户开始编辑一行时触发，参数如下： onBeforeEdit rowIndex, rowData rowIndex：正在编辑的行索引，从0开始。 rowData：对应于正在编辑的行的记录。 当用户编辑完成时触发，参数如下： rowIndex：正在编辑的行索引，从0开onAfterEdit rowIndex, changes rowData, 始。 rowData：对应于正在编辑的行的记录。 changes：被改变的字段内容，对应方式为字段：值。 当用户取消编辑行时触发，参数如下： onCancelEdit rowIndex, rowData rowIndex：正在编辑的行索引，从0开始。 rowData：对应于正在编辑的行的记录。 onHeaderContextMenu onRowContextMenu e, field e, rowIndex, rowData 当数据表格的列标题被鼠标右键单击时触发。 当一行被鼠标右键单击时触发。 方法 名称 options getPager getPanel getColumnFields getColumnOption resize load 参数 none none none frozen field param param 返回属性对象。 返回页面对象。 返回控制面板对象。 返回列字段，如果设置了frozen属性为true，将返回固定列的字段名。 返回特定的列属性。 缩放和布局。 载入并显示第一页的记录，如果传递了'param'参数，它将会覆盖查询参数属性的值。 重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。 重载行底记录。 显示载入状态。 隐藏载入状态。 让列宽自动适应数据表格的宽度。 固定列尺寸。 固定特定列的高度。 载入本地数据，旧记录将被移除。 返回已载入数据。 返回当前页的记录。 返回行底记录。 返回指定行的索引，row参数可以是行记录或者是一个id字段的值。 返回第一个被选择的行记录或null。 返回所有被选择的行，当没有记录被选择时，将返回一个空数组。 取消所有的已选择项。 全选。 取消全选。 描述 reload reloadFooter loading loaded fitColumns fixColumnSize fixRowHeight loadData getData getRows getFooterRows getRowIndex getSelected getSelections clearSelections selectAll unselectAll param footer none none none none index data none none none row none none none none none selectRow selectRecord unselectRow beginEdit endEdit cancelEdit index idValue index index index index 选择一行，行索引从0开始。 通过传递id参数来选择一行。 取消选择一行。 开始编辑一行。 结束编辑。 取消编辑。 获取指定行的编辑器，每个编辑器有如下属性： actions：编辑器可以做的行为。 getEditors index target：目标编辑器jQuery对象。 field：字段名。 type：编辑器类型。 获取特定的编辑器，options参数有2个属性： getEditor options index：行索引。 field:字段名。 refreshRow validateRow index index 刷新一行。 校验指定的行，如果有效返回true。 更新指定的行，param参数包含如下属性： updateRow param index：要更新的行索引。 row：新的行数据。 appendRow row 添加一行。 插入一个新行，param参数包含如下属性： insertRow param index：要插入的行索引，如果没有定义则在最后面添加一个新行。 row：行数据。 deleteRow index 删除一行。 获取从最后一次提交开始的被修改的所有行，type参数表明getChanges type 修改的类型，可选值：inserted，deleted，updated等。当没有传递type参数时，返回所有被修改的行。 acceptChanges rejectChanges none none 提交所有修改的数据，提交后的数据将不能再修改或者回滚。 回滚所有被删除的行。 合并单元格，options参数包含如下属性： index：行索引。 mergeCells options field：字段名。 rowspan：整合单元格要跨的行数。 colspan：整合单元格要跨的列数。 showColumn hideColumn field field 显示特定的列。 隐藏特定的列。 属性表格 继承$.fn.datagrid.defaults，使用$.fn.propertygrid.defaults重载默认值。 依赖关系 数据表格 使用方法 1. 属性继承数据表格，以下是属性表格独有的属性。 默认值 false group 名称 showGroup（显示分组） groupField（分组字段） groupFormatter（分组格式） 类型 boolean（布尔型） string（字符串） function（函数） 描述 定义是否显示属性分组。 定义要分组的字段名称。 定义如何格式化分组中的值。 树形菜单 使用$.fn.tree.defaults重载默认值。 依赖关系 一般拖动 拖动至容器 使用方法 树形菜单可以用 1. 每个节点都拥有以下属性： id：节点id，对载入远程数据很重要。 text：显示在节点的文本。 state：节点状态，'open' or 'closed'，默认为'open'。当设置为'closed'时，拥有子节点的节点将会从远程站点载入它们。 checked：表明节点是否被选择。 attributes：可以为节点添加的自定义属性。 children：子节点，必须用数组定义。 示例代码： 1. [{ 2. \"id\":1, 3. \"text\":\"Folder1\", 4. \"iconCls\":\"icon-save\", 5. \"children\":[{ 6. \"text\":\"File1\", 7. \"checked\":true 8. },{ 9. \"text\":\"Books\", 10. \"state\":\"open\", 11. \"attributes\":{ 12. \"url\":\"/demo/book/abc\", 13. \"price\":100 14. }, 15. \"children\":[{ 16. \"text\":\"PhotoShop\", 17. \"checked\":true 18. },{ 19. \"id\": 8, 20. \"text\":\"Sub Bookds\", 21. \"state\":\"closed\" 22. }] 23. }] 24. },{ 25. \"text\":\"Languages\", 26. \"state\":\"closed\", 27. \"children\":[{ 28. \"text\":\"Java\" 29. },{ 30. \"text\":\"C#\" 31. }] 32. }] 属性 名称 类型 描述 默认值 url（超链接） method（方法） animate（动画） string（字符串） string（字符串） boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean（布尔型） array（数组） 用以载入远程数据的超链接地址。 获取数据的HTTP方法。 定义当节点打开或关闭时是否显示动画效果。 定义是否在每个节点之前显示复选框。 定义是否支持级联选择。 定义是否只在叶子节点之前显示复选框。 定义是否支持拖放。 将被载入的节点数据。 null post false checkbox（复选框） false cascadeCheck（级联选择） onlyLeafCheck（只选叶子节点） dnd（拖放） data（数据） true false false null 事件 多数事件回调函数都有'node'参数，该参数包含如下属性： id：节点的唯一标识。 text：显示在节点上的文本。 checked：节点是否被选择。 attributes：节点的自定义属性。 target：目标DOM对象。 名称 参数 描述 当用户点击节点时触发，node参数包含如下属性： id：节点id。 onClick node text：显示在节点上的文本。 checked：节点是否被选择。 attributes：节点的自定义属性。 target：被点击的目标DOM对象。 onDblClick onBeforeLoad onLoadSuccess onLoadError node node, param node, data arguments 当用户双击节点时触发。 在请求载入数据之前触发，返回false将取消载入。 当数据载入成功时触发。 当数据载入失败时触发，arguments参数跟jQuery.ajax的'error'函数一样。 onBeforeExpand onExpand onBeforeCollapse onCollapse onCheck onBeforeSelect onSelect onContextMenu node node node node node, checked node node e, node 在节点打开之前触发，返回false将取消打开。 在节点被打开时触发。 在节点被关闭之前触发，返回false将取消关闭。 当节点被关闭时触发。 当用户点击复选框时触发。 在节点被选择之前触发，返回false将取消选择。 当节点被选择时触发。 当节点被鼠标右键点击时触发。 当节点位置被（拖动）更换时触发。 onDrop target, source, point target：DOM对象，需要被拖动动的目标节点。 source：原始节点。 point：指明拖动方式，可选值：'append'，'top'或者'bottom'。 onBeforeEdit onAfterEdit onCancelEdit node node node 在编辑节点之前触发。 在编辑节点之后触发。 当取消编辑时触发。 方法 名称 options loadData getNode getData reload getRoot getRoots getParent getChildren getChecked getSelected isLeaf 参数 none data target target target none none target target none none target 返回树形菜单属性对象。 载入树形菜单数据。 获取特定的节点对象。 获取特定的节点数据，包括它的子节点。 重新载入树形菜单数据。 获取根节点，返回节点对象。 获取根节点，返回节点数组。 获取父节点，target是一个节点DOM对象。 获取子节点，target参数是一个节点DOM对象。 获取所有被选择的节点。 获取被选择的节点并返回，如果没有节点被选择则返回null。 判断指定的节点是否是叶子节点，target参数是一个节点DOM对 描述 象。 find select check uncheck collapse expand collapseAll expandAll expandTo id target target target target target target target target 查找指定的节点并返回节点对象。 选择一个节点，target参数是一个节点DOM对象。 设置指定的节点为已选择状态。 设置指定的节点为未选择状态。< 关闭节点，target参数是一个节点DOM对象。 打开节点，target参数是一个节点DOM对象。 关闭所有的节点。 打开所有的节点。 打开从根节点到指定节点之间的所有节点。 添加若干子节点到一个父节点，param参数有2个属性： append param parent：DOM对象，将要被添加子节点的父节点，如果未指定，子节点将被添加至根节点。 data：数组，节点数据。 toggle target 打开或关闭节点的触发器，target参数是一个节点DOM对象。 在一个指定节点之前或之后插入节点，'param'参数包含如下属性： insert param before：DOM对象，在某个节点之前插入。 after: DOM对象，在某个节点之后插入。 data：对象，节点数据。 remove pop target target 移除一个节点和它的子节点，target参数是一个节点DOM对象。 移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。 更新指定的节点，param参数有如下属性： update param target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。 enableDnd disableDnd beginEdit endEdit cancelEdit none none nodeEl nodeEl nodeEl 启用拖动特性。 禁用拖动特性。 开始编辑节点。 结束编辑节点。 取消编辑节点。 树形表格 继承$.fn.datagrid.defaults，使用$.fn.treegrid.defaults重载默认值。 依赖关系 数据表格 使用方法 1. 属性继承数据表格，以下是树形表格独有的树形。 默认值 null 名称 treeField（树形字段） animate（动画） 类型 描述 string（字符串） 定义作为树节点的字段。 定义当打开或关闭节点时是否显示动画效果。 boolean（布尔型） false 事件 事件继承数据表格，以下是树形表格的独有事件。 名称 onClickRow onDblClickRow onBeforeLoad onLoadSuccess onLoadError 参数 row row row, param row, data arguments 描述 当用户点击节点时触发。 当用户双击节点时触发。 在请求载入数据之前触发，返回false将取消载入。 当数据载入成功时触发。 当数据载入失败时触发，arguments参数和jQuery.ajax的'error'函数一样。 onBeforeExpand onExpand onBeforeCollapse onCollapse onContextMenu onBeforeEdit onAfterEdit onCancelEdit row row row row e, row row row,changes row 在节点打开之前触发，返回false将取消打开。 当节点打开时触发。 在节点关闭之前触发，返回false将取消关闭。 当节点关闭时触发。 当节点被鼠标右键点击时触发。 当用户开始编辑节点时触发。 当用户结束编辑时触发。 当用户取消编辑节点时触发。 方法 名称 options 参数 none 返回树形表格的属性对象。 设置树形表格的大小，options包含2个属性： resize options width：新的树形表格宽度 height：新的树形表格高度。 fixRowHeight loadData reload reloadFooter getData getFooterRows getRoot getRoots getParent getChildren getSelected getSelections getLevel find id data id footer none none none none id id none none id id 固定特定行的高。 载入树形表格数据。 重新载入树形表格数据。 重新载入树形表格的行底数据。 获取已载入的数据。 获取行底数据。 获取根节点，返回节点对象。 获取根节点，返回节点数组。 获取父节点。 获取子节点。 获取被选择节点并返回，如果没有节点被选择则返回null。 获取所有被选择的节点。 获取指定的节点的层级。 查找指定的节点并返回节点数据。 描述 select unselect selectAll unselectAll collapse expand collapseAll expandAll expandTo toggle id id none none id id id id id id 选择一个节点。 取消选择一个节点。 选择所有的节点。 取消选择所有的节点。 关闭节点。 打开节点。 关闭所有节点。 打开所有节点。 打开从根节点到指定节点直接的所有节点。 打开或关闭节点的触发器。 添加若干子节点到一个父节点，'param'参数包含如下属性： append param parent：DOM对象，将要被添加子节点的父节点，如果未指定，子节点将被添加至根节点。 data：数组，节点数据。 remove refresh beginEdit endEdit cancelEdit id id id id id 移除一个节点和它的子节点。 属性指定的节点。 开始编辑节点。 结束编辑节点。 取消编辑节点。 获取指定行的编辑器，每个编辑器都有如下属性： actions：编辑器可以做的行为。 getEditors id target：目标编辑器jQuery对象。 field：字段名。 type：编辑类型。 获取指定的编辑器，options包含2个属性： getEditor options id：行节点 id。 field：字段名。 因篇幅问题不能全部显示，请点此查看更多更全内容
Copyright © 2019- fupindai.com 版权所有 赣ICP备2024042792号-2
违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务
标签引用'easyui-panel'类。每个选项卡面板都可以使用闭合的标签对创建，使用方法跟创建控制面板一样。 2. 5. 8. 11. 2. 使用脚本创建选项卡标签引用'easyui-accordion'类。
2. 在后面将介绍如何改变或者重建可伸缩面板以及修改一些特性。 1. $('#aa').accordion({ 2. animate:false 3. }); 3. 7. Accordion for jQuery
4. 8. content2 9. 10. 11. content3 12. 13. 标签引用'easyui-layout'类。
2. 3. 4. 5. 6. 7. 在整个页面创建布局面板。标签引用'easyui-menu'类，每个菜单项都将使用
标签创建。为菜单添加'iconCls'属性可以指定一个显示在菜单项左侧的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。
3. 1. $('#mb').menubutton({ 2. menu: '#mm' 3. }); 属性Undo 4. Redo 5. 6. Cut 7. Copy 8. Paste 9. 10. Delete 11. Select All 12. 3. 1. $('#sb').splitbutton({ 2. menu:'#mm' 3. }); PropertiesOk 4. Cancel 5. 2. Window Content 3. 1. $('#win').window({ 2. width:600, 3. height:400, 4. modal:true 5. }); 6. $('#win').window('close'); //关闭窗口 属性 2. Dialog Content. 3. 1. $('#dd').dialog({ 2. modal:true 3. }); 属性 1. $('#tt').datagrid({ 2. url:'datagrid_data.json', 3. columns:[[ 4. {field:'code',title:'Code',width:100}, 5. {field:'name',title:'Name',width:100}, 6. {field:'price',title:'Price',width:100,align:'right'} 7. ]] 8. }); 数据表格属性
1. $('#pg').propertygrid({ 2. url:'propertygrid_data.json', 3. showGroup:true 4. }); 属性
标签定义，它可以定义叶子节点和子节点，代码示例如下：
2.
也可以用不带 5.
26. 8.
18. 标签来定义： 1.
1. $('#tt').tree({ 2. url:'tree_data.json' 3. }); 树形菜单的数据格式
1. $('#tt').treegrid({ 2. url:'treegrid_data.json', 3. treeField:'name', 4. columns:[[ 5. {title:'Task Name',field:'name',width:180}, 6. {field:'persons',title:'Persons',width:60,align:'right'}, 7. {field:'begin',title:'Begin Date',width:80}, 8. {field:'end',title:'End Date',width:80} 9. ]] 10. }); 属性