EasyUI笔记总结

66 阅读 0 评论 44 点赞

我是靠谱客的博主舒适热狗，最近开发中收集的这篇文章主要介绍EasyUI笔记总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

写在开头：本文是EasyUI的学习笔记，方便自己查阅要是恰好能帮到别人那就是小弟的荣幸了。写的不好请大家多多指教。

EasyUI的使用需要导入:

要使用easyui 首先要先引入相应的jar包，而且要注意引入的顺序，jquery的jar包要先引入，如下：
           
       <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
       
       <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
       
       <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
       
       <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
       
       <script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
   </head>

jqueary.easyui.min.js包这个包包含了easyUI的所有的插件功能。

1.layout是一个页面布局(下面是一个小的demo)

2.accordion折叠面板

fit属性设置为true自适应父容器大小,默认是false

3.tabs中心区域选项卡

   <body class="easyui-layout">
       <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">北部区域</div>

       <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">南部区域</div>

       <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;">东部区域</div>

       <div data-options="region:'west',title:'West',split:true" style="width:180px;">
           <div id="aa" class="easyui-accordion" data-options="fit:true ">
               <div data-options="title:'系统菜单'">
                   <a href="javascript:void(0)" id="my">我的选项卡</a>
               </div>
               <div data-options="title:'基础菜单'">面板二</div>
           </div>
       </div>
       <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
           <div id="mytabs" class="easyui-tabs" data-options="fit:true">
               <div data-options="title:'选项卡面板一',closable:'true'">选项卡面板一</div>
               <div data-options="title:'选项卡面板二'">选项卡面板二</div>
           </div>
       </div>

       </div>

   </body>

4.树形菜单使用了一个ztree的插件功能非常强大(需要引入相应的js)

<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/>

<ul id="basemenu" class="ztree"></ul>

5.树形菜单和选项卡的整合。

Ztree为每个树形节点添加点击事件

ztree的setting里面又一个callback属性里面的onclick

exists,select是easyui选项卡里面的属性

6.实现右键关闭全部选项卡，关闭其他，关闭当前选项卡

7.下拉菜单menubutton的实现

      <body>
       <a href="#" class="easyui-menubutton" data-options="iconCls:'icon-save',menu:'#mm'">
           系统菜单
       </a>
       <div id="mm" style="width:150px;">

           <div >菜单一</div>
           <div >菜单二</div>
           <div class="menu-sep"></div>
           <div>菜单三</div>
       </div>
   </body>

8.消息窗口message的使用

8.1警告窗口

8.2确认窗口

8.3输入窗口

8.4右下角窗口

8.5进度条窗口

9.窗口 window

窗口是一个浮动和拖拽面板,可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

其中modal表示遮罩，collapsible表示关闭折叠按钮（窗口默认有四个按钮），closed表示窗口默认是不打开的。

collapsible	boolean	定义是否显示折叠按钮。	true
minimizable	boolean	定义是否显示最小化按钮。	true
maximizable	boolean	定义是否显示最大化按钮。	true
closable	boolean	定义是否显示关闭按钮。

$("#window").window('open');表示打开一个窗口 $("#window").window('close');表示关闭一个窗口。

10.校验 form

校验框 validate box class="easyui-validatebox"

需要指定require属性为true完成必须输入校验。

数字校验框 numberbox

下拉校验框 combobox

日期校验框 datebox

validate做表单校验返回true表示表示表单中所有的字段有效它的方法用的是validate box插件

$("#save").click(function(){
                   if($("#standardForm").form('validate')) {
                       $("#standardForm").submit();
                   }else{
                       $.messager.alert("警告","表单必须填写完整","warning");
                   }

               });
           });

11.数据表格 datagrid.

datagrid显示数据表格格式,提供了丰富的支持选择、分类、组织和编辑数据。datagrid被设计来减少开发时间和要求没有专业知识开发人员。它是不重要的,功能丰富。单元合并、表头合并、冻结一列页脚只是它的一些特性。

在页面显示表格的位置提供<table>标签，指定id 元素

在 JS代码 $(“#grid”).datagrid({...});完成对表格设置

columns 表格列定义

url 远程数据加载

pagination 分页

toolbar 顶部

	<script type="text/javascript">
			$(function() {
				$('#dg').datagrid({

					url: 'product.json',
   					columns:[[  //二维数组支持多级表头，每一个数组就是表头一行
   					{
   						 field:"id",//用于和服务器返回的json对应
   						 title:"编号",//列标题显示内容
   						 width:100
   						 
   					},
   					{
   						 field:"name",//用于和服务器返回的json对应
   						 title:"商品名称",//列标题显示内容
   						 width:100
   						 
   					},
   					{
   						 field:"price",//用于和服务器返回的json对应
   						 title:"商品价格",//列标题显示内容
   						 width:100
   						 
   					}
   					]],
   					pagination:true,
   					toolbar:[
   					{
   						id:"saveBtn",
   						text:"保存",
   						iconCls:"icon-save",
   						handler:function() {
   							alert("保存");
   						}
   					}
   					]

				});

			});
		</script>

//进行表单回显操作
$("#standardForm").form("load",row);

12.将查询条件中的表单内容与数据表格绑定。
        $("#searchBtn").click(function() {
                   var params=$("#searchForm").serializeJson();
                   $('#grid').datagrid('load',params);
                   //关闭查询窗口
                   $('#searchWindow').window("close");
               });
           });

//将form请求转化为json

$.fn.serializeJson=function(){
            var serializeObj={};
            var array=this.serializeArray();
            var str=this.serialize();
            $(array).each(function(){
                if(serializeObj[this.name]){
                    if($.isArray(serializeObj[this.name])){
                        serializeObj[this.name].push(this.value);
                    }else{
                        serializeObj[this.name]=[serializeObj[this.name],this.value];
                    }
                }else{
                    serializeObj[this.name]=this.value;
                }
            });
            return serializeObj;
        };