EasyUI 学习笔记汇总

EasyUI 学习笔记
1．class="easyui-datagrid" 用于列表展示
2．注释：图中有标有绿色字体的是在图片中显示的图片的样式，比如添加，删除，修改，保存，取消。

把jquery easyui下载好之后，一般引用下页几个文件
引入样式代码如下:
<link href="/Resources/easyui/css/default.css" rel="style sheet" type="text/css" />
<link href="/Resources/easyui/js/themes/default/ea syui.css" rel="stylesheet"
type="text/css" />
//页面图标样式
<link href="/Resources/easyui/js/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/Resources/easyui/js/jquery-1.7.2.min. js" type="text/javascript"></script>
//jquery easyui主要的js
<script src="/Resources/easyui/js/jquery.easyui.mi n.js" type="text/javascript"></script>
列表展示数据
代码如下:
<table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; he ight: 250px"
url="/GetJson/CreateJson.aspx" toolbar="#t oolbar" pagination="true" rownumbers="true"
fitcolumns="true" singleselect="true">
<thead>
<tr>
<th field="AccountCode" width="50">
编号
</th>
<th field="AccountName" width="50">
卡名
</th>
<th field="AccountPwd" width="50">
密码
</th>
<th field="CreateTime" width="50">
创建时间
</th>
<th field="CreateName" width="50">
创建人
</th>
</tr>
</thead>
</table>
jquery easyui是用datagrid对数据进行展示的，所以class要选择easyui-datagrid；url是本列表的一个json格式的数据来源toobar后面跟着的"#toobar"是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。

p agination是否显示分页，ro wnumbers显示行数，分页时向后台传去两个参数，一个就是当前页数另一个就是每页显示行数；fitcolumns：自适应列宽；singleselected:单选。

工具条代码
代码如下:
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls=" icon-add" onclick="newuser()"
plain="true">添加</a> <a href="javascript:void(0)" class ="easyui-linkbutton" iconcls="icon-edit"
onclick="edituser()" plain="true">修改</a> <a hr
ef="javascript:void(0)" class="easyui-linkbutton"
iconcls="icon-remove" plain="true">删除< /a>
</div>
添加弹出框：
在添加弹出框内容中，有一个class=”easy-dialog”, 这个对话框（dialog）是一个特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。

默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。

用户可以配置对话框行为来显示其他工具（比如：可折叠collapsible、可最小化minimizable、可最大化maximizable，等等）。

具体参考开发文档，如下图：
添加数据弹出框代码如下：
数据源添加弹出框
复制代码代码如下:
<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px;"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">
信息编辑
</div>
<form id="fm" method="post">
<div class="fitem">
<label>
编号
</label>
<input name="AccountCode" class="easyui-validatebox" requi red="true" />
</div>
<div class="fitem">
<label>
卡号</label>
<input name="AccountName" class="easyui-validatebox" requi red="true" />
</div>
<div class="fitem">
<label>
密码</label>
<input name="AccountPwd" class="easyui-validatebox" requir
ed="true" />
</div>
<div class="fitem">
<label>
创建时间</label>
<input name="CreateTime" class="easyui-datebox" required=" true" />
</div>
<div class="fitem">
<label>
创建人</label>
<input name="CreateName" class="easyui-vlidatebox" /> </div>
<input type="hidden" name="action" id="hidtype" />
<input type="hidden" name="ID" id="Nameid" />
</form>
</div>
?<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick=" saveuser()" iconcls="icon-save">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick=" javascript:$('#dlg').dialog('close')"
iconcls="icon-cancel">取消</a>
</div>
class为弹出框类型；closed:当前显示状态为隐藏；buttons:弹出框的功能按钮；对弹出的添加页面添加样式：（id 用#，clas用.）
代码如下:
?<style type="text/css">
#fm
{
margin: 0;
padding: 10px 30px;
}
.ftitle
{
font-size: 14px;
font-weight: bold;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.fitem
{
margin-bottom: 5px;
}
.fitem label
{
display: inline-block;
width: 80px;
}
</style>
js实现对数据的添加修改删除
代码如下:
<script type="text/javascript">
var url;
var type;
function newuser() {
$("#dlg").dialog("open").dialog('setTitle', 'New User'); ;
$("#fm").form("clear");
url = "UserManage.aspx";
document.getElementById("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("validate");
},
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 des troy this user?', 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');
}
});
}
}
</script>
data-options="fit:true"->
<bodyclass="easyui-layout"data-options="fit:true">
-</body>
加上data-options="fit:true"好让框架能自适应浏览器窗口。

collapsible boolean 定义是否显示折叠按钮。

true
data-options:
就是用来定义组件的各种样式和内容，事件的。

是Jquery easyui 的panel的属性，title定义在面板头部显示的标题文本，
collapsible定义是否显示可折叠按钮，
cionCls设置一个16x16图标的CSS类ID显示在面板左上角，
onOpen是事件，在打开面板之后触发
ctrlSelect ：在启用多行选择的时候允许使用Ctrl 键+鼠标点击的方式进行多选操作。

（该属性自1.3.6版开始可用）
HIS （医院信息系统）
医院管理和医疗活动中进行信息管理和联机操作的计算机应用系统,英文缩写HIS.。

HIS 是覆盖医院所有业务和业务全工程的信息管理系统。

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

jQueryEasyUI Messager 基本使用
2、$.messager.alert(title, msg, icon, fn)
1>、基本用法 代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <html xmlns="/1999/xhtml"> <head runat="server">
<title>消息提示框</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesh <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javasc <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javas <script src="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js" type="tex <script type="text/javascript"> $(function () {
$.messager.alert("操作提示", "操作成功！"); }); </script> </head> <body> </body> </html>
效果图：
3>、代码：
代码：
showType3种设置值:"show"、"slide"、"fade" 5、修改Button 显示文字 代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> $(function () {
$.messager.defaults = { ok: "是", cancel: "否" };
$.messager.confirm("操作提示", "您确定要执行操作吗？", function if (data) {
alert("是"); }
else {
alert("否"); } }); }); </script>
效果图：
6、方法
msg ：定义显示的消息文本。

title ：定义显示在标题面板显示的标题文本。

timeout ：如果定义为0，消息窗口将不会关自动关闭。

$.messager.alert
title, msg, icon, fn
显示一个警告窗口。

参数如下： title ：显示在标题面板的标题文本。

msg ：提示框显示的消息文本。

icon ：提示框显示的图标。

可用的值是：er
fn ：当窗口关闭时触发的回调函数。

$.messager.confirm
title, msg, fn
显示一个含有确定和取消按钮的确认消息窗口
title ：显示在标题面板的标题文本。

msg ：确认消息窗口显示的消息文本。

fn(b)：当用户点击按钮后触发的回调函数，
$.messager.prompt
title, msg, fn
显示一个确定和取消按钮的信息提示窗口，提
title ：显示在标题面板的标题文本。

msg ：提示窗口显示的消息文本。

fn(val)
：用户点击按钮后的回调函，参数是
7、扩展
可以通过$.messager.defaults 方法自定义alert 框的ok 按钮和cancel 按钮上显示的文字。

3jQuery 选择器总结。