EasyUI使用教程.docx

EasyUI使用教程使用EasyUI必须导入其js以及css等. 1. (l)list界面效果图:图1a) 首先界面布局,这里用jsp为例 姓名 电话 邮箱 note: url是想那个地址请求数据,pagination:是否显示分页.fitColumns是否自动使用宽度,singleSelect是否可以多选关于中的field的值,必须和数据库中你要显示的字段名相同.b) 添加/删除/修改等事件增加效果图(其他略):图2按钮定义 添加 编辑 删除 刷新 其中主要是js事件:newUser()var url; function newUser() $(#dlg).dialog(open).dialog(setTitle,新增用户); $(#fm).form(clear); url = /easyui/saveUser; ;function saveUser() $(#fm).form(submit, url: url, onSubmit: function() return $(this).form(validate); , success: function(result) var result = eval(+result+); if (result.errorMsg) $.messager.show( title: Error, msg: result.errorMsg ); else $(#dlg).dialog(close); / close the dialog $(#dg).datagrid(reload); / reload the user data ); ;这样即可c) 分页:效果同上上图图3页面此table页面简单代码:其中pagiination=”true”设置有分页.实现分页的js代码为:/此处采用url的方法获取数据,所以此方法可以删除 function getData() function pagerFilter(data) if (typeof data.length = number & typeof data.splice = function)/ is array data = total: data.length, rows: data var dg = $(this); var opts = dg.datagrid(options); var pager = dg.datagrid(getPager); pager.pagination( onSelectPage:function(pageNum, pageSize) opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination(refresh, pageNumber:pageNum, pageSize:pageSize ); dg.datagrid(loadData,data); ,onRefresh:function(pageNum, pageSize) $(#dg).datagrid(reload); ); if (!data.originalRows) data.originalRows = (data.rows); var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end); return data; $(function() $(#dg).datagrid(loadFilter:pagerFilter).datagrid(loadData, getData(); );note:开始时,点击分页栏中的刷新按钮不管用,一看忘记了实现onRefresh方法.具体剩下的方法看文档: /documentation/index.php在线demo: /demo/main/index.phpd) 后台处理easyui/getUsers的实现:public void getUsers()List users = User.dao.find(select * from user order by id desc);renderJson(users);我们前台需要的是Json格式数据,在这里用jfinal很容易实现.这样即可.e)f)2. 初始化菜单导航栏:开始时,采用直接在jsp页面中 添加代码的方式,但是为了以后配置的方便,改成了读取Json格式数据,动态创建菜单的方法:数据展示:var _panels = panels:panelid:12,icon:icon-sys,panelname:平台管理模块,menus:menuname:企业用户管理,icon:icon-tip,tabId:guanwang1,url:http:/localhost/easyui/basicCrud,;那么通过js读取出来,动态添加到导航菜单中,js:/初始化菜单function InitLeftMenu() $(.easyui-accordion).empty(); /先列菜单 $.each(_panels.panels, function(i, n) var menulist = ; var template = new t(=menuname); menulist += ; /继续找下个元素 $.each(n.menus, function(j, o) menulist += ;menulist += template.render(o); ); menulist += ; $(#leftmenu).accordion(add, title:n.panelname, content:menulist ); ) $(.easyui-accordion ui a).click(function()var tabTitle = $(this).text();var url = $(this).attr(url);var tabId = $(this).attr(tabId);addTab(tabId,tabTitle,url);$(.easyui-accordion ui div).removeClass(selected);$(this).parent().addClass(selected);).hover(function()$(this).parent().addClass(hover);,function()$(this).parent().removeClass(hover););$(.easyui-accordion).accordion();里面有个addTab(tabId,title,url)的方法,他的作用是在主MainFrame中添加tab/增加tabfunction addTab(tabId,title,url)/如果当前id的tab不存在则创建一个tabif(!$(#tabs).tabs(exists,title)$(#tabs).tabs(add,title: title, closable:true,cache : false,/注：使用iframe即