EasyUI学习笔记剖析.docx

1、EasyUI学习笔记剖析EasyUI 学习笔记1 class=easyui-datagrid 用于列表展示2 注释：图中有标有绿色字体的是在图片中显示的图片的样式，比如添加，删除，修改，保存，取消。把jquery easyui下载好之后，一般引用下页几个文件引入样式 代码如下: /页面图标样式 /jquery easyui主要的js 列表展示数据代码如下: 编号 卡名 密码 创建时间 创建人 jquery easyui是用datagrid对数据进行展示的，所以class要选择easyui-datagrid；url是本列表的一个json格式的数据来源toobar后面跟着的#toobar是列表的一

2、个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。pagination是否显示分页，rownumbers显示行数，分页时向后台传去两个参数，一个就是当前页数另一个就是每页显示行数；fitcolumns：自适应列宽；singleselected:单选。工具条代码代码如下: 添加 修改 删除 添加弹出框：在添加弹出框内容中，有一个class=”easy-dialog”, 这个对话框（dialog）是一个特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具（比如：可折叠

3、 collapsible、可最小化 minimizable、可最大化 maximizable，等等）。具体参考开发文档，如下图：添加数据弹出框代码如下：数据源添加弹出框复制代码 代码如下: 信息编辑 编号 卡号 密码 创建时间 创建人 ? 保存 取消 class为弹出框类型；closed:当前显示状态为隐藏；buttons:弹出框的功能按钮；对弹出的添加页面添加样式：（id 用#，clas用.）代码如下:? #fm margin: 0; padding: 10px 30px; .ftitle font-size: 14px; font-weight: bold; padding: 5px 0;

4、 margin-bottom: 10px; border-bottom: 1px solid #ccc; .fitem margin-bottom: 5px; .fitem label display: inline-block; width: 80px; js实现对数据的添加修改删除代码如下: var url;var type;function newuser() $(#dlg).dialog(open).dialog(setTitle, New User); ;$(#fm).form(clear); url = UserManage.aspx;document.getElementById

5、(hidtype).value=submit; function edituser() var row = $(#dg).datagrid(getSelected); if (row) $(#dlg).dialog(open).dialog(setTitle, Edit User); $(#fm).form(load, row); url = UserManage.aspx?id= + row.ID; function saveuser() $(#fm).form(submit, url: url,onsubmit: function () return $(this).form(valida

6、te);,success: function (result) if (result = 1) $.messager.alert(提示信息, 操作成功);$(#dlg).dialog(close);$(#dg).datagrid(load);else $.messager.alert(提示信息, 操作失败); ); function destroyUser() var row = $(#dg).datagrid(getSelected);if (row) $.messager.confirm(Confirm, Are you sure you want to destroy this user

7、?, function (r) if (r) $.post(destroy_user.php, id: row.id , function (result) if (result.success) $(#dg).datagrid(reload); / reload the user data else $.messager.show( / show error message title: Error,msg: result.errorMsg);, json);); data-options=fit:true-加上data-options=fit:true好让框架能自适应浏览器窗口。colla

8、psibleboolean定义是否显示折叠按钮。truedata-options:就是用来定义组件的各种样式和内容，事件的。是Jquery easyui 的panel的属性，title定义在面板头部显示的标题文本，collapsible定义是否显示可折叠按钮，cionCls设置一个16x16图标的CSS类ID显示在面板左上角，onOpen是事件，在打开面板之后触发ctrlSelect：在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。（该属性自1.3.6版开始可用）HIS（医院信息系统） 医院管理和医疗活动中进行信息管理和联机操作的计算机应用系统,英文缩写HIS.。HIS是覆

9、盖医院所有业务和业务全工程的信息管理系统。按照学术界公认的MorrisF.Collen所给的定义，应该是：利用电子计算机和通讯设备，为医院所属各部门提供病人诊疗信息 ( Patient Care Information) 和行政管理信息（Administration Information)的收集(Collect)、存储(Store)、处理(Process) 、提取(Retrieve)和数据交换(Communicate) 的能力并满足授权用户 ( Authorized Users)的功能需求的平台。jQueryEasyUI Messager基本使用2、$.messager.alert(titl

10、e, msg, icon, fn)1、基本用法代码：1234567891011121314151617消息提示框$(function() $.messager.alert(操作提示, 操作成功！););效果图：2、icon使用icon四种设置：error、info、question、warning效果：12345$(function() $.messager.alert(操作提示, 操作成功！,info););12345$(function() $.messager.alert(操作提示, 操作失败！,error););12345$(function() $.messager.alert(操作

11、提示, 您确定要执行操作吗！,question););12345$(function() $.messager.alert(操作提示, 您确定要执行操作吗！,warning););3、function使用12345678$(function() $.messager.alert(操作提示, 操作成功！, info, function() vari = 1;alert(i);););2、$.messager.confirm(title, msg, fn)代码：123456789101112$(function() $.messager.confirm(操作提示, 您确定要执行操作吗？, function(data) if(data) alert(确定);elsealert(取消);););效果图：3、$.messager.prompt(title, msg, fn)代码：123456789$(function() $.messager.prompt(操作提示, 您确定要执行操作吗？, function(data) if(data) alert(data);););效果图：4、$.messager.show(options)代码：12345678910111213141516171819202122ht