jquery-easy-ui

1、Jquery Easyui什么是easyuijQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。目录说明开源授权协议商业授权协议自述文件升级日志文件用于模块加载一、快速入门1.1搭建

2、easyui环境我们需要引入3个基本的文件lll1.2如何写easyui - html方式通过配置元素的属性的方式来写easyui的ui插件,如下面的代码，我们配置一个panel(面板) ，首先必须配置class为easyui-panel,如果需要加一个标题我们则需要些title属性即可，想给这个面板添加一个图标，我们只需要配置 iconCls属性即可，easyui本身就提供了一套icon的css,我们在页面里面引入themes/icon.css即可使用easyui给我们定义的css 1.3、data-options属性我们在写 iconCls这种属性的时候编辑器会提示错误，easyui提供d

3、ata-options属性给我来写组件的配置如下面代码1.4、Hello World $(function () $.messager.alert(hello word, 欢迎光临); );leasyui版Hello World我们在写easyui 的js代码的时候也需要dom树生成后,也就是说我们需要写$(function()这个方法二、内容组件2.1、panel(面板)panel面板是easyui里面非常基础的一个内容组件，在我们后期学的tabs (选项卡)、accordion(手风琴)这两种内容组件都依赖于panel组件。构建一个panel组件代码如下 $(#myDiv).panel(

4、title: js方式的panel, width: 300, height: 500, fit: true, border: true, content: 设置面板内,)1.5如何写easyui - js方式 $(#myDiv).panel( title: js方式的panel, width: 300, height: 500, collapsible: true );使用配置的方式创建以easyui的panel组件。代码如下2.1.1、panel其他常用属性loadingMessage：显示加载消息href：panel内容加载地址collapsible：添加收缩/显示按钮closable：显

5、示关闭按钮minimizable：显示最大化按钮maximizable：显示最小化按钮closed:初始的时候是否关闭面板2.1.2、panel-添加tools如果我们需要给panel的头上面加上如上图的功能按钮就可以使用panel的tools属性给面板添加一个工具按钮，代码如下tools: iconCls: icon-add, handler: function () $.messager.alert(系统提示,你点击了添加按钮); , iconCls: icon-save, handler: function () $.messager.alert(系统提示,你点击了保存按钮); 2.2、

6、tabs(选项卡)同过依赖关系,我们可以得知tabs依赖panel与linkbutton。说明tabs同样能使用panel属性及方法，tabs的add方法是给他tabs添加一个tab页 var tabs = $(#tt).tabs( border: false, fit: true,); $(#tt).tabs(add, title: Tab页, content: tab页内, closable: true, width: 50,);2.2.1、tabs(选项卡)-常用属性plain:简洁模式toolPosition:工具栏位置,有left与right两个值tabPosition:标签位置,有

7、top、bottom、left、rightheaderWidth:标签的宽度,只有toolPosition为left、right有效scrollDuration: 每个滚动动画持续时间scrollIncrement:每次标签滚动的像素2.2.2、tabs(选项卡)-tools同样tabs也有tools但是tools用在不同的地方就会有不同的效果1、tabs选项卡上面 tools: iconCls: icon-add, handler: function () alert(add); 续2、给tabs的选项卡添加tools工具栏 tools: iconCls: icon-mini-refresh

8、, handler: function () alert(refresh); easyui针对标签这种比较特殊的tools写了一个默认的icon-mini的图标样式3、Accordion(手风琴)accordion(手风琴)布局是将一组相关的功能或者内容放到一起，每个选项卡我们都可以使用href加载内容,也可以使用content属性设置值 accordion.accordion(add, title: 第一组功能, href: /HtmlPage1.html, selected: true );广州传智播客 三、easyui事件与方法的使用3.1、easyui事件easyui事件可以在构建的时

9、候就通过属性方式添加上去，比如在panel收缩的时候添加一个事件，在构建的时候代码如下 onCollapse: function () alert(0); 如果我们需要在构建后添加事件，代码如下$(#myDiv).panel( onMaximize: function () alert(最大化了！) );3.2、easyui方法在easyui中执行一个方法的方式比较特殊，是以参数调用的方式执行，如下面代码调用setTitle方法设置title$(#myDiv).panel(setTitle, 设置title);广州传智播客 四、布局layou4.1、easyui布局-layout在easyui

10、里面只有一种布局方式，layout（东、南、西、北、中）的布局方式，创建layout布局的方式如下: 这是一个北部面板 这是一个南部面板 这是一个西部面板 这是一个北东部面板 这是一个中间面板 续-列图4.2、add方法使用add方式给layout动态添加一个面板 $(#myDiv).layout(add, region: west, width: 180, title: West Title, split: true, tools: iconCls: icon-add, handler: function () alert(add) , iconCls: icon-remove, handl

11、er: function () alert(remove) );4.3、整个页面定义成layout我们在创建layout布局的时候东(east)、南(south),西(west)、北(north)都可以不写，但是中(center)必须写。假如我们想让整个页面都是layout布局，这样就不用考虑高度宽度等问题。如何做？我们只需要在body标签上面添加一个class即可。代码如下： north south west east center广州传智播客 五、窗口,对话框,提示框5.1、window(窗口)通过上面的代码创建一个名称为“窗口”，高度400宽度300的窗口。当modal属性为true的时

12、候，窗口弹出后在窗体下面的内柔都会被加上一个遮罩，我称这样的窗口为模态窗口 $(function () $(#mywin).window( title: 窗口, width: 300, height: 400, modal:true ); );窗口我们在程序中会大量的使用，比如我们的添加、编辑都可以使用窗口实现，与winfrom的程序非常的类似。下面的代码是创建一个基本的窗口5.1.2、window(窗口)-常用方法及属性1、打开 使用open方法打开窗口$(#mywin).window(open);2、关闭 使用close方法关闭窗口$(#mywin).window(close);1、dra

13、ggable:是否拖动2、resizable：是否允许改变大小3、shadow：是否显示窗口阴影4、inline:如果为true则在父控件里面，false则在所有元素上面窗口在最大化的时候是填充满整个父元素，在最小化的时候则是隐藏窗口。5.2、对话框(Dialog)Dialog是一个特殊的window，跟window相比它在顶部跟底部多了一个按钮栏。创建代码如下 $(#mywin).dialog( title: 对话框, width: 400, height: 200, toolbar: text: 添加, iconCls: icon-add , buttons: text: 保存, text

14、: 取消 );5.3、弹出框(messager)easyui中定义五种弹出框1、$.messager.show:在屏幕右下角显示一个消息窗口2、$.messager.alert:显示一个警告窗口3、$.messager.confirm：显示一个确认窗口，包含确认、取消两个按钮4、$.mpt：显示一个带输入框的消息窗口，包含确认、取消两个按钮5、$.gress:显示一个带进度的消息窗口5.3.1、showlshow是一个比较特殊的弹出窗口，也是比较常用的一个组件，参数说明如下：lshowType：如何显示消息窗口， null,slide(滑动),f

15、ade(淡入淡出),show(从右下角向左上角方向弹出来），默认为slidelshowSpeed:消息窗口完成弹出的时间lwidth:宽lheight:高ltitle:消息窗口标题lmsg:消息窗口显示内容lstyle:设置消息宽的样式ltimeout:自动关闭时间，为0则不关闭，默认4秒关闭5.3.2、alert、confirm、promptlalert、confirm、prompt这个三个组件的配置非常相似ltitle:消息框标题lmsg:消息框内容licon:图标，可选值error,question,info,warning.lfn:回调函数三个组件的回调函数参数略微不同，alert没有

16、参数，confirm与prompt都有一个参数。还要一点不同就是confirm与prompt没有icon属性，他们的图标都是固定了的。 $.messager.alert(弹出框, 这里是弹出内容, info, function () alert(点击了) ); $.messager.confirm(确认, 你确认操作吗?, function (r) if (r) alert(确认); );续$.gress(bar)通过上面代码得到了进度条的JQ对象，可以通过JQ的方法按我们的要求操作bar对象$.gress(close);调用close方法可以关

17、闭progress进度条消息窗口5.3.3-progresslprogress:带进度消息框，配置信息如下ltitle:消息框标题，默认为空lmsg:消息内容,默认为空ltext:显示在进度条里的文字linterval:进度更新间隔时间，默认300l上面是progress的属性，该组件也提供了两个方法lbar:得到进度条对象lclose:关闭进度条 $.gress( title: 标题, msg: 显示内容, text: 进度条上显示的文字, interval:300);广州传智播客 六、按钮(button)6.1、linkbuttonlinkbutton是将一个标签包

18、装成一个能显示图片、文字、的超链接按钮正常按钮禁用按钮图标显示在右边，并且为简单样式l如何给linkbutton添加一个事件？使用JQ的方式就能给linkbutton添加事件，可以直接使用click方法，也可以是用bind方法a3.click(function () alert(单击事件););a3.bind(click, function () alert(单击事件););6.2、menu通过给div添加一个名为easyui-menu的class创建以menu 打开 导出 保存 退出6.2.1、menu-show()、click()创建完了menu后，刷新页面发现没有显示。如果要显示menu

19、就需要用show方法显示出来,通过left、top来指定显示的位置$(#menu).menu(show, left: 200, top: 100 );menu提供了一个onClick属性来执行单击事件，回调函数传了一个参数item$(#menu).menu( onClick: function (item) console.log(item); );6.3、menubutton创建menubutton按钮需要同时创建一个menu，在menubutton中使用menu属性指定menu。 $(#a1).menubutton( text: hello, iconCls: icon-add, menu

20、:#menu );6.4、splitbuttonsplitbutton与menubutton非常相似，用法也一样，只是在显示上稍有不同，splitbutton是前面是一个按钮，后面有一个向下的小箭头，鼠标移动上去就能显示menu$(#a1).splitbutton( text: hello, iconCls: icon-add, menu:#menu);广州传智播客 七、表单7.1、ValidateBox(表单验证)l使用validType属性指定验证方法1、标签方式创建 2、js方式添加表单验证$(#inp).validatebox( required: true, validType: e

21、mail );7.1.1ValidateBox属性方法说明属性说明属性说明lrequired:是否必填lvalidType验证类型ldelay延迟验证lmissingMessage:内容为空的文本提示linvalidMessage:内容无效的文本提示ltipPosition:提示框显示位置,默right.可选值left、right方法说明方法说明ldestroy:删除销毁组件lvalidate:执行验证lisValid:执行验证,并返回true或者false7.1.2、自定义验证规则l通过继承$.fn.validatebox.defaults.rules来重写我们的验证规则,具体做法如下lea

22、syui已经定义好了email、url、length0,100、remoteurl,paramName$.extend($.fn.validatebox.defaults.rules, pwd: validator: function (value, param) return value.length = param0&value.length=param1; , message: 输入至少0个字符.最多1个字符 );7.2、Combo(下拉选择框) $(#cc).combo( required: true, editable: false ); $(#sp).appendTo($(#cc)

23、.combo(panel); $(#sp input).click(function () var v = $(this).val(); var s = $(this).next(span).text(); $(#cc).combo(setValue, v).combo(setText, s).combo(hidePanel); );combo的使用比较麻烦，不能直接设置数据，在实际的开发中我们也不会使用,一般使用combobox来做下拉选择框7.2.1、Combo-属性说明lwidth:宽lheight :高lpanelWidth:下拉面板的宽lpanelHeight:下拉面板的高lmult

24、iple:是否支持多选lseparator:多选时候的文本分割符leditable:启用ldisabled:禁用lhasDownArrow:是否显示向下箭头lvalue:设置初始值ldelay:输入搜索延迟时间，lkeyHandler:用户按键函数7.2.2Combo-方法lpanel:返回下拉面板对象ltextbox:返回文本框对象lshowPanel:显示下拉面板lhidePanel:隐藏下拉面板lvalidate:执行验证lisValid:执行验证，并返回true、false结果lclear:清除文本框值lreset:重置文本框值lgetText:得到文本框值lsetText:设置文本框

25、值lgetValues:得到多个值lsetValues:设置多个值lgetValue:得到一个值lsetValue:设置一个值7.3、ComboBox-下拉选择框ComboBox创建方式有三种，标签，输入框 ，js方式创建 下拉1/option 下拉2/option 下拉3/option 下拉4/option 下拉5/option $(#cc).combobox( url:select_data.json, valueField:id, textField:text );下拉框方式js方式input方式案例图7.3.1、ComboBox-属性说明ComboBox 除了继承所有的Combo属性外

26、还有一部分自己的属性，说明如下:lvalueField:显示隐藏字段ltextField：显示字段lmode:数据加载方式，remote远程模式、local本地模式lurl:远程加载地址lmethod:请求方法，post、getldata:第一加载数据,data:lfilter:设置本地数据过滤方法？lformatte:格式化行的显示lloader:定义远程加载方法，参数为param,success(data),error()事件事件(包含包含Combo事件事件):onShowPanel：显示下拉面板时候触发onHidePanel:隐藏面板时触发onChange:内容改变时触发onBefore

27、Load:加载前触发，参数:paramonLoadSuccess:加载成功时候触发onLoadError：加载出错的时候触发onSelect:选择一项时候触发onUnselect:取消选择的时候触发方法方法:getData():返回加载成功的数据loadData(data):加载本地数据reload(url):重新加载数据setValues(array):设置一个数组7.3.2、ComboBox方法、事件Combo事件续setValue(value):设置值clear():清除值select(value):选择指定项unselect(value):取消指定项7.4、Spinner(微调器) $

28、(#ss).spinner( required: true, increment: 10 );spinner只能使用js方式创建7.4.1、Spinner-属性、方法、事件width:组件的宽度value:初始值min:允许的最小值max:允许的最大值。increment:点击微调器按钮时的增量值。editable:定义用户是否可以往文本域中直接输入值。disabled:定义是否禁用文本域。spin:function(down):当用户点击微调按钮时调用的函数。destroy:销毁微调器组件。resize:重设组件的宽度。enable:启用组件。disable:禁用组件。getValue:获取

29、组件的值。setValue:设置组件的值。续clear:清除组件的值。事件事件:onSpinUp:当用户点击向上微调按钮时触发。onSpinDown:当用户点击向下微调按钮时触发。NumberSpinner（数字微调器）（数字微调器）;数字微调器的使用与Spinner的使用基本一样。属性、方法、事件都一样。NumberSpinner只有一个setValue方法7.5、NumberBox(数字输入框)ldisabled:定义是否禁用该域。lmin:允许的最小值。lmax:允许的最大值。lprecision显示在小数点后面的最大精度。ldecimalSeparator:整数与小数的分割符，默认.l

30、groupSeparator:千位分割符lprefix:前缀字符串lsuffix:后缀字符串lformatter:格式化字符串，返回字符串，显示到输入框lparser:解析字符串7.6、Calendar(日历) 1、html创建方式2、js创建方式$(#ccc).calendar();calendar有一个onSelect事件,参数是一个date$(#cc).calendar(onSelect: function(date)alert(date.getFullYear()+:+(date.getMonth()+1)+:+date.getDate(););续firstDay:设置一周是从星期几开

31、始,星期天是0星期一是1weeks:设置周如何显示months:定义月如何显示year:设置默认显示那一年month:设置默认显示几月的日历current:设置当前日期7.7、DateBox(时间)、DateTimeBox(日期)lDateBox与DateTimeBox创建方式与Calendar的方式一样.Datebox与DateTimeBox基本相似,datebox不包含时分秒,并且dateTimeBox是继承与DateBox使用panelWidth、panelHeight来时这种下拉面板的宽高,使用currentText、closeText、okText分别设置选择当前时间、确定、取消按钮

32、的文本使用formatter属性格式化输入框的显示样式续同样他们都有一个onSelect方法使用calendar与setValue获得日历对象和设置值,getValue得到值通过属性showSeconds、timeSeparator这两属性分别设置DateTimeBox组件是否显示秒默认值是true、时间之间分割符默认值是:7.8、TimeSpinner(时间微调)1、html创建方式创建方式2、js创建方式创建方式 $(#ss).timespinner( min: 08:30, required: true, showSeconds: true ); 7.8.1、TimeSpinner-属性

33、方法属性：属性：separator:分割符，默认:showSeconds:是否显示秒，默认falsehighlight:设置光标初始位置，0=小时，1=分钟，2=秒方法方法:setValue(value):设置时间，$(#ss).timespinner(setValue, 17:45);getValue:得到值getHours:得到当前时间的小时数getMinutes:得到当前时间的分钟数getSeconds:得到当前时间的秒数7.9、Slider-滑块 Slider创建方式有三种，一、方式 二、 三、js 方式，下面代码是input创建方式 7.9.1、Slider-属性lwidth宽度lh

34、eight高度.lmode:的类型., h(水平),v(垂直)lreversed:最大值与最小值位置交换lshowTip:是否显示提示信息。lvalue:设置默认值lmin:最小值.lmax:最大值.lstep:步长lrule 刻度标签, | 在刻度的旁边显示.ltipFormatter:格式化 tip提示的方法事件事件:onChange(newValue, oldValue):值发生改变时候触发onSlideStart(value):滑块开始滑动时候触发onSlideEnd(value):滑块结束滑动时候触发7.10、Form(表单)上面我们介绍了easyui扩展的一些表单控件。同时easy

35、ui也提供了表单操作方法，比如加载数据，检查数据，提交表单$(#ff).form(submit, url:请求地址 success: function(data) 请求成功.“ );通过上面代码，我们把id为ff的表单提交到指定的地址，使用success函数处理请求成功户的操作八、数据表格(DataGrid)8.1、创建DataGridhtml代码效果图 ,源码见附件续通过上面的代码我们发现,配置一个简单grid非常简单,使用columns属性定义列，只需要按照columns定义的格式给定json数据就能完成显示$(#dg).datagrid( url: datagrid_data.json,

36、 width: 400, height: 400, columns: title: 编号,field: code,width: 100 , title: 名称, field: name,width: 100 , title: 地址, field: addr, width: 100, title: col4, field: col4, width: 100 );8.2、toolbar定义toolbar 有两种方式1、先定义好linkbutton，然后再通过id引用进来$(#dg).datagrid(toolbar: #tb);2通过数组方式进行配置iconCls: icon-edit,handl

37、er: function()alert(edit),-,iconCls: icon-help,handler: function()alert(help)-,这个符合表示在两个button间添加一个分隔符8.3、Column属性说明ltitle:列显示名lfield:列隐藏名lwidth:宽lrowspan:跨行lcolspan:跨列lalign:数据显示位置,left,right,centerlhalign:列标题显示位置,left,right,centerlsortable:是否允许排序lorder:排序方式 ,asc 、 desc.lresizable:是否允许调整大小lhidden:隐

38、藏改列lcheckbox:是否显示复选框lformatter:设置列样式 ,value、rowData、rowIndex 是fn的三个参数lstyle:定制单元格样式value、rowData、rowIndex 是fn的三个参数lsorter:自定义排序8.4、DataGrid 属性说明lcolumns:列配置对象lfrozenColumns:配置固定在左边的列对象lfitColumns:列自动适应宽高lresizeHandle:重新调整列宽度的位置默认右边, left,right,bothlautoRowHeight:行高是否自动ltoolbar:定义工具栏,定义功能栏有两种方式处理见(8.

39、2)lstriped:是否隔行变色lmethod:以什么类型的方法请求远程数据,默认postlnowrap:是否一行显示,默认为truelidField:指定标示字段lurl:数据请求地址ldata:定义数据lloadMsg:加载时显示的文字,默认是Processing, please wait lpagination:是否显示分页条续lrownumbers:是否显示行号lsingleSelect:单选模式lcheckOnSelect:复选框选择则选择改行lselectOnCheck:改行选中的同时选中复选框lpagePosition:分页工具条显示位置,top,bottom,both.lpa

40、geNumber:默认显示的多少页lpageSize:每页显示条数,lpageList:可选的每页显示条数,例如:10,20,30,40,50,lqueryParams:请求数据带的额外参数lsortName:指定排序列lsortOrder:指定排序方式 ，默认asc,asc 、 desc.lremoteSort:如果是服务器数据则进行排序lshowHeader:是否显示表头lshowFooter:定义是否显示页脚lrowStyler:定义行样式8.5、dataGrid常用方法lload:从服务器加载新数据,如果有参数则会替代QueryParams的参数lreload:根据上次load的参数，

41、重新加载数据lloading:显示加载状态lloaded:隐藏加载状态lgetData:得到加载到的数据lgetRows:返回当前页的所有rowslgetRowIndex:返回指定行的indexlgetChecked:返回所有复选框被选中的行lgetSelected：返回选中项lgetSelections:返回所有选中项lclearSelections:清除所有选中项lclearChecked:清除所有被选中的复选框lselectAll:选择全部lunselectAll:取消全选lselectRow:选择一行，行索引从0开始。8.6、dataGrid常见事件lonLoadSuccess:数据加

42、载成功lonLoadError:数据加载错lonBeforeLoad:数据加载前lonClickRow:点击一行触发lonDblClickRow:双击一行触发lonClickCell:点击一个单元格触发lonDblClickCell:双击单元触发lonSelect:选择一行触发lonCheck:复选框选中后触发8.7、editDateGrid(可编辑表格)可编辑表格与普通表格使用大致相同，只是可编辑表格需要给每个单元格指定一个编辑对象即可 editor: type: text, options: required: true 指定编辑对象后，我们还需要使用beginEdit方法开始一个编辑。同

43、时也使endEdit方法结束一个编辑$(#dg).datagrid(beginEdit, rowIndex);$(#dg).datagrid(endEdit, lastIndex);8.8、添加页脚要使用页脚，需要使用showFooter:true设置显示页脚，然后在数据里面添加名称为footer的数据数组。 rows: code: 001, name: Name 1, addr: Address 11, col4: col4 data footer: name: 400, addr: 天河区 8.9、创建自定义视图创建自定义视图的时候需要继承 $.fn.datagrid.defaults.v

44、iew方法。同时我也需要定义一些方法来说明显示的方式lrender(target,container,frozen):数据加载时调用。target: DOM对象，数据网格对象。container: 行记录容器。frozen: 是否呈现固定容器。lrenderFooter(target, container, frozen):这是一个可选函数用以展现行底。lrenderRow(target, fields, frozen, rowIndex, rowData):这是一个可选函数，它可以被render函数调用。lrefreshRow(target, rowIndex):定义如何刷新指定的行。lon

45、BeforeRender:在视图被呈现之前触发。lonAfterRender:在视图被程序之后触发。续继承$.fn.datagrid.defaults.view后，重写了renderRow方法来定义每一行的显示样子8.10、PropertyGrid(属性表格) $(#pg).propertygrid(showGroup: true, scrollbarSize: 0, ); ) data: name: 姓名, value: , group: 基本信息, editor: text , name: 年龄, value: 40, group: 基本信息, editor: numberbox , na

46、me: 地址, value: , group: 住址, editor: text , name: 电话, value: , group: 联系方式, editor: text ,源代码:源数据:8.10.1、PropertyGrid属性及方法属性：属性：showGroup:定义是否显示特性组。groupField:定义组的字段名。groupFormatter:定义如何格式化组的值。方法方法:expandGroup(groupIndex):展开指定组。没有groupIndex参数，展开所有组。collapseGroup(groupIndex):折叠指定组。没有groupIndex参数，折叠所有组。PropertyGrid 行定义需要包含如下的属性行定义需要包含如下的属性:name: 字段名value: 默认值group: 分组字段editor: 编辑对象8.11、combogrid(数据表格下拉框)$(#cc).combogrid(panelWidth: 310,value: 006,idField: id,textField: name,columns: field: id, title: Id, width: 60 , field: name, title: 姓名, width: 100 , field: age, title: 年龄, width: 120 , )