EasyUI

一、EsayUI的概述

• 什么是EasyUI

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

• 下载EasyUI

http://www.jeasyui.net/download/

• EasyUI的开发文档

https://pan.baidu.com/s/1odP4-2Yx2pTxzVYATeNk_A

二、EasyUI的使用（入门）

• 引入EasyUI的开发JS和CSS
  

	<!-- 引入css和js -->
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

• EasyUI的使用有两种方式：

CSS的方式

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询 </a

js的方式

	<script type="text/javascript">
		$(function(){
			$("#btn").linkbutton({
				iconCls:"icon-search"
			});
		});
	</script>

三、EasyUI布局

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。

	<div id="cc" class="easyui-layout" data-options="fit:true">   
	    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
	    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
	    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
	</div>  

上述代码的效果图：

四、EasyUI分类

	<div id="aa" class="easyui-accordion" style="width: 300px; height: 200px;">
		<div title="Title1" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">
			<a href="#">客户管理</a>
		</div>
		<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding: 10px;">
			<a href="#">联系人管理</a>
		</div>
		<div title="Title3">
			<a href="#">分类</a>
		</div>
	</div>

五、EasyUI选项卡

选项卡代码

	<a href="#" id="btn" class="easyui-linkbutton">按钮</a>
	<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
	    <div title="Tab1" style="padding:20px;display:none;">   
	        tab1    
	    </div>   
	    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
	        tab2    
	    </div>   
	</div>  

通过js动态添加选项卡，如果选项卡已经存在则不创建，而是选中该选项卡。

		$(function(){
			$("#btn").click(function(){
				var falg = $('#tt').tabs('exists',"客户管理");
				if(falg){
					$('#tt').tabs('select',"客户管理");
				}else{
					$('#tt').tabs('add',{    
					    title:'客户管理',    
					    content:'Tab Body',    
					    closable:true,    
					}); 
				}
			});
		});

六、EasyUI数据表格**

	<table id="dg"></table>  
	<script type="text/javascript">
		$(function(){
			$('#dg').datagrid({  
				//json的url
			    url:'datagrid_data2.json',    
			    columns:[[    
			        {field:'productid',title:'商品编号',width:100},    
			        {field:'unitcost',title:'商品价格',width:100},    
			        {field:'status',title:'商品状态',width:100,align:'right'},    
			        {field:'attr1',title:'商品属性',width:100,align:'center'},    
			        {field:'XXX',title:'操作',width:100,align:'center',formatter: function(value,row,index){
						return "<a href='#'>修改</a>&emsp;<a href='#'>删除</a>"
					}
					}    
			    ]],
			    //显示斑马线效果
			    striped:'true',
			    //显示分页工具栏
			    pagination:'true'
			});  
		});
	</script>

效果：

七、EasyUI窗口

<div id="win"></div>  
$('#win').window({    
    width:600,    
    height:400,    
    modal:true ，
	closed:true
});  

上面设置的closed为true是默认隐藏窗口