Easyui中文培训文档.docx

1、Easyui中文培训文档目 录1 Accordion（可折叠标签） 21.1 实例 21.2 参数 32 DateBox（日期框） 42.1 实例 42.2 参数 62.3 事件 62.4 方法 63 ComboBox(组合框) 73.1 实例 73.2 参数 93.3 事件 93.4 方法 94 Dialog（对话框） 104.1 实例 104.2 参数 124.3 事件 124.4 方法 125 Messager（提示框） 125.1 实例 125.2 方法 155.3 扩展 166 NumberBox（数字框） 166.1 实例 166.2 参数 177 ValidateBox（验证框）

2、 187.1 实例 187.2 参数 207.3 方法 207.4 扩展 208 Pagination（分页） 208.1 实例 208.2 参数 228.3 事件 239 Window（窗口） 239.1 实例 239.2 参数 259.3 事件 269.4 方法 2610 Panel（面板） 2610.1 实例 2610.2 参数 2810.3 事件 2910.4 方法 2911 Tabs（标签） 3011.1 实例 3011.2 参数 3211.3 事件 3211.4 方法 3311.5 标签面板属性 3312 Tree（树） 3312.1 实例 3312.2 参数 3612.3 事件

3、3712.4 方法 3713 Layout（布局） 3813.1 实例 3813.2 参数 3913.3 方法 3914 Datagrid（数据表） 3914.1 实例 3914.2 参数 4314.3 Column参数 4414.4 事件 4514.5 方法 461 Accordion（可折叠标签）1.1 实例1.1.1 代码jQuery EasyUI $( function() $(#aa).accordion( width : 400, height : 200, fit : false ); );Accordion for jQueryAccordion is a part of ea

4、syui framework for jQuery. It lets you define your accordion component on web page more easily.content2content31.1.2 效果图1.1.3 扩展实例html代码中此行也可写成，并且将js代码全部去掉，效果图是一样的。1.2 参数1.2.1 容器参数参数名称参数类型描述默认值width数字可折叠标签的宽度。autoheight数字可折叠标签的高度。autofit布尔是否使可折叠标签自动缩放以适应父容器的大小，当为true时width和height参数将失效。falseborder布尔是

5、否显示边界线。true1.2.2 面板参数可折叠标签面板继承自面板（panel）,许多属性定义在标签里，下面的属性就是如此：参数名称参数类型描述默认值selected布尔设置可折叠标签中默认展开的标签页false2 DateBox（日期框）2.1 实例2.1.1 代码jQuery EasyUI function disable() $(#dd).datebox(disable); function enable() $(#dd).datebox(enable); /* 将Date/String类型,解析为String类型. 传入String类型,则先解析为Date类型 不正确的Date,返回

6、如果时间部分为0,则忽略,只返回日期部分. */ function formatDate(v) if (v instanceof Date) var y = v.getFullYear(); var m = v.getMonth() + 1; var d = v.getDate(); var h = v.getHours(); var i = v.getMinutes(); var s = v.getSeconds(); var ms = v.getMilliseconds(); if (ms 0) return y + - + m + - + d + + h + : + i + : + s

7、+ . + ms; if (h 0 | i 0 | s 0) return y + - + m + - + d + + h + : + i + : + s; return y + - + m + - + d; return ; $( function() $(#dd).datebox( currentText : 今天, closeText : 关闭, disabled : false, required : true, missingMessage : 必填, formatter : formatDate ); );DateBoxdisableenable2.1.2 效果图2.2 参数属性名

8、类型描述默认值currentText字符串为当前日期按钮显示的文本TodaycloseText字符串关闭按钮显示的文本Closedisabled布尔如果为true则禁用输入框falserequired布尔定义输入框是否为必添falsemissingMessage字符串当输入框为空时提示的文本必填formatterfunction格式化日期的函数，这个函数以date为参数，并且返回一个字符串parserfunction分析字符串的函数，这个函数以date为参数并返回一个日期2.3 事件事件名参数描述onSelectdate当选择一个日期时触发2.4 方法方法名参数描述destroynone销毁组

9、件disablenone禁用输入框.enablenone启用输入框3 ComboBox(组合框)3.1 实例3.1.1 代码jQuery EasyUI function loadData() $(#cc).combobox( url:combobox_data.json,/该文件内容在下面 valueField:id, textField:text ); function setValue() $(#cc).combobox(setValue,2); function getValue() var val = $(#cc).combobox(getValue); alert(val); fun

10、ction disable() $(#cc).combobox(disable); function enable() $(#cc).combobox(enable); $( function() $(#cc).combobox( width:150,listWidth:150,listHeight:100,/valuefield:value,/textField:text,/url:combobox_data.json,editable:false ); ); ComboBoxloadDatasetValue getValue disableenableOptions: =请选择= 苹果 香

11、蕉 鸭梨 西瓜 芒果combobox_data.json内容： id:1, text:text1, id:2, text:text2, id:3, text:text3, selected:true, id:4, text:text4, id:5, text:text53.1.2 效果图3.2 参数属性名类型描述默认值width数字组件的宽度autolistWidth数字下拉列表的宽度nulllistHeight数字下拉列表的高度nullvalueField字符串基础数据值名称绑定到这个组合框valuetextField字符串基础数据的字段的名称绑定到这个组合框texteditable布尔定义

12、是否可以直接到文本域中键入文本trueurl字符串加载列表数据的远程URLnull3.3 事件事件名参数描述onLoadSuccessnone当远程数据成功加载时触发onLoadErrornone当远程数据加载失败时触发onSelectrecord当用户选择了一个列表项时触发onChangenewValue, oldValue当文本域字段的值改变时触发3.4 方法方法名参数描述selectvalue选择下拉列表中的一项setValueparam设定指定值到文本域，参数可以是一个字符串，也可以是一个Javascript对象，如果是对象，必须包含两个属性各对应valueField和TextFiel

13、d属性。getValuenone获取字段值reloadurl请求远程列表数据.4 Dialog（对话框）4.1 实例4.1.1 代码jQuery EasyUI $(function() $(#dd).dialog( title:对话框, collapsible:true, minimizable:true, maximizable:true, resizable:true, toolbar: text:Add, iconCls:icon-add, handler:function() alert(add); ,-, text:Save, iconCls:icon-save, handler:f

14、unction() alert(save); , buttons: text:Ok, iconCls:icon-ok, handler:function() alert(ok); , text:Cancel, handler:function() $(#dd).dialog(close); ); ); function open1() $(#dd).dialog(open); function close1() $(#dd).dialog(close); Dialogopen1close1dialog content.dialog content.dialog content.dialog c

15、ontent.dialog content.dialog content.dialog content.dialog content.4.1.2 效果图4.2 参数属性名类型描述默认值title字符串对话框的标题文本New Dialogcollapsible布尔定义是否显示可折叠按钮falseminimizable布尔定义是否显示最小化按钮falsemaximizable布尔定义是否显示最大化按钮falseresizable布尔定义对话框是否可编辑大小falsetoolbar数组对话框上的工具条，每个工具条包括:text,iconCls,disabled,handleretc.nullbuttons数组对话框底部的按钮，每个按钮包括:text,iconCls,handleretc.null4.3 事件Dialog的事件和窗口(Window)的事件相同。4.4 方法Dialog的函数方法和窗口(Window)的相同。5 Messager（提示框）5.1 实例5.1.1 代码jQuery EasyUI function show1() $.messager.show( title:My Title, msg:Message will be closed