《EasyUI使用教程.docxVIP

EasyUI使用教程使用EasyUI必须导入其js以及css等. (l)list界面效果图:图1首先界面布局,这里用jsp为例table id=dg title=人员信息 class=easyui-datagrid style=width:700px;height:300px url=/easyui/getUsers toolbar=#toolbar pagination=true rownumbers=true fitColumns=true singleSelect=true thead tr th field=nick_name width=50姓名/th th field=wx_open_id width=50电话/th th field=address width=50邮箱/th /tr /thead /tablenote: url是想那个地址请求数据,pagination:是否显示分页.fitColumns是否自动使用宽度,singleSelect是否可以多选关于th中的field的值,必须和数据库中你要显示的字段名相同.添加/删除/修改等事件增加效果图(其他略):图2按钮定义div id=toolbar a href=javascript:void(0) title=添加用户 class=easyui-linkbutton easyui-tooltip iconCls=icon-add plain=true onclick=newUser();添加/a a href=javascript:void(0) title=修改用户 class=easyui-linkbutton easyui-tooltip iconCls=icon-edit plain=true onclick=editUser();编辑/a a href=javascript:void(0) title=删除用户 class=easyui-linkbutton easyui-tooltip iconCls=icon-remove plain=true onclick=destroyUser();删除/a a href=javascript:void(0) title=刷新 class=easyui-linkbutton easyui-tooltip iconCls=icon-reload plain=true onclick=reload();刷新/a /div其中主要是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 } } }); };这样即可分页:效果同上上图图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 =