easyUI入门教程.doc

eaysUI简介：easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。本次用到的插件：jquery-easyui-1.4主要引用：link rel=stylesheet type=text/css href=/js/themes/default/easyui.csslink rel=stylesheet type=text/css href=/js/themes/icon.csslink rel=stylesheet type=text/css href=/js/demo.cssscript type=text/javascript src=/js/jquery.min.jsscript type=text/javascript src=/js/jquery.easyui.min.jsscript type=text/javascript src=/js/locale/easyui-lang-zh_CN.js1、 layout (布局)A) layout （布局）1. 2. 3. 4. 5. 6. 7. split:为true时用户可以通过分割栏改变面板大小。B) Panel （面板）fit:当设置为true的时候面板大小将自适应父容器。下面的例子显示了一个面板，可以自动在父容器的最大范围内调整大小。C) Accordion （分类）1. 2. 3. Accordion for jQuery 4. Accordion is a part of easyui framework for jQuery. 5. It lets you define your accordion component on web page more easily. 6. 7. 8. content2 9. 10. 11. content3 12. 13. D)Tabs （选项卡）选项卡的存放位置添加选项卡以及防止重复添加addTab = function(options) if ($(#tt).tabs(exists, options.title) alert(options.title)alert(options.href)$(#tt).tabs(select, options.title); else $(#tt).tabs(add, options);addFriend = function() addTab( title : 朋友管理,href : tree.jsp,fit : true,border : false,closable : true);2、 form（表单）a) form （表单）验证提交SubmitClearJs代码function submitForm() $(#ff).form(submit, onSubmit : function() return $(this).form(enableValidation).form(validate););function clearForm() $(#ff).form(clear);b) validateBox （验证框）c) combobox （下拉列表框）中文英语俄语日语德语 d) numberbox （数值输入框）e) datebox （日期输入框）f) datetimebox （日期时间输入框） 3、 datagrid (数据表格)$(function() $(#dg).datagrid( url : user/jsonFindAll,/title:用戶列表,columns : field : id,title : ID,width : 100,align : center,checkbox : true, field : userName,title : 姓名,width : 100,align : center,sortable : true, field : userPwd,title : 密码,width : 100,align : center,sortable : true, field : age,title : 年龄,width : 100,align : center,sortable : true, field : status,title : 身份,width : 100,align : center,formatter : function(value, row, index) if (value = 0) return 普通用户; else return 管理员; ,pagination : true,/定义分页工具栏的位置。可用的值有：top,bottom,both。pageSize : 5,/在设置分页属性的时候初始化页面大小。pageList : 5, 10, 20, 30, 40, 50 , /在设置分页属性的时候 初始化页面大小选择列表。sortName : userName, /定义哪些列可以进行排序。sortOrder : asc, /定义列的排序顺序，只能是asc或desc。fit : true,fitColumns : true, /真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。 布尔类型（boolean）nowrap : false,/border : false,idField : id, /指明哪一个字段是标识字段。rownumbers : true,toolbar : #toolbar /顶部工具栏的DataGrid面板。可能的值： 1) 一个数组，每个工具属性都和linkbutton一样。 2) 选择器指定的工具栏。););四、tree （树）My DocumentsPhotosFriendWifeCompanyProgram FilesIntelJavaMicrosoft OfficeGamesindexaboutwelcomestate:closed : 节点状态，open 或 closed，默认：open。如果为closed的时候，将不自动展开该节点。5、 补充easyui data-options的使用data-op