EasyUI学习笔记

EasyUI学习笔记1．class=easyui-datagrid用于列表展示2．注释：图中有标有绿色字体的是在图片中显示的图片的样式，比如添加，删除，修改，保存，取消。把jqueryeasyui下载好之后，一般引用下页几个文件引入样式代码如下:linkhref==stylesheettype=text/css/linkhref==stylesheettype=text/css///页面图标样式linkhref==stylesheettype=text/css/scriptsrc==text/javascript/script//jqueryeasyui主要的jsscriptsrc==text/javascript/script列表展示数据代码如下:tableid=dgtitle=MyUsersclass=easyui-datagridstyle=width:700px;height:250pxurl==#toolbarpagination=truerownumbers=truefitcolumns=truesingleselect=truetheadtrthfield=AccountCodewidth=50编号/ththfield=AccountNamewidth=50卡名/ththfield=AccountPwdwidth=50密码/ththfield=CreateTimewidth=50创建时间/ththfield=CreateNamewidth=50创建人/th/tr/thead/tablejqueryeasyui是用datagrid对数据进行展示的，所以class要选择easyui-datagrid；url是本列表的一个json格式的数据来源toobar后面跟着的#toobar是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。pagination是否显示分页，rownumbers显示行数，分页时向后台传去两个参数，一个就是当前页数另一个就是每页显示行数；fitcolumns：自适应列宽；singleselected:单选。工具条代码代码如下:divid=toolbarahref=javascript:void(0)class=easyui-linkbuttoniconcls=icon-addonclick=newuser()plain=true添加/aahref=javascript:void(0)class=easyui-linkbuttoniconcls=icon-editonclick=edituser()plain=true修改/aahref=javascript:void(0)class=easyui-linkbuttoniconcls=icon-removeplain=true删除/a/div添加弹出框：在添加弹出框内容中，有一个class=”easy-dialog”,这个对话框（dialog）是一个特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具（比如：可折叠collapsible、可最小化minimizable、可最大化maximizable，等等）。具体参考开发文档，如下图：添加数据弹出框代码如下：数据源添加弹出框复制代码代码如下:divid=dlgclass=easyui-dialogstyle=width:400px;height:280px;padding:10px20px;closed=truebuttons=#dlg-buttonsdivclass=ftitle信息编辑/divformid=fmmethod=postdivclass=fitemlabel编号/labelinputname=AccountCodeclass=easyui-validateboxrequired=true//divdivclass=fitemlabel卡号/labelinputname=AccountNameclass=easyui-validateboxrequired=true//divdivclass=fitemlabel密码/labelinputname=AccountPwdclass=easyui-validateboxrequired=true//divdivclass=fitemlabel创建时间/labelinputname=CreateTimeclass=easyui-dateboxrequired=true//divdivclass=fitemlabel创建人/labelinputname=CreateNameclass=easyui-vlidatebox//divinputtype=hiddenname=actionid=hidtype/inputtype=hiddenname=IDid=Nameid//form/div?divid=dlg-buttonsahref=javascript:void(0)class=easyui-linkbuttononclick=saveuser()iconcls=icon-save保存/aahref=javascript:void(0)class=easyui-linkbuttononclick=javascript:$('#dlg').dialog('close')iconcls=icon-cancel取消/a/divclass为弹出框类型；closed:当前显示状态为隐藏；buttons:弹出框的功能按钮；对弹出的添加页面添加样式：（id用#，clas用.）代码如下:?styletype=text/css#fm{margin:0;padding:10px30px;}.ftitle{font-size:14px;font-weight:bold;padding:5px0;margin-bottom:10px;border-bottom:1pxsolid#ccc;}.fitem{margin-bottom:5px;}.fitemlabel{display:inline-block;width:80px;}/stylejs实现对数据的添加修改删除代码如下:scripttype=text/javascriptvarurl;vartype;functionnewuser(){$(#dlg).dialog(open).dialog('setTitle','NewUser');;$(#fm).form(clear);url=UserManage.aspx;document.getElementById(hidtype).value=submit;}functionedituser(){varrow=$(#dg).datagrid(getSelected);if(row){$(#dlg).dialog(open).dialog('setTitle','EditUser');$(#fm).form(load,row);url=UserManage.aspx?id=+row.ID;}}functionsaveuser(){$(#fm).form(submit,{url:url,onsubmit:function(){return$(this).form(validate);},success:function(result){if(result==1){$.messager.alert(提示信息,操作成功);$(#dlg).dialog(close);$(#dg).datagrid(load);}else{$.messager.alert(提示信息,操作失败);}}});}functiondestroyUser(){varrow=$('#dg').datagrid('getSelected');if(row){$.messager.confirm('Confirm','Areyousureyouwanttodestroythisuser?',function(r){if(r){$.post('destroy_user.php',{id:row.id},function(result){if(result.success){$('#dg').datagrid('reload');//reloadtheuserdata}else{$.messager.show({//showerrormessagetitle:'Error',msg:result.errorMsg});}},'json');}});}}/scriptdata-options=fit:true-bodyclass=easyui-layoutdata-options=fit:true-/body加上data-options=fit:true好让框架能自适应浏览器窗口。collapsibleboolean定义是否显示折叠按钮。truedata-options:就是用来定义组件的各种样式和内容，事件的。是Jqueryeasyui的panel的属性，title定义在面板头部显示的标题文本，collapsible定义是否显示可折叠按钮，cionCls设置一个16x16图标的CSS类ID显示在面板左上角，onOpen是事件，在打开面板之后触发ctrlSelect：在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。（该属性自1.3.6版开始可用）HIS（医院信息系统）医院管理和医疗活动中进行信息管理和联机操作的计算机应用系统,英文缩写HIS.。HIS是覆盖医院所有业务和业务全工程的信息管理系统。按照学术界公认的MorrisF.Collen所给的定义，应该是：利用电子计算机和通讯设备，为医院所属各部门提供病人诊疗信息(PatientCareInformation)和行政管理信息（AdministrationInformation)的收集(Collect)、存储(Store)、处理(Process)、提取(Retrieve)和数据交换(Communicate)的能力并满足授权用户(AuthorizedUsers)的功能需求的平台。jQueryEasyUIMessager基本使用2、$.messager.alert(title,msg,icon,fn)1、基本用法代码：1234567891011121314151617htmlxmlns==servertitle消息提示框/titlelinkhref=/jquery-ea