手册jquery-easyui中文培训

1、目 ）1Accordion（实参2DateBox（日期框实参事方目 ）1Accordion（实参2DateBox（日期框实参事方3ComboBox(组合框实参事方框实参事方45Messager（提示框实方扩6NumberBox（数字框实参7ValidateBox（验证框实参方扩8Pagination（分页实参事9Window（窗口实参事方Panel（面板实参1事方）实事方）实参事方面板属Tree（树实参事方Layout（布局实参方Datagrid（数据表实参Column参事方21Accordion（可折实）1.1.1 代1Accordion（可折实）1.1.1 代metahttp-equiv=

2、Content-Typecontent=text/html;charset=UTF-jQuerylinkrel=stylesheettype=text/css linkrel=stylesheettype=text/cssscripttype=text/javascriptsrc=./jquery-scripttype=text/javascriptscript$(function()$(#aa).accordion( width : 400,height:200, fit : falsedivid=aaborder=truedivtitle=Title1icon=icon-savestyle

3、=overflow:auto;padding:AccordionforAccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyourcomponentongemoredivtitle=Title2icon=icon-reloadstyle=padding:div1.1.2 效果3扩实例html代码divid=aaborder=true此行也可写divid=aaclass=easyui-accordionstyle=width:300px;height:200px;fit=false ，并且扩实例html代码divid=aaborde

4、r=true此行也可写divid=aaclass=easyui-accordionstyle=width:300px;height:200px;fit=false ，并且将js 代码全部去掉，效果图是一样的参1.2.1 容器参1.2.2 面板参可折 2DateBox（日期框实代!DOCTYPEhtmlPUBLIC-/W3C/DTDHTML4.014参数名参数类描默认布设置可折中默认展开参数名类描默认数可折的宽度数可折的高度布是否使可折自动缩放以适应父容器的大小，当为 width和height参数将失效布是否显示边界线metahttp-equiv=Content-Typecontent=text

5、/html;metahttp-equiv=Content-Typecontent=text/html;jQuerylink rel=stylesheet type=text/css linkrel=stylesheettype=text/css returny+-+m+-d+h+:+i+:s+ . +if (h 0|i 0|s returny+-+m+-d+h+:+i+:returny +- +m+ -+ return5$(function()$(#dd).datebox( currentText$(function()$(#dd).datebox( currentText今天, closeT

6、ext : 关闭,disabled : false, required : true, missingMessage必填,formatter: divstyle=margin-bottom: ahref=#onclick= input效果6参事方3ComboBox(组合框实代metahttp-equiv=Content-jQuerycontent=text/html;link rel=stylesheet type=text/css linkrel=stylesheettype=text/cssscripttype=text/javascriptsrc=参事方3ComboBox(组合框实代me

7、tahttp-equiv=Content-jQuerycontent=text/html;link rel=stylesheet type=text/css linkrel=stylesheettype=text/cssscripttype=text/javascriptsrc=./jquery-7方法参描销毁组禁用输入框启用输入事件参描当选择一个日期时属性类描默认字符为当前日期按钮显示的文字符关闭按钮显示的文布如果为true 则禁用输入布定义输入框是否为字符当输入框为空时提示的文必格式化日期的函数，这个函数以date为参数，并且返回一个字符串分析字符串的函数，这个函数以date为参数并返回一

8、个日期functionurl:comboboxfunctionurl:comboboxdata.json,/该文件内容在下面 functionfunctionvarval=$(#cc).combobox(getValue); functionfunction$(function()$(#cc).combobox( ahref=# ahref=#getValueahref=# ahref=#Options:selectid=ccname=dept8combobox_data.json 内容效果9参事方4实代框metahttp-equiv=Content-Typecontent=text/html

9、;jQuerylink rel=stylesheet type=text/css linkrel=stylesheettype=text/cssscript参事方4实代框metahttp-equiv=Content-Typecontent=text/html;jQuerylink rel=stylesheet type=text/css linkrel=stylesheettype=text/cssscripttype=text/javascriptsrc=./jquery-方法参描选择下拉列表中的设定指定值到文本域，参数可以是一个字符串，也可以是Javascript对象，如果是对象，必须包含

10、两个属性各对应valueFieldTextField属获取字段请列表数据事件参描数据成功加载时触数据加载失败时触当用户选择了一个列表项时触当文本域字段的值改变时触属性类描默认数组件的宽数下拉列表的宽数下拉列表的高字符基础数据值名称绑定到这个组合字符基础数据的字段的名称绑定到这个组合布定义是否可以直接到文本域中键入文字符加载列表数据框functionfunctionahref=# ahref=#ahref=# ahref=#divid=ddicon=icon-style=padding:效果参属性类描默认字符框的标题文New布定义是否显示可折叠按布定义是否显示最小化按布定义是否显示最大化按布定框

11、是否可编辑大数框上的工具条，每个工具条包括事Dialog 的事件和窗口(Window)的事件相同方Dialog 的函数事Dialog 的事件和窗口(Window)的事件相同方Dialog 的函数方法和窗口(Window)的相同5Messager（提示框实代!DOCTYPEhtmlPUBLIC-/W3C/DTDHTML4.01metahttp-equiv=Content-Typecontent=text/html;jQuerylink rel=stylesheet type=text/css linkrel=stylesheettype=text/cssscripttype=text/javas

12、criptsrc=./jquery-functiontitle:MyTitle,msg:Messagewillbeclosedafter4seconds., functiontitle:MyTitle,msg:Messagewillbeclosedafter5数框底部的按钮，每个按钮包括functiontitle:MyTitle,msg:Messageneverbeclosed., functionfunctiontitle:MyTitle,msg:Messageneverbeclosed., functionafunctionfunctionfunctionfunctionfunctiona

13、aaa$.messager.confirm(MyTitle,Areyouif location.href=functionif rompt(MyTitle,Pleasetypealert(youshow|slide | a href=#alert|alert(error) | a href=#| alert(question)|a ahref=#ahref=#div 效果方方法参描以是一下的一个配置对象：方方法参描以是一下的一个配置对象： null,slide,fade,show。默认值是slide。showSpeed默认值600。width：定义消息窗口的宽度。250。 height：定义消

14、息窗口的高度。认值100。 timeout：如果定义为 0，消息窗口将不会关闭，除非用户关闭它。如果定义为非 0 值，当超时后消息窗口将自icon, fnicon ：提示框显示的图标。可用的值是： fn：当窗口关闭时触发的回调函数下： OK 则给回调函数传true,如果点击cancel 则传false。显示一个确定和取消按钮的信息提示窗口提示用户扩可以通过$.messager.defaults 方法自定义 alert 框的ok 按钮和cancel 按钮上显示的文字6扩可以通过$.messager.defaults 方法自定义 alert 框的ok 按钮和cancel 按钮上显示的文字6Numb

15、erBox（数字框实代metahttp-equiv=Content-Typecontent=text/html;charset=UTF-jQuerylink rel=stylesheet type=text/css linkrel=stylesheettype=text/cssscripttype=text/javascriptsrc=./jquery-functionfunctionTheBoxcan onlyinput名类描默认字符按钮上的文字符按钮上的文 (vl)内容。ahref=# ahref=#ahref=# ahref=#input效果参7ValidateBox（验证框实代meta

16、http-equiv=Content-TypejQuerylinkrel=stylesheetlinkrel=stylesheettype=text/css input,textarea width:border:1pxsolid#ccc; padding: 2px;选项类描默认数文本框中可允许的最小数文本框中可允许的最大数最高可精确到小数点后几0scripttype=text/javascriptsrc=./jquery-=message:Pleaseeast0ValidateBoxahref=#0lass=easyui-validateboxinputid=dfeclass=easyui-

17、格式错误 lass=easyui-validateboxlass=easyui-validateboxinvalidMessage=至少5个字符textareaclass=easyui-= param0;message:Pleaseeast0 );定义好以就可以使用了，下面的代码表示输入的最小长度是 5 个字符lass=easyui-validatebox 8Pagination（分页实代metahttp-equiv=Content-Typecontent=text/html;jQuerylink rel=stylesheet type=text/css linkrel=stylesheett

18、ype=text/cssscripttype=text/javascriptsrc=./jquery- div style=width:500px;background:#efefef;border:1pxsolid 效果参事9Window（窗口事件参描当用户选择一个新页时触发，回调函数包含两个参数：pageNumber: 新页面的页数pageSize: 新页面的刷新按钮被点击之前触参事9Window（窗口事件参描当用户选择一个新页时触发，回调函数包含两个参数：pageNumber: 新页面的页数pageSize: 新页面的刷新按钮被点击之前触发，如果返回false 则取消刷刷新以后触改变页面

19、大小时触属性类描默认数当分页建立时设的总数1数每一页显示的数数当分页建立时，显示的页1数用户可以修改每一页的大小，pageList布定义数据是否正在数定义自定义按钮，每个按钮包含两个属性：icols:显示背景图像的SS类 hnler: 当一个按钮被点击时的处理函数布定义是否显示页面布定义是否显示刷新字符在输入框组件前显字符在输入框组件后显字符显示一个页面的信Displayingfromto 窗口的主要用法和面板（panel）用窗口的主要用法和面板（panel）用法差不实代!DOCTYPEhtmlPUBLIC-/W3C/DTDHTML4.01html metahttp-equiv=Content

20、-Typecontent=text/html;charset=UTF-Inserttitlelink rel=stylesheet type=text/css linkrel=stylesheettype=text/cssscripttype=text/javascriptsrc=./jquery-functiontitle: yewen2, width: 600, closed:false, height: 300,functionfunctionfunctionresizeopen closedivid=w class=easyui-windowtitle=MyWindowicon=ico

21、n-save style=width: 500px; height: 200px; padding: 5px; background:divclass=easyui-layoutdivregion=centerstyle=padding:10px;background:;border:1pxsolidjQueryEasyUIframeworkhelpyoubuildyourbrgeeasily. brclickheretopopupanother Ok a class=easyui-linkbuttonicon=icon-cancelhref=javascript:void(0) divid=

22、testclass=easyui-windowclosed=true效果参大多数的属性和面板(panel)的属性是相同的，下面列出一些 Window 私有的属Window 也重写了Panel 里的一些事Window 的事件和面板(panel)的事件相方除了”header”参大多数的属性和面板(panel)的属性是相同的，下面列出一些 Window 私有的属Window 也重写了Panel 里的一些事Window 的事件和面板(panel)的事件相方除了”header”和”body”以外，Window 的函数方法和面板(panel)的相Panel（面板属性类描默认字符窗口的标题文New布定义是否

23、显示可折叠定义按布定义是否显示最小化按布定义是否显示最大化按布定义是否显示关闭属性类描默认数窗口的z-index 属性，可以通过这个属性来增布定义窗口是否可被布定义窗口是否可以被改变大布如果设置为true，窗口的阴影也将显示布定义窗口是否是一个模式窗口实代实代metahttp-equiv=Content-Typecontent=text/html;charset=UTF-jQuerylink rel=stylesheet type=text/css linkrel=stylesheettype=text/cssscripttype=text/javascriptsrc=./jquery-fun

24、ctionfunctionfunctionbodystyle=background:ahref=# closeahref=# style=width:600px;height:300px;border:1pxred;divid=pclass=easyui-paneltitle=MyTitleicon=icon-save collapsible=true minimizable=true style=width:500px;height:150px;padding:10px;background: 效果10.2 参名类描默认在面板头部显示的标题文一个CSS 类来显示在面板中的 16x16 图数设

25、置面板的宽10.3 名参描数据加载时触当面板打开之前触当面板打开之后触当面板关闭之前触当面板关闭之后触当面板销毁之前触当面板关闭之后触当面板折叠之前触当面板折叠之后触当面板展开之前触当面板展开10.3 名参描数据加载时触当面板打开之前触当面板打开之后触当面板关闭之前触当面板关闭之后触当面板销毁之前触当面板关闭之后触当面板折叠之前触当面板折叠之后触当面板展开之前触当面板展开之后触数设置面板的高数设置面板左侧位数设置面板的顶部位给面板添加一个CSS 给面板头部添加一个CSS 给面板主体添加一个CSS 对给面板自定义样布当设置为true，面板尺寸将适合它的父容布定义面板的边布布定义是否显示可折叠定义

26、按布定义是否显示最小化按布定义是否显示最大化按布定义是否显示关闭数自定义工具每个工具可以包含两个属性：iconCls and 布定义在初始化的时候折叠面布定义在初始化的时候最小化面布定义在初始化的时候最大化布定义在初始化的时候关闭面一的URL 加载数据，然后显示在面板当加数据时，在面板中显示的信）11.1.1 -meta http-equiv=Content-Type content=text/html; charset=UTF-jQuery script type=text/javascript src=./jquery-名参描返回设置的属）11.1.1 -meta http-equiv=C

27、ontent-Type content=text/html; charset=UTF-jQuery add div id=tt class=easyui-tabs div title=Tab1 This is Tab2 width closeicon=icon-tableid=testclass=easyui-datagridthfield=f1thfield=f2thfield=f3icon=icon-class=easyui-icon=icon-class=easyui- 效果属性类描默认字符面板的ID属字符面板的文本标字符面板的主体内字符填内容URL地布如果为true，当设置 href

28、时，面板进行缓字符面板上标题的图标CSS 布如果为te，面板会显示出关闭按钮属性类描默认字符面板的ID属字符面板的文本标字符面板的主体内字符填内容URL地布如果为true，当设置 href 时，面板进行缓字符面板上标题的图标CSS 布如果为te，面板会显示出关闭按钮点击可以关闭选项面板。布如果为面板将被选数面板的宽方法参描调容器的大小和布添加新面板可选参数是一个配置对象详细信息可以查看下面的签面板属性关闭一面板，标题参数表明被关闭的面选择一面指示特定是否存事件参描当一个AJAX当用户选择一面板时被触当用户关闭一面板时被触参数参描默认数容器的宽数容器的高数Thebaseidseedtogener

29、atetabpanelsDOMid0布如果为没有背布如果为ture则设的大小以适应它的容器的父容布如果为true则显容器的边数滚动按钮每次被按下时滚动的像数每次滚动持续的毫Tree（树实代!DOCTYPEhtmlPUBLICTree（树实代!DOCTYPEhtmlPUBLIC-/W3C/DTDHTML4.01metahttp-equiv=Content-Typecontent=text/html;charset=UTF-jQuerylink rel=stylesheet type=text/css linkrel=stylesheettype=text/cssscripttype=text/j

30、avascriptsrc=./jquery-scriptalert(youclickcheckbox:true,url: tree_data.json, alert(youclickfunctionfunctionvarnodes= vars =for(vari=0;inodes.length;if (s!= )s+= s +=数面板的高functionvarnode=$(#tt2).tree(getSelected); functionvarfunctionvarnode=$(#tt2).tree(getSelected); functionvarnode =functionvarnode

31、=functionvarnode =parent:node. ,sfunctionvarnode =$(#tt2).tree(remove,functionvarnode=$(#tt2).tree(getSelected); var b = $(#tt2).tree(isLeaf, node. CreatefromCreatefromHTMLulid=tt1class=easyui-SubFolderFileFileFileFileFileCreatefromJSONahref=#getCheckedgetSelected collapse a href=#appendahref=# ahre

32、f=#ul12.1.2 效果参事事件参描id:节点 :点击DOM 对象的目用户参事事件参描id:节点 :点击DOM 对象的目用户双击一个节点时触发，参数同 onclick 事加载数arguments 类似jQuery.ajax.的s 函加载数arguments 类似选项类描默认字符一数据布当节点展开或折叠是否显示动画效果布是否带复选Layout（布局此例最外层写在了body 上，也可以写在某个 div 上13.1.1 meta http-equiv=Content-Type content=text/html; charset=UTF-jQuery 方法参描返回树的所有参数加Layout（布局

33、此例最外层写在了body 上，也可以写在某个 div 上13.1.1 meta http-equiv=Content-Type content=text/html; charset=UTF-jQuery 方法参描返回树的所有参数加载树的数重新加载树的数返回树的root 返回树的所有root 节返回某个节点的父返回某个节点的孩子节获取被勾选的节获取选中的节点，并返回它，如果没有节点选择返回 null判断某个节点是否叶子节选择一个节点，目标参数表明该节点的 DOM 对象折叠节点，目标参数表明该节点的 DOM 展开一个节点，目标参数表明该节点的 DOM 对象折叠所有节展开所有节一些子节点追加到父节点

34、。参数有两个属性parent: DOM 对象，父节点追加data:数组，节点数据绑定某个节点的展开或者折叠状态，使之不能再改变删除一个节点和它的子节点，目标参数表明该节点的 DOM 对象更新指定的节点，参数param 包含如下属性：目标节jQuery.ajax.error 函script type=text/javascript src=./jquery- varpscript type=text/javascript src=./jquery- varp=$(body).layout(panel,west).panel( body class=easyui-div region=north

35、south 13.1.2 效果13.2 参所有属性都必须定义在布局面板创建的标记上方Datagrid（数据表实14.1.1 代!DOCTYPEhtmlPUBLIC-/W3C/DTDHTML13.2 参所有属性都必须定义在布局面板创建的标记上方Datagrid（数据表实14.1.1 代!DOCTYPEhtmlPUBLIC-/W3C/DTDHTMLmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-jQuerylink rel=stylesheet type=text/css linkrel=stylesheettype=text/cs

36、sscripttype=text/javascriptsrc=./jquery-title:My Title, 方法参描 region 收缩某个方位的面板，参数 region 取值可以是展开某个方位的面板，参数 region 取值可以是名类描默认字符布局面板的标题文字符定义布局面板的位置，该值是下列之一: north,south,east, west, 布如果为ture 则显示布局面板的边布如果为ture 则显示分隔栏，用户可以用它来改变布局面板的大字符在面板头部显示图标的字符地址加载数据的 nowrap: true, striped:true,nowrap: true, striped:tr

37、ue,sortName: code, sortOrder: desc, title:Basereturnspanvarp =if alert(beforefunctiontitle:NewTitle, striped: true, width: 650, p:paramtest, name:My Namefunctionvarselected=$(#test).datagrid(getSelected); functionvarids=varrows =for(vari=0;irows.length;i+) functionfunctionfunctionfunctionfunctionahr

38、ef=# getSelectedgetSelections clearSelections selectRow selectRecord a href=#table效果参字符标题文字符一个 css 类，将提供一个背景布是否显示面板的边数表格的参字符标题文字符一个 css 类，将提供一个背景布是否显示面板的边数表格的宽数表格的高数表格的列的配置对象，详见下面column 属性介数columns 属性相通，但这些列将固布是否显示斑马字符数据的获取类型，可取值t布是否在一行显示数字符指定哪些字段时标识字字符请求数据的地Column字 符列标题文字 符列字段名数列宽数该列占几行单元数该列占几列单元字

39、符数据对其方式，可选值有布是否允许该列排布是否显示选择Column字 符列标题文字 符列字段名数列宽数该列占几行单元数该列占几列单元字 符数据对其方式，可选值有布是否允许该列排布是否显示选择函包含三个参数字符wait 布是否显示底部分布是否显示行号布是否允许只选择一布数初始化页1数初始化页面大数初始化页面大小选对字符定义哪一列可以排字符对定义当编辑某行数据时的编辑predefined 数据加载成功时触数据加载失败时触数据加载成功时触数据加载失败时触rowIndex,当用户点击某行时触发, the parameters contains: rowIndex: the clicked row in

40、dex, start with 0 rowData: the record corresponding to the clicked rowIndex,当用户双击某行时触发, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked sort,当用户排序某列时触发theparameterscontains: sort: the sort column field nameorder:thesortcolumnrowIndex,当用户选择某行时触发, the parameters contains: rowIndex: the selected row index, start with 0 rowData: the record corresponding to the selected rowIndex,当用户取消选择某行时触发, the param