EasyUI学习笔记剖析.docx

上传人:b****8 文档编号:9725121 上传时间:2023-02-06 格式:DOCX 页数:27 大小:162.20KB
下载 相关 举报
EasyUI学习笔记剖析.docx_第1页
第1页 / 共27页
EasyUI学习笔记剖析.docx_第2页
第2页 / 共27页
EasyUI学习笔记剖析.docx_第3页
第3页 / 共27页
EasyUI学习笔记剖析.docx_第4页
第4页 / 共27页
EasyUI学习笔记剖析.docx_第5页
第5页 / 共27页
点击查看更多>>
下载资源
资源描述

EasyUI学习笔记剖析.docx

《EasyUI学习笔记剖析.docx》由会员分享,可在线阅读,更多相关《EasyUI学习笔记剖析.docx(27页珍藏版)》请在冰豆网上搜索。

EasyUI学习笔记剖析.docx

EasyUI学习笔记剖析

EasyUI学习笔记

1.class="easyui-datagrid"用于列表展示

2.注释:

图中有标有绿色字体的是在图片中显示的图片的样式,比如添加,删除,修改,保存,取消。

把jqueryeasyui下载好之后,一般引用下页几个文件

引入样式代码如下:

   

       type="text/css"/>

//页面图标样式

   

   

//jqueryeasyui主要的js

   

列表展示数据

代码如下:

700px;height:

250px"

       url="toolbar="#toolbar"pagination="true"rownumbers="true"

       fitcolumns="true"singleselect="true">

       

           

               

                   编号

               

               

                   卡名

               

               

                   密码

               

               

                   创建时间

               

               

                   创建人

               

           

       

   

jqueryeasyui是用datagrid对数据进行展示的,所以class要选择easyui-datagrid;url是本列表的一个json格式的数据来源toobar后面跟着的"#toobar"是列表的一个工具栏,本示例在列表上显示的是添加,修改,删除功能按钮对数据进行操作。

pagination是否显示分页,rownumbers显示行数,分页时向后台传去两个参数,一个就是当前页数另一个就是每页显示行数;fitcolumns:

自适应列宽;singleselected:

单选。

工具条代码

代码如下:

       

void(0)"class="easyui-linkbutton"iconcls="icon-add"onclick="newuser()"

           plain="true">添加

void(0)"class="easyui-linkbutton"iconcls="icon-edit"

               onclick="edituser()"plain="true">修改

void(0)"class="easyui-linkbutton"

                   iconcls="icon-remove"plain="true">删除

   

添加弹出框:

在添加弹出框内容中,有一个class=”easy-dialog”,这个对话框(dialog)是一个特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏。

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

用户可以配置对话框行为来显示其他工具(比如:

可折叠collapsible、可最小化minimizable、可最大化maximizable,等等)。

具体参考开发文档,如下图:

添加数据弹出框代码如下:

数据源添加弹出框

复制代码代码如下:

400px;height:

280px;padding:

10px20px;"

      closed="true"buttons="#dlg-buttons">

      

          信息编辑

      

      

      

          

              编号

          

          

      

      

          

              卡号

          

      

      

          

              密码

          

      

      

          

              创建时间

          

      

      

          

              创建人

          

      

      

      

      

  

?

       

void(0)"class="easyui-linkbutton"onclick="saveuser()"iconcls="icon-save">保存

       

void(0)"class="easyui-linkbutton"onclick="javascript:

$('#dlg').dialog('close')"

           iconcls="icon-cancel">取消

   

class为弹出框类型;closed:

当前显示状态为隐藏;buttons:

弹出框的功能按钮;

对弹出的添加页面添加样式:

(id用#,clas用.)

代码如下:

?

       #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;

       }

   

js实现对数据的添加修改删除

代码如下:

      varurl;

       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({  //showerrormessage 

           title:

'Error',

           msg:

result.errorMsg

           });

          }

         },'json');

       }

       });

       }

       } 

   

data-options="fit:

true"->

true">

-

加上data-options="fit:

true"好让框架能自适应浏览器窗口。

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

//www.w3.org/1999/xhtml">

    消息提示框

    

    

    

    

    

    

        $(function (){

            $.messager.alert("操作提示","操作成功!

");

        });

    

效果图:

2>、icon使用

icon四种设置:

"error"、"info"、"question"、"warning"

效果:

1

2

3

4

5

    $(function (){

        $.messager.alert("操作提示","操作成功!

","info");

    });

1

2

3

4

5

    $(function (){

        $.messager.alert("操作提示","操作失败!

","error");

    });

1

2

3

4

5

    $(function (){

        $.messager.alert("操作提示","您确定要执行操作吗!

","question");

    });

1

2

3

4

5

    $(function (){

        $.messager.alert("操作提示","您确定要执行操作吗!

","warning");

    });

3>、function使用

1

2

3

4

5

6

7

8

    $(function (){

        $.messager.alert("操作提示","操作成功!

","info",function (){

            var i=1;

            alert(i);

        });

    });

2、$.messager.confirm(title,msg,fn)

代码:

1

2

3

4

5

6

7

8

9

10

11

12

    $(function (){

        $.messager.confirm("操作提示","您确定要执行操作吗?

",function (data){

            if (data){

                alert("确定");

            }

            else {

                alert("取消");

            }

        });

    });

效果图:

3、$.messager.prompt(title,msg,fn)

代码:

1

2

3

4

5

6

7

8

9

    $(function (){

        $.messager.prompt("操作提示","您确定要执行操作吗?

",function (data){

            if (data){

                alert(data);

            }

        });

    });

效果图:

4、$.messager.show(options)

代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 求职职场 > 简历

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1