EasyUI学习笔记剖析Word格式文档下载.docx
- 文档编号:22927715
- 上传时间:2023-02-06
- 格式:DOCX
- 页数:27
- 大小:162.20KB
EasyUI学习笔记剖析Word格式文档下载.docx
《EasyUI学习笔记剖析Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《EasyUI学习笔记剖析Word格式文档下载.docx(27页珍藏版)》请在冰豆网上搜索。
#toolbar"
pagination="
true"
rownumbers="
fitcolumns="
singleselect="
thead>
tr>
thfield="
AccountCode"
width="
50"
编号
/th>
AccountName"
卡名
AccountPwd"
密码
CreateTime"
创建时间
CreateName"
创建人
/tr>
/thead>
/table>
jqueryeasyui是用datagrid对数据进行展示的,所以class要选择easyui-datagrid;
url是本列表的一个json格式的数据来源toobar后面跟着的"
#toobar"
是列表的一个工具栏,本示例在列表上显示的是添加,修改,删除功能按钮对数据进行操作。
pagination是否显示分页,rownumbers显示行数,分页时向后台传去两个参数,一个就是当前页数另一个就是每页显示行数;
fitcolumns:
自适应列宽;
singleselected:
单选。
工具条代码
divid="
toolbar"
ahref="
javascript:
void(0)"
easyui-linkbutton"
iconcls="
icon-add"
onclick="
newuser()"
plain="
添加<
/a>
icon-edit"
edituser()"
修改<
icon-remove"
删除<
/div>
添加弹出框:
在添加弹出框内容中,有一个class=”easy-dialog”,这个对话框(dialog)是一个特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏。
默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具。
用户可以配置对话框行为来显示其他工具(比如:
可折叠collapsible、可最小化minimizable、可最大化maximizable,等等)。
具体参考开发文档,如下图:
添加数据弹出框代码如下:
数据源添加弹出框
复制代码代码如下:
dlg"
easyui-dialog"
400px;
280px;
padding:
10px20px;
"
closed="
buttons="
#dlg-buttons"
divclass="
ftitle"
信息编辑
formid="
fm"
method="
post"
fitem"
label>
编号
/label>
inputname="
easyui-validatebox"
required="
卡号<
密码<
创建时间<
easyui-datebox"
创建人<
easyui-vlidatebox"
inputtype="
hidden"
name="
action"
id="
hidtype"
ID"
Nameid"
/form>
?
dlg-buttons"
saveuser()"
icon-save"
保存<
$('
#dlg'
).dialog('
close'
)"
icon-cancel"
取消<
class为弹出框类型;
closed:
当前显示状态为隐藏;
buttons:
弹出框的功能按钮;
对弹出的添加页面添加样式:
(id用#,clas用.)
styletype="
#fm
{
margin:
0;
10px30px;
}
.ftitle
font-size:
14px;
font-weight:
bold;
5px0;
margin-bottom:
10px;
border-bottom:
1pxsolid#ccc;
.fitem
5px;
.fitemlabel
display:
inline-block;
width:
80px;
/style>
js实现对数据的添加修改删除
scripttype="
varurl;
vartype;
functionnewuser(){
$("
#dlg"
).dialog("
open"
setTitle'
'
NewUser'
);
;
$("
#fm"
).form("
clear"
url="
UserManage.aspx"
;
document.getElementById("
).value="
submit"
}
functionedituser(){
varrow=$("
#dg"
).datagrid("
getSelected"
if(row){
EditUser'
load"
row);
url="
UserManage.aspx?
id="
+row.ID;
functionsaveuser(){
{
url:
url,
onsubmit:
function(){
return$(this).form("
validate"
},
success:
function(result){
if(result=="
1"
){
$.messager.alert("
提示信息"
"
操作成功"
close"
}else{
操作失败"
}
});
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){
reload'
//reloadtheuserdata
}else{
$.messager.show({
//showerrormessage
title:
'
Error'
msg:
result.errorMsg
});
},'
json'
}
data-options="
fit:
->
bodyclass="
easyui-layout"
-<
/body>
加上data-options="
好让框架能自适应浏览器窗口。
collapsible
boolean
定义是否显示折叠按钮。
true
data-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>
、基本用法
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
htmlxmlns="
http:
//www.w3.org/1999/xhtml"
headrunat="
server"
title>
消息提示框<
/title>
/jquery-easyui-1.2.4/themes/default/easyui.css"
rel="
type="
/>
/jquery-easyui-1.2.4/themes/icon.css"
/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
/jquery-easyui-1.2.4/jquery.easyui.min.js"
/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js"
$(function
(){
操作提示"
操作成功!
/head>
body>
/html>
效果图:
2>
、icon使用
icon四种设置:
error"
、"
info"
question"
warning"
效果:
"
操作失败!
您确定要执行操作吗!
3>
、function使用
function
var
i=1;
alert(i);
2、$.messager.confirm(title,msg,fn)
$.messager.confirm("
您确定要执行操作吗?
(data){
if
alert("
确定"
else
{
取消"
3、$.messager.prompt(title,msg,fn)
$.messager.prompt("
alert(data);
4、$.messager.show(options)
18
19
20
21
22
ht
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- EasyUI 学习 笔记 剖析