easyui参考文档(jquery).doc

1、jquery easyui 参考文档1目 录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 实例

2、 .166.2 参数 .177 ValidateBox（验证框） .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 事件 .29jquery easyui 参考文档210.4 方法 .2911 Tabs（标签） .3011.1 实例 .3011.2 参数 .3211

3、.3 事件 .3211.4 方法 .3311.5 标签面板属性 .3312 Tree（树） .3312.1 实例 .3312.2 参数 .3612.3 事件 .3712.4 方法 .3713 Layout（布局） .3813.1 实例 .3813.2 参数 .3913.3 方法 .3914 Datagrid（数据表） .3914.1 实例 .3914.2 参数 .4314.3 Column 参数 .4414.4 事件 .4514.5 方法 .46jquery easyui 参考文档31 Accordion（可折叠标签）1.1 实例1.1.1 代码jQuery EasyUI$( function

4、() $(#aa).accordion( width : 400,height : 200,fit : false););Accordion for jQueryAccordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.content2content31.1.2 效果图jquery easyui 参考文档41.1.3 扩展实例 html 代码中此行也可写成，并且将 js 代码全部去掉，效果图是一样的。1.2 参数1

5、.2.1 容器参数参数名称 参数类型 描述 默认值width 数字 可折叠标签的宽度。 autoheight 数字 可折叠标签的高度。 autofit 布尔 是否使可折叠标签自动缩放以适应父容器的大小，当为 true时 width 和 height 参数将失效。 falseborder 布尔 是否显示边界线。 true1.2.2 面板参数可折叠标签面板继承自面板（panel）,许多属性定义在标签里，下面的属性就是如此：参数名称 参数类型 描述 默认值selected 布尔 设置可折叠标签中默认展开的标签页 false2 DateBox（日期框）2.1 实例2.1.1 代码jQuery Easy

6、UIfunction disable() $(#dd).datebox(disable);function enable() $(#dd).datebox(enable);/* 将Date/String类型, 解析为String 类型. 传入String类型, 则先解析为Date类型 不正确的Date,返回 如果时间部分为0,则忽略,只返回日期部分. */function formatDate(v) if (v instanceof Date) var y = v.getFullYear();var m = v.getMonth() + 1;var d = v.getDate();var h

7、= v.getHours();var i = v.getMinutes();var s = v.getSeconds();var ms = v.getMilliseconds();if (ms 0)return y + - + m + - + d + + h + : + i + : + s+ . + ms;if (h 0 | i 0 | s 0)return y + - + m + - + d + + h + : + i + : + s;return y + - + m + - + d;return ;jquery easyui 参考文档6$( function() $(#dd).datebo

8、x( currentText : 今天,closeText : 关闭,disabled : false,required : true,missingMessage : 必填 ,formatter : formatDate););DateBoxdisableenable2.1.2 效果图jquery easyui 参考文档72.2 参数属性名 类型 描述 默认值currentText 字符串 为当前日期按钮显示的文本 TodaycloseText 字符串 关闭按钮显示的文本 Closedisabled 布尔 如果为 true 则禁用输入框 falserequired 布尔 定义输入框是否为必添

9、 falsemissingMessage 字符串 当输入框为空时提示的文本 必填formatter function 格式化日期的函数，这个函数以date为参数，并且返回一个字符串parser function 分析字符串的函数，这个函数以date为参数并返回一个日期2.3 事件事件名 参数 描述onSelect date 当选择一个日期时触发2.4 方法方法名 参数 描述destroy none 销毁组件disable none 禁用输入框.enable none 启用输入框3 ComboBox(组合框)3.1 实例3.1.1 代码jQuery EasyUIfunction loadData

10、()$(#cc).combobox(url:combobox_data.json,/该文件内容在下面jquery easyui 参考文档8valueField:id,textField:text);function setValue()$(#cc).combobox(setValue,2);function getValue()var val = $(#cc).combobox(getValue);alert(val);function disable()$(#cc).combobox(disable);function enable()$(#cc).combobox(enable);$( f

11、unction() $(#cc).combobox( width:150,listWidth:150,listHeight:100,/valuefield:value,/textField:text,/url:combobox_data.json,editable:false););ComboBoxloadDatasetValue getValue disableenableOptions: =请选择=苹果香蕉jquery easyui 参考文档9鸭梨西瓜芒果combobox_data.json 内容：“id“:1,“text“:“text1“,“id“:2,“text“:“text2“,“i

12、d“:3,“text“:“text3“,“selected“:true,“id“:4,“text“:“text4“,“id“:5,“text“:“text5“3.1.2 效果图3.2 参数jquery easyui 参考文档10属性名 类型 描述 默认值width 数字 组件的宽度 autolistWidth 数字 下拉列表的宽度 nulllistHeight 数字 下拉列表的高度 nullvalueField 字符串 基础数据值名称绑定到这个组合框 valuetextField 字符串 基础数据的字段的名称绑定到这个组合框 texteditable 布尔 定义是否可以直接到文本域中键入文本

13、trueurl 字符串 加载列表数据的远程 URL null3.3 事件事件名 参数 描述onLoadSuccess none 当远程数据成功加载时触发onLoadError none 当远程数据加载失败时触发onSelect record 当用户选择了一个列表项时触发onChange newValue, oldValue 当文本域字段的值改变时触发3.4 方法方法名 参数 描述select value 选择下拉列表中的一项setValue param 设定指定值到文本域，参数可以是一个字符串，也可以是一个 Javascript对象，如果是对象，必须包含两个属性各对应 valueField 和 TextField 属性。getValuenone 获取字段值reload url 请求远程列表数据.4 Dialog（对话框）4.1 实例4.1.1 代码jQuery EasyUI